/* Basic Setup */
:root {
    --primary-color: #0f0;
    --danger-color: #f00;
    --warning-color: #ff0;
    --info-color: #0ff;
    --background-color: #000;
    --terminal-bg: rgba(0, 0, 0, 0.85);
}

body {
    background-color: var(--background-color);
    color: var(--primary-color);
    font-family: 'SF Mono', 'Courier New', Courier, monospace;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    text-align: center;
    overflow: hidden;
}

/* Matrix Background Canvas */
#matrix-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

/* Terminal Window Styling */
.terminal-window {
    background-color: var(--terminal-bg);
    border: 1px solid var(--primary-color);
    width: 90%;
    max-width: 750px;
    padding: 2rem;
    box-shadow: 0 0 15px var(--primary-color), inset 0 0 10px rgba(17, 255, 17, 0.5);
    border-radius: 5px;
}

/* Text Colors */
.text-danger { color: var(--danger-color); }
.text-warning { color: var(--warning-color); }
.text-info { color: var(--info-color); }

/* Glitch Effect for H1 */
.glitch {
    position: relative;
    text-shadow: 0 0 5px var(--primary-color);
    animation: glitch-flicker 4s infinite alternate;
}
.glitch:before, .glitch:after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--terminal-bg);
}
.glitch:before { left: 2px; text-shadow: -2px 0 var(--danger-color); animation: glitch-anim-1 2s infinite linear alternate-reverse; }
.glitch:after { left: -2px; text-shadow: -2px 0 var(--info-color); animation: glitch-anim-2 2s infinite linear alternate-reverse; }
@keyframes glitch-anim-1 { 0% { clip-path: inset(5% 0 90% 0); } 100% { clip-path: inset(70% 0 10% 0); } }
@keyframes glitch-anim-2 { 0% { clip-path: inset(80% 0 5% 0); } 100% { clip-path: inset(5% 0 88% 0); } }
@keyframes glitch-flicker { 0% { opacity: 1; } 5% { opacity: 0.8; } 10% { opacity: 1; } 40% { opacity: 1; } 42% { opacity: 0.2; } 43% { opacity: 1; } 100% { opacity: 1; } }

/* Input & Button Styling */
input[type="email"] { background-color: #111; border: 1px solid var(--primary-color); color: var(--primary-color); padding: 10px; width: 80%; margin: 20px 0 0 0; font-family: inherit; font-size: 1em; }
button#hack-button { background: transparent; color: var(--primary-color); border: 2px solid var(--primary-color); padding: 10px 20px; font-weight: bold; cursor: pointer; font-family: inherit; font-size: 1.1em; transition: background-color 0.3s, color 0.3s; text-transform: uppercase; margin-top: 20px;}
button#hack-button:hover { background-color: var(--primary-color); color: var(--background-color); }

/* Hacking Screen Elements */
#progress-bar { width: 100%; height: 5px; border: 1px solid var(--primary-color); margin: 20px 0; }
#progress { width: 0%; height: 100%; background-color: var(--primary-color); transition: width 0.1s linear; }
#log { text-align: left; height: 250px; overflow-y: auto; border: 1px solid #333; padding: 10px; white-space: pre-wrap; word-wrap: break-word; }

/* Final Reveal Screen Enhancements */
#hacked-container { padding-top: 50px; }
.access-granted-animation { font-size: 3em; font-weight: bold; color: var(--primary-color); text-shadow: 0 0 10px var(--primary-color), 0 0 20px var(--primary-color); margin-bottom: 30px; display: flex; justify-content: center; overflow: hidden; }
.access-granted-animation .char { display: inline-block; opacity: 0; transform: translateY(-50px); animation: revealChar 0.8s forwards; animation-delay: calc(var(--i) * 0.08s); }
@keyframes revealChar { to { opacity: 1; transform: translateY(0); } }
.fadeIn { opacity: 0; animation: fadeIn 1s forwards; }
@keyframes fadeIn { to { opacity: 1; } }
.reveal-message { font-size: 1.5em; color: #fff; text-shadow: 0 0 5px #ff00ff; margin-top: 20px; }
.welcome-message { font-size: 1.2em; color: var(--info-color); margin-top: 15px; }
.signature { font-size: 0.9em; color: #888; margin-top: 25px; font-style: italic; }
.college-logo { max-width: 150px; height: auto; margin-top: 30px; filter: drop-shadow(0 0 8px var(--primary-color)); }

/* Reveal Button Styling */
#reveal-button { background: transparent; color: var(--warning-color); border: 2px solid var(--warning-color); padding: 15px 30px; font-weight: bold; cursor: pointer; font-family: inherit; font-size: 1.2em; margin-top: 40px; text-transform: uppercase; transition: background-color 0.3s, color 0.3s; animation: pulse-yellow 2s infinite; }
#reveal-button:hover { background-color: var(--warning-color); color: var(--background-color); animation: none; }
@keyframes pulse-yellow { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 0, 0.7); } 70% { box-shadow: 0 0 10px 20px rgba(255, 255, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 0, 0); } }

/* Validation Styles */
#error-message { color: var(--danger-color); text-shadow: 0 0 3px var(--danger-color); margin-top: 10px; height: 1em; transition: opacity 0.3s; }
.invalid-input { border-color: var(--danger-color) !important; animation: shake 0.5s; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-8px); } 20%, 40%, 60%, 80% { transform: translateX(8px); } }

/* Utility Class */
.hidden { display: none; }