*{box-sizing:border-box}

body{
    margin:0;
    font-family:'Orbitron',sans-serif;
    color:white;
    height:100vh;
    overflow:hidden;
    background:#03060b;
}

/* ================= SCENE BACKDROP ================= */

.scene{
    position:fixed;
    inset:0;
    background:url("assets/bg.png") center 20% / cover no-repeat;
    z-index:-5;
    filter: brightness(.40) contrast(1.05) saturate(.85);
    transform:scale(1.05);
    animation:parallax 80s ease-in-out infinite alternate;
}

@keyframes parallax{
    from{ transform:scale(1.05) translateY(-20px); }
    to{ transform:scale(1.1) translateY(25px); }
}

.vignette{
    position:fixed;
    inset:0;
    z-index:-4;
    background:
        radial-gradient(circle at center, rgba(0,0,0,.15) 0%, rgba(0,0,0,.65) 70%),
        linear-gradient(to bottom, rgba(3,8,18,.35), rgba(0,0,0,.92));
}

.grain{
    position:fixed;
    inset:0;
    z-index:-3;
    opacity:.05;
    background-image:url("https://grainy-gradients.vercel.app/noise.svg");
    mix-blend-mode:overlay;
    pointer-events:none;
}

/* ================= LAYOUT ================= */

.container{
    position:relative;
    z-index:10;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
}

/* LIVE indicator */

.live{
    font-size:13px;
    letter-spacing:4px;
    opacity:.75;
    color:#8fb3ff;
}

.dot{
    height:8px;
    width:8px;
    background:#ff3b3b;
    display:inline-block;
    border-radius:50%;
    margin-right:8px;
    animation:pulse 1.4s infinite;
}

@keyframes pulse{
    0%{box-shadow:0 0 0 0 rgba(255,50,50,.7);}
    70%{box-shadow:0 0 0 10px rgba(255,50,50,0);}
    100%{box-shadow:0 0 0 0 rgba(255,50,50,0);}
}

/* TITLE */

.title{
    font-size:68px;
    letter-spacing:14px;
    margin:18px 0 35px;
    color:#dce6ff;
    text-shadow:
        0 0 35px rgba(140,180,255,.18),
        0 0 6px rgba(255,255,255,.08);
}

/* ================= COUNTDOWN ================= */

.countdown{
    display:flex;
    align-items:center;
    gap:22px;
}

/* GLASS PANELS */

.box{
    width:170px;
    height:170px;
    background:rgba(10,18,30,.45);
    border-radius:20px;
    backdrop-filter: blur(14px);
    border:1px solid rgba(120,160,255,.12);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    box-shadow:
        inset 0 0 40px rgba(120,170,255,.05),
        0 0 35px rgba(0,0,0,.7);
    transition:.25s;
}

.box:hover{
    transform:translateY(-5px);
    box-shadow:
        inset 0 0 50px rgba(150,190,255,.12),
        0 0 50px rgba(120,170,255,.18);
}


.box span{
    font-size:72px;
    font-weight:700;
    color:#eaf2ff;
    text-shadow:0 0 18px rgba(140,190,255,.35);

    transition: transform .25s ease, opacity .25s ease;
}

.box p{
    font-size:11px;
    opacity:.6;
    letter-spacing:5px;
    color:#9fb6d9;
}

.colon{
    font-size:60px;
    opacity:.25;
}

.classified{
    margin-top:40px;
    font-size:11px;
    opacity:.35;
    letter-spacing:6px;
    color:#7f93b5;
}

/* ================= SOCIAL BAR ================= */

.socials{
    position:fixed;
    bottom:32px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:26px;
    z-index:20;
}

.social{
    width:46px;
    height:46px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:12px;
    text-decoration:none;
    color:rgba(200,220,255,0.35);
    background:rgba(20,35,60,.35);
    backdrop-filter:blur(8px);
    border:1px solid rgba(140,170,255,.1);
    transition:all .25s ease;
    font-size:19px;
}

.social:hover{
    color:#eaf2ff;
    transform:translateY(-4px);
    box-shadow:0 0 25px rgba(120,170,255,.25);
}

.twitch:hover{ box-shadow:0 0 25px rgba(145,70,255,.45); }
.tiktok:hover{ box-shadow:0 0 25px rgba(255,0,80,.35); }
.discord:hover{ box-shadow:0 0 25px rgba(88,101,242,.45); }

/* ================= UNLOCK PAGE ================= */

.unlock{
    position:absolute;
    inset:0;
    background:black;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    opacity:0;
    pointer-events:none;
    transition:1.2s;
}

.unlock.show{
    opacity:1;
    pointer-events:auto;
}

.unlock h1{
    font-size:78px;
    letter-spacing:10px;
}

.sound{
    cursor:pointer;
}

.sound.active{
    color:#eaf2ff;
    box-shadow:0 0 25px rgba(120,170,255,.35);
}