/**
 * EPIC TECH AI // NEURAL VAULT V12.0
 * FULL CINEMATIC STACKING & VISIBILITY
 */

/* High-end typography for the tech-lounge and funk aesthetics */
@import url('https://fonts.googleapis.com/css2?family=Syncopate:wght@700&family=JetBrains+Mono:wght@400&family=Bungee&display=swap');

:root {
    --purple-core: #1a0033;
    --neon-pink: #ff00ff;
    --neon-blue: #00f2ff;
    --funk-gold: #ffcc00;
    --glass: rgba(0, 0, 0, 0.85);
}

* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    user-select: none;
}

body {
    background-color: #000;
    color: #fff;
    font-family: 'Syncopate', sans-serif;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
}

/* --- THE ENTRY GATE --- */
#gatekeeper {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: radial-gradient(circle at center, var(--purple-core) 0%, #000 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.glow-ring {
    position: absolute;
    width: 250px;
    height: 250px;
    border: 2px solid var(--neon-blue);
    border-radius: 50%;
    box-shadow: 0 0 50px var(--neon-blue);
    animation: pulse-ring 1.5s infinite alternate;
}

#gatekeeper h1 {
    font-size: 2rem;
    letter-spacing: 12px;
    text-shadow: 0 0 10px var(--neon-blue);
    margin-bottom: 20px;
    z-index: 2001;
}

#gatekeeper p {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    color: var(--neon-pink);
    z-index: 2001;
    letter-spacing: 4px;
}

/* --- THE VISUALIZER --- */
#visualizer-canvas {
    position: fixed;
    inset: 0;
    z-index: 10;
}

/* --- THE LYRIC STAGE --- */
#lyric-stage {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100; /* Keeps text above the particles */
    pointer-events: none;
    text-align: center;
    padding: 0 10%;
}

#lyric-text {
    font-size: clamp(1.2rem, 5vw, 3.5rem);
    text-transform: uppercase;
    max-width: 1000px;
    line-height: 1.2;
    transition: opacity 0.3s ease;
}

/* Track 1 Aesthetic (Nebula) */
.lyric-neon {
    color: #fff;
    text-shadow: 0 0 15px var(--neon-pink), 0 0 30px var(--neon-pink);
}

/* Track 2 & 3 Aesthetic (Funk/Warp) */
.lyric-funk {
    font-family: 'Bungee', cursive;
    color: var(--funk-gold);
    text-shadow: 4px 4px 0px #800000, 0 0 25px var(--funk-gold);
    letter-spacing: -1px;
}

/* --- PLAYBACK CONTROLS --- */
#playback-overlay {
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 800px;
    z-index: 500;
    background: var(--glass);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px 30px;
    border-radius: 100px;
}

.control-row {
    display: flex;
    align-items: center;
    gap: 20px;
}

.ctrl-btn {
    background: none;
    border: 1px solid var(--neon-blue);
    color: var(--neon-blue);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    padding: 10px 22px;
    border-radius: 50px;
    cursor: pointer;
    transition: 0.3s;
    white-space: nowrap;
}

.ctrl-btn:hover {
    background: var(--neon-blue);
    color: #000;
    box-shadow: 0 0 20px var(--neon-blue);
}

#progress-wrapper {
    flex-grow: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

#progress-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--neon-pink), var(--neon-blue), var(--funk-gold));
    box-shadow: 0 0 10px var(--neon-blue);
}

/* --- ATMOSPHERIC FX --- */
.vignette {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle, transparent 30%, rgba(0,0,0,0.9) 100%);
    z-index: 150; /* Above lyrics to create depth */
    pointer-events: none;
}

.scanlines {
    position: fixed;
    inset: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%);
    background-size: 100% 4px;
    z-index: 151; /* Top layer for the retro-CRT feel */
    pointer-events: none;
    opacity: 0.3;
}

/* --- KEYFRAMES --- */
@keyframes pulse-ring {
    from { transform: scale(0.95); opacity: 0.4; }
    to { transform: scale(1.05); opacity: 0.9; }
}

/* Responsive adjustments for mobile */
@media (max-width: 600px) {
    #lyric-text { font-size: 1.5rem; }
    .ctrl-btn { padding: 8px 12px; font-size: 0.6rem; }
    #playback-overlay { bottom: 20px; padding: 10px 15px; }
}