/* =========================
   RESET
========================= */

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

html{
    scroll-behavior:smooth;
}

body{
    background:#050505;
    color:#f5f5f5;
    font-family:'Inter', sans-serif;
    overflow-x:hidden;
}

/* =========================
   CORES
========================= */

:root{
    --gold:#d4af37;
    --pink:#e7b8c9;
    --blue:#1c2541;
    --dark:#050505;
    --card:#101010;
    --purple:#5f09eb;
}

/* =========================
   ESTRELAS
========================= */

#stars{
    position:fixed;
    inset:0;
    z-index:-1;

    background-image:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.8) 1px, transparent 1px),
        radial-gradient(circle at 70% 40%, rgba(255,255,255,.5) 1px, transparent 1px),
        radial-gradient(circle at 90% 70%, rgba(255,255,255,.8) 1px, transparent 1px),
        radial-gradient(circle at 40% 80%, rgba(255,255,255,.6) 1px, transparent 1px);

    background-size:300px 300px;

    animation:starsMove 40s linear infinite;
}

@keyframes starsMove{
    from{
        transform:translateY(0);
    }

    to{
        transform:translateY(-300px);
    }
}

/* =========================
   LOADING
========================= */

#loading-screen{
    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    text-align:center;
    padding:40px;
}

.terminal{
    max-width:700px;
}

.terminal p{
    margin:12px 0;
    opacity:.8;
}

.terminal h1{
    margin-top:20px;

    font-family:'Cinzel', serif;
    font-size:4rem;
    color:var(--gold);
}

#start-btn{
    margin-top:30px;

    background:transparent;
    color:var(--gold);

    border:1px solid var(--gold);

    padding:14px 28px;

    cursor:pointer;

    transition:.3s;
}

#start-btn:hover{
    background:var(--gold);
    color:black;
}

/* =========================
   HERO
========================= */

#hero{
    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    text-align:center;
    padding:40px;
}

.hero-content h1{
    font-family:'Cinzel', serif;
    font-size:clamp(3rem,8vw,7rem);

    color:var(--gold);
}

.hero-content h2{
    margin-top:20px;
    color:var(--pink);
    font-weight:400;
}

.hero-content p{
    margin-top:15px;
    opacity:.8;
}

.btn{
    display:inline-block;

    margin-top:35px;

    padding:14px 30px;

    border:1px solid var(--gold);

    text-decoration:none;
    color:var(--gold);

    transition:.3s;
}

.btn:hover{
    background:var(--gold);
    color:black;
}

/* =========================
   CAPÍTULOS
========================= */

.chapter{
    max-width:1000px;

    margin:auto;

    padding:140px 30px;
}

.chapter h2{
    font-family:'Cinzel', serif;

    color:var(--gold);

    margin-bottom:30px;

    font-size:clamp(2rem,4vw,3rem);
}

.chapter p{
    line-height:1.8;
    font-size:1.1rem;
}

/* =========================
   TIMELINE
========================= */

.timeline{
    margin-top:50px;

    display:flex;
    flex-direction:column;
    gap:20px;
}

.event{
    background:var(--card);

    padding:20px;

    border-left:4px solid var(--gold);

    transition:.3s;
}

.event:hover{
    transform:translateX(10px);
}

/* =========================
   SILÊNCIO
========================= */

.silence{
    text-align:center;
}

.silence p{
    margin:100px 0;
    opacity:.5;
}

/* =========================
   MOMENTO PRINCIPAL
========================= */

#moment{
    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    text-align:center;

    padding:40px;
}
.moment-content h2{
    margin-top:80px;

    font-size:clamp(3rem,8vw,7rem);

    color:var(--pink);

    font-family:'Cinzel', serif;
}
.moment-content{
    max-width:900px;
}

.moment-content p{
    margin:20px 0;
    font-size:1.3rem;
}





/*=========
   20 ANOS
========================= */

.birthday{
    text-align:center;
}

.birthday h1{
    font-size:clamp(4rem,10vw,8rem);

    color:var(--gold);

    margin-bottom:30px;

    font-family:'Cinzel', serif;
}

/* =========================
   CARTA
========================= */

#letter{
    max-width:1000px;

    margin:auto;

    padding:140px 30px;
}

#letter h2{
    color:var(--gold);

    font-family:'Cinzel', serif;

    margin-bottom:40px;
}

.letter-content{
    background:#0d0d0d;

    border:1px solid #222;

    border-radius:20px;

    padding:50px;

    line-height:2;
}

/* =========================
   FINAL
========================= */

#ending{
    min-height:100vh;

    display:flex;

    flex-direction:column;

    justify-content:center;
    align-items:center;

    text-align:center;

    padding:40px;
}

#ending h1{
    max-width:900px;

    margin:30px 0;

    font-size:clamp(2rem,5vw,4rem);

    font-family:'Cinzel', serif;
}

#ending h2{
    margin-top:50px;

    color:var(--gold);
}

#ending p{
    opacity:.7;
}

/* =========================
   RESPONSIVO
========================= */

@media(max-width:768px){

    .terminal h1{
        font-size:2.5rem;
    }

    .moment-content h1{
        font-size:3rem;
    }

    .chapter{
        padding:100px 20px;
    }

    .letter-content{
        padding:25px;
    }
}

/* ==========================
   MODAL
========================== */

#modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.85);

    display:flex;

    justify-content:center;
    align-items:center;

    padding:20px;

    z-index:999;

    opacity:0;

    pointer-events:none;

    transition:.4s;
}

#modal.active{

    opacity:1;

    pointer-events:auto;
}

.modal-content{

    width:100%;
    max-width:800px;

    background:#0d0d0d;

    border:1px solid #333;

    border-radius:20px;

    padding:40px;

    position:relative;

    max-height:80vh;

    overflow-y:auto;
}

.modal-content h2{

    color:var(--gold);

    margin-bottom:25px;

    font-family:'Cinzel', serif;
}

.modal-content p{

    line-height:2;
}

#close-modal{

    position:absolute;

    right:20px;
    top:20px;

    background:none;

    border:none;

    color:white;

    font-size:1.5rem;

    cursor:pointer;
}

/* ==========================
   FOTO MODAL
========================== */

#photo-modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.95);

    display:flex;

    flex-direction:column;

    justify-content:center;
    align-items:center;

    z-index:1000;

    opacity:0;

    pointer-events:none;

    transition:.4s;
}

#photo-modal.active{

    opacity:1;

    pointer-events:auto;
}

#modal-image{

    max-width:90%;
    max-height:70vh;

    border-radius:15px;
}

#modal-caption{

    margin-top:20px;

    max-width:700px;

    text-align:center;
}

#close-photo{

    position:absolute;

    top:30px;
    right:40px;

    font-size:2rem;

    cursor:pointer;
}

/* ==========================
   LUA
========================== */

/* ==========================
   LUA REALISTA
========================== */

/* ==========================
   LUA
========================== */

#moon-container{
    position:fixed;
    top:30px;
    right:30px;

    z-index:999;

    pointer-events:none;
}


/* LUA */

#moon{
    width:88px;
    height:88px;

    border-radius:50%;

    position:relative;

    overflow:hidden;

    background:

        /* crateras pequenas */
        radial-gradient(
            circle at 66% 68%,
            rgba(90,90,90,.24) 0 5%,
            transparent 6%
        ),

        radial-gradient(
            circle at 30% 34%,
            rgba(100,100,100,.18) 0 7%,
            transparent 8%
        ),

        radial-gradient(
            circle at 63% 27%,
            rgba(80,80,80,.15) 0 4%,
            transparent 5%
        ),

        radial-gradient(
            circle at 42% 70%,
            rgba(110,110,110,.16) 0 8%,
            transparent 9%
        ),

        radial-gradient(
            circle at 77% 46%,
            rgba(100,100,100,.13) 0 6%,
            transparent 7%
        ),

        /* manchas maiores da superfície */
        radial-gradient(
            ellipse at 40% 43%,
            rgba(120,120,120,.18) 0 18%,
            transparent 28%
        ),

        radial-gradient(
            ellipse at 66% 58%,
            rgba(115,115,115,.14) 0 16%,
            transparent 27%
        ),

        /* iluminação principal */
        radial-gradient(
            circle at 32% 28%,
            #ffffff 0%,
            #f2f2ee 35%,
            #d2d2cd 68%,
            #a7a7a3 100%
        );

    box-shadow:
        inset -10px -12px 18px rgba(0,0,0,.22),
        inset 6px 5px 10px rgba(255,255,255,.18),

        0 0 10px rgba(255,255,255,.30),
        0 0 25px rgba(220,225,255,.20),
        0 0 55px rgba(190,200,255,.10);
}
#moon-shadow{
    position:absolute;
    inset:-2px;

    border-radius:50%;

    background:
        radial-gradient(
            circle at 70% 50%,
            rgba(5,5,8,.94),
            rgba(5,5,8,.99) 70%
        );

    transform:translateX(0%);

    z-index:5;

    box-shadow:
        -5px 0 8px rgba(0,0,0,.20);
}

#moon::before{
    content:"";

    position:absolute;
    inset:0;

    border-radius:50%;

    background:

        radial-gradient(
            circle at 25% 63%,
            rgba(70,70,70,.12) 0 4%,
            transparent 5%
        ),

        radial-gradient(
            circle at 54% 39%,
            rgba(60,60,60,.10) 0 3%,
            transparent 4%
        ),

        radial-gradient(
            circle at 73% 75%,
            rgba(70,70,70,.12) 0 4%,
            transparent 5%
        ),

        radial-gradient(
            ellipse at 47% 58%,
            rgba(255,255,255,.08) 0 10%,
            transparent 18%
        );

    opacity:.9;

    pointer-events:none;
}

/* ==========================
   EVIDÊNCIAS
========================== */

.evidence-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:20px;
    margin-top:40px;
}

.evidence{
    background:#101010;
    border:1px solid #2a2a2a;
    padding:25px;
    border-radius:15px;
    cursor:pointer;
    transition:.3s;
}

.evidence:hover{
    transform:translateY(-8px);
    border-color:var(--gold);
    box-shadow:0 0 20px rgba(212,175,55,.15);
}

.evidence h3{
    color:var(--gold);
    margin-bottom:10px;
    font-family:'Cinzel', serif;
}

.evidence p{
    opacity:.8;
}

#evidence-modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.9);
    display:flex;
    justify-content:center;
    align-items:center;
    opacity:0;
    pointer-events:none;
    transition:.3s;
}

#evidence-modal.active{
    opacity:1;
    pointer-events:auto;
}

.modal-box{
    background:#0d0d0d;
    padding:40px;
    max-width:700px;
    border-radius:15px;
    border:1px solid #333;
}

#evidence-title{
    color:var(--gold);
    margin-bottom:20px;
    font-family:'Cinzel', serif;
}

#close-evidence{
    position:absolute;
    top:20px;
    right:20px;
    cursor:pointer;
    font-size:1.5rem;
}

#typed-text{
    font-size:1.1rem;
    line-height:2;
    white-space:pre-wrap;
}

#photo-modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.95);
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    opacity:0;
    pointer-events:none;
    transition:.4s;
    z-index:1000;
}

#photo-modal.active{
    opacity:1;
    pointer-events:auto;
}

.photo-wrapper{
    text-align:center;
    max-width:90%;
}

#modal-image{
    max-width:85vw;
    max-height:75vh;
    border-radius:12px;
    transform:scale(.9);
    transition:.4s;
    box-shadow:0 0 40px rgba(0,0,0,.6);
}

#photo-modal.active #modal-image{
    transform:scale(1);
}

#modal-caption{
    margin-top:15px;
    color:#ccc;
    font-size:1rem;
    opacity:0;
    transform:translateY(10px);
    transition:.4s;
}

#photo-modal.active #modal-caption{
    opacity:1;
    transform:translateY(0);
}

#close-photo{
    position:absolute;
    top:25px;
    right:30px;
    font-size:2rem;
    cursor:pointer;
    color:white;
}

.gallery-card img{

    width:100%;

    height:340px;

    object-fit:cover;

    display:block;

}
.gallery-card img{

    width:100%;

    height:360px;

    object-fit:cover;

    filter:brightness(.85);

    transition:.4s;
}

.gallery-card:hover img{

    filter:brightness(1);

    transform:scale(1.03);

}

/* ==========================
   GALERIA
========================== */

.gallery{

    padding:120px 8%;

}

.gallery h2{

    text-align:center;

    font-family:'Cinzel', serif;

    font-size:2.5rem;

    color:var(--gold);

    margin-bottom:15px;

}

.gallery-subtitle{

    max-width:700px;

    margin:0 auto 60px;

    text-align:center;

    color:#b8b8b8;

    line-height:1.8;

}

.gallery-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:35px;

}

.gallery-card{

    background:#131313;

    border:1px solid rgba(212,175,55,.15);

    border-radius:18px;

    overflow:hidden;

    transition:.35s;

    box-shadow:0 10px 30px rgba(0,0,0,.35);

}

.gallery-card:hover{

    transform:translateY(-10px);

    border-color:var(--gold);

    box-shadow:0 15px 40px rgba(212,175,55,.18);

}

.gallery-card img{

    width:100%;

    height:340px;

    object-fit:cover;

    display:block;

    filter:brightness(.85);

    transition:.4s;

}

.gallery-card:hover img{

    filter:brightness(1);

    transform:scale(1.04);

}

.gallery-info{

    padding:25px;

}

.registro{

    display:inline-block;

    font-size:.75rem;

    letter-spacing:2px;

    color:var(--gold);

    margin-bottom:12px;

}

.gallery-info h3{

    font-family:'Cinzel', serif;

    color:#fff;

    margin-bottom:15px;

}

.line{

    width:70px;

    height:2px;

    background:var(--gold);

    margin-bottom:18px;

}

.gallery-info p{

    color:#c7c7c7;

    line-height:1.8;

}

.future-note{

    margin-top:15px;

    color:var(--gold);

    font-style:italic;

}

.gallery-footer{

    margin-top:70px;

    text-align:center;

    color:#9b9b9b;

    font-style:italic;

    letter-spacing:1px;

}

.secret-file{

    width:min(600px,90%);
    margin:100px auto;

    opacity:0;
    transform:translateY(40px);

    pointer-events:none;

    transition:.8s ease;

}

.secret-file.show{

    opacity:1;

    transform:translateY(0);

    pointer-events:auto;

}
/*=========================
ARQUIVO FINAL
=========================*/

.secret-file{

    width:min(600px,90%);

    margin:100px auto;

    cursor:pointer;

    transition:.4s;

}

.secret-file:hover{

    transform:translateY(-8px) scale(1.02);

}

.file-top{

    background:#c79b3b;

    color:#111;

    padding:18px 30px;

    border-radius:12px 12px 0 0;

    font-weight:bold;

    letter-spacing:3px;

    font-family:'Cinzel',serif;

}

.file-body{

    background:#171717;

    border:2px solid #c79b3b;

    border-top:none;

    padding:40px;

    border-radius:0 0 12px 12px;

}

.classified{

    color:#c79b3b;

    letter-spacing:3px;

    font-size:.8rem;

}

.file-body h3{

    margin-top:15px;

    margin-bottom:20px;

    color:white;

    font-size:2rem;

}

.file-body p{

    color:#bfbfbf;

    line-height:1.8;

}

.file-body button{

    margin-top:35px;

    width:100%;

    padding:18px;

    background:#c79b3b;

    border:none;

    color:#111;

    font-weight:bold;

    letter-spacing:2px;

    cursor:pointer;

    border-radius:8px;

    transition:.3s;

}

.file-body button:hover{

    transform:scale(1.03);

}
#final-scene{

    position:fixed;
    inset:0;

    background:#050505;

    z-index:99999;

    display:flex;
    justify-content:center;
    align-items:center;

    opacity:0;
    visibility:hidden;

    transition:1.2s;

    overflow:hidden;

}

#final-scene.active{

    opacity:1;
    visibility:visible;

}

/*=========================
GALERIA FLUTUANTE
=========================*/

#floating-gallery{

    position:absolute;
    inset:0;

    overflow:hidden;

    pointer-events:none;

}

.floating-photo{

    position:absolute;

    width:220px;

    border-radius:18px;

    object-fit:cover;

    opacity:.18;

    box-shadow:0 15px 40px rgba(0,0,0,.5);

    animation:floatPhoto linear infinite;

    transition:.5s;

}

@keyframes floatPhoto{

    0%{

        transform:
            translateY(110vh)
            rotate(var(--rotate))
            scale(.95);

    }

    50%{

        transform:
            translateY(20vh)
            rotate(calc(var(--rotate) + 4deg))
            scale(1);

    }

    100%{

        transform:
            translateY(-130vh)
            rotate(var(--rotate))
            scale(.95);

    }

}

/*=========================
FOTO EM DESTAQUE
=========================*/

#photo-highlight{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    opacity:0;

    transition:1s;

    pointer-events:none;

    z-index:30;

}

#photo-highlight.active{

    opacity:1;

}

#highlight-image{

    width:auto;
    height:auto;

    max-width:min(380px, 80vw);
    max-height:50vh;

    object-fit:contain;

    border-radius:20px;

    border:4px solid var(--gold);

    box-shadow:
        0 0 60px rgba(255,215,0,.35);

    background:#111;

    transition:
        transform .8s ease,
        opacity .8s ease,
        box-shadow .8s ease;
}

#highlight-caption{

    margin-top:25px;

    text-align:center;

    max-width:700px;

}

#highlight-number{

    color:var(--gold);

    letter-spacing:3px;

}

#highlight-title{

    margin-top:10px;

    color:white;

    font-size:2rem;

}

#highlight-text{

    margin-top:15px;

    color:#ddd;

    line-height:1.8;

}

#opening-message{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    z-index:50;

    animation:introFade 8s forwards;

}

.opening-small{

    color:var(--gold);

    letter-spacing:6px;

    font-size:.8rem;

    margin-bottom:25px;

    opacity:.8;

}

#opening-message h1{

    font-family:'Cinzel',serif;

    font-size:clamp(2.5rem,6vw,5rem);

    color:white;

    text-align:center;

}

#opening-message p{

    margin-top:25px;

    color:#ddd;

    font-size:clamp(1rem,2vw,1.5rem);

    text-align:center;

    line-height:1.8;

    max-width:700px;

}

@keyframes introFade{

    0%{

        opacity:0;
        transform:scale(.96);

    }

    15%{

        opacity:1;
        transform:scale(1);

    }

    80%{

        opacity:1;

    }

    100%{

        opacity:0;
        visibility:hidden;

    }

}

@media(max-width:768px){

    #highlight-image{

        width:82vw;

        max-height:55vh;

    }

    #highlight-title{

        font-size:1.7rem;

    }

    #highlight-text{

        font-size:1rem;

        padding:0 20px;

    }

}

/* ==========================
   CONSTELAÇÃO FINAL
========================== */

#constellation{
    position:absolute;
    inset:0;

    z-index:40;

    opacity:0;
    visibility:hidden;

    transition:1.5s ease;

    pointer-events:none;
}

#constellation.active{
    opacity:1;
    visibility:visible;
}

#constellation-canvas{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;
}

#constellation-message{
    position:absolute;

    left:50%;
    bottom:8%;

    transform:translateX(-50%) translateY(20px);

    text-align:center;

    opacity:0;

    transition:1.5s ease;

    width:90%;
}

#constellation-message.show{
    opacity:1;
    transform:translateX(-50%) translateY(0);
}

#constellation-message span{
    color:var(--purple);

    letter-spacing:5px;

    font-size:.75rem;
}

#constellation-message h1{
    margin-top:12px;

    font-family:'Cinzel', serif;

    font-size:clamp(2.5rem,6vw,5rem);

    color:white;

    text-shadow:
        0 0 15px var(--purple),
        0 0 35px var(--purple);
}

#constellation-message p{
    margin-top:10px;

    color:#ddd;

    font-size:clamp(1rem,2vw,1.3rem);
}

#final-intro{
    position:absolute;
    inset:0;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    text-align:center;

    z-index:25;

    opacity:1;

    transition:
        opacity 1.5s ease,
        transform 1.5s ease;
}

#final-intro.hide{
    opacity:0;
    transform:translateY(-20px);
    pointer-events:none;
}

#final-intro h2{
    font-family:'Cinzel', serif;
    color:white;

    font-size:clamp(2rem,5vw,4rem);
}

#final-intro p{
    margin-top:20px;

    color:#ddd;
    line-height:1.8;

    font-size:clamp(1rem,2vw,1.3rem);
}

#access-screen{
    position:fixed;
    inset:0;

    display:flex;
    justify-content:center;
    align-items:center;

    background:#050505;

    z-index:999999;

    transition:
        opacity .8s ease,
        visibility .8s ease;
}

#access-screen.unlocked{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

.access-box{
    width:min(500px,90%);
    padding:45px 35px;

    background:#101010;

    border:1px solid var(--gold);

    border-radius:18px;

    text-align:center;

    box-shadow:
        0 0 50px rgba(212,175,55,.12);
}

.access-label{
    color:var(--gold);

    font-size:.75rem;

    letter-spacing:5px;
}

.access-box h1{
    margin-top:15px;

    font-family:'Cinzel',serif;

    font-size:clamp(2rem,5vw,3.2rem);

    color:white;
}

.access-box p{
    margin-top:15px;

    color:#aaa;
}

#access-password{
    width:100%;

    margin-top:30px;

    padding:16px 18px;

    border-radius:10px;

    border:1px solid #333;

    background:#080808;

    color:white;

    outline:none;

    text-align:center;

    font-size:1rem;

    letter-spacing:3px;
}

#access-password:focus{
    border-color:var(--gold);

    box-shadow:
        0 0 20px rgba(212,175,55,.15);
}

#access-button{
    width:100%;

    margin-top:18px;

    padding:16px;

    border:none;

    border-radius:10px;

    background:var(--gold);

    color:#111;

    font-weight:bold;

    letter-spacing:2px;

    cursor:pointer;
}

#access-error{
    min-height:24px;

    margin-top:15px;

    color:#d47b7b;

    font-size:.9rem;
}

/* ==========================
   SEPARADOR - EVIDÊNCIA CRÍTICA
========================== */

.moment-separator{
    position:relative;

    width:min(320px, 70%);
    height:1px;

    margin:55px auto;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(170,120,255,.25),
        var(--purple),
        rgba(170,120,255,.25),
        transparent
    );
}

.moment-separator::before{
    content:"";

    position:absolute;

    left:50%;
    top:50%;

    width:7px;
    height:7px;

    border-radius:50%;

    background:#fff;

    transform:translate(-50%,-50%);

    box-shadow:
        0 0 8px #fff,
        0 0 18px var(--purple),
        0 0 35px var(--purple);
}

.message-line{
    max-width:600px;

    margin:40px auto;

    padding:22px 28px;

    border-left:2px solid var(--purple);

    background:rgba(170,120,255,.05);

    color:#ddd;

    font-style:italic;

    font-size:1.1rem;

    line-height:1.8;
}

.critical-message{
    margin:50px auto !important;

    font-family:'Cinzel', serif;

    font-size:clamp(2.5rem,7vw,5.5rem) !important;

    color:white;

    text-align:center;

    text-shadow:
        0 0 10px rgba(255,255,255,.4),
        0 0 25px var(--purple),
        0 0 60px var(--purple);
}

.critical-conclusion{
    margin-top:50px;

    color:var(--gold);

    font-family:'Cinzel', serif;

    letter-spacing:1px;

    text-align:center;
}

#story-notification{
    position:fixed;

    top:22px;
    left:50%;

    transform:
        translateX(-50%)
        translateY(-140px);

    width:min(520px, 92vw);

    padding:16px 18px;

    display:flex;
    align-items:center;
    gap:14px;

    background:rgba(16,16,16,.94);

    border:1px solid rgba(170,120,255,.35);

    border-radius:18px;

    backdrop-filter:blur(18px);

    box-shadow:
        0 15px 45px rgba(0,0,0,.5),
        0 0 30px rgba(170,120,255,.10);

    z-index:999999;

    opacity:0;

    transition:
        transform .8s cubic-bezier(.2,.8,.2,1),
        opacity .8s ease;
}

#story-notification.show{
    transform:
        translateX(-50%)
        translateY(0);

    opacity:1;
}

.notification-icon{
    width:46px;
    height:46px;

    flex-shrink:0;

    display:flex;
    justify-content:center;
    align-items:center;

    border-radius:13px;

    background:rgba(170,120,255,.12);

    font-size:1.3rem;
}

.notification-content{
    flex:1;
}

.notification-app{
    display:block;

    margin-bottom:3px;

    color:var(--purple);

    font-size:.65rem;

    letter-spacing:2px;
}

#notification-title{
    display:block;

    color:white;

    font-size:.95rem;
}

#notification-text{
    margin-top:4px;

    color:#d5d5d5;

    font-size:.92rem;

    line-height:1.45;

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

#notification-text.change{
    opacity:0;
    transform:translateY(5px);
}

#received-message{
    max-width:650px;

    margin:50px auto;

    padding:30px;

    text-align:center;

    opacity:0;

    transform:translateY(25px);

    transition:
        opacity 1.2s ease,
        transform 1.2s ease;

    border:1px solid rgba(170,120,255,.18);

    border-radius:18px;

    background:rgba(170,120,255,.04);
}

#received-message.show{
    opacity:1;
    transform:translateY(0);
}

#received-message span{
    display:block;

    margin-bottom:20px;

    color:var(--purple);

    font-size:.7rem;

    letter-spacing:4px;
}

#received-message p{
    color:#ccc;

    font-style:italic;

    line-height:1.8;
}

#received-message h2{
    margin-top:25px;

    font-family:'Cinzel',serif;

    font-size:clamp(2rem,5vw,4rem);

    color:white;

    text-shadow:
        0 0 15px var(--purple),
        0 0 40px var(--purple);
}

.chapter-label{
    display:block;

    margin-bottom:18px;

    color:var(--purple);

    font-size:.7rem;

    letter-spacing:4px;

    text-transform:uppercase;
}

.field-conclusion{
    margin-top:45px !important;

    font-family:'Cinzel', serif;

    font-size:clamp(1.4rem,3vw,2rem) !important;

    color:white;

    text-align:center;

    text-shadow:
        0 0 18px var(--purple);
}

.shift-question{
    max-width:750px;

    margin:55px auto !important;

    text-align:center;

    font-family:'Cinzel', serif;

    font-size:clamp(1.5rem,3vw,2.4rem) !important;

    line-height:1.6 !important;

    color:white;

    text-shadow:
        0 0 20px var(--purple);
}

.shift-conclusion{
    margin-top:55px !important;

    color:var(--gold);

    text-align:center;

    line-height:1.8 !important;
}

/* =========================
   PRÓLOGO
========================= */

#prank-intro{
    position:fixed;
    inset:0;

    width:100%;
    height:100vh;

    background:#050505;

    z-index:10000;

    overflow:hidden;
}


/* TELA INICIAL */

#prank-start{
    position:absolute;
    inset:0;

    display:flex;
    flex-direction:column;

    justify-content:center;
    align-items:center;

    text-align:center;

    padding:30px;

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

.prank-small{
    font-size:.75rem;
    letter-spacing:5px;

    opacity:.5;

    margin-bottom:20px;
}

#prank-start h1{
    font-family:'Cinzel', serif;

    font-size:
        clamp(2.5rem,7vw,5rem);

    color:var(--purple);
}

#prank-start p{
    margin-top:20px;

    opacity:.75;
}

#play-prank{
    margin-top:35px;

    padding:14px 30px;

    background:transparent;

    border:1px solid var(--purple);

    color:white;

    cursor:pointer;

    transition:.3s;
}

#play-prank:hover{
    background:var(--purple);
}


/* VÍDEO */

#prank-video-container{
    position:absolute;
    inset:0;

    display:flex;

    justify-content:center;
    align-items:center;

    background:black;

    opacity:0;
    pointer-events:none;

    transition:opacity 1s ease;
}

#prank-video-container.active{
    opacity:1;
    pointer-events:auto;
}

#prank-video{
    width:100%;
    height:100%;

    object-fit:contain;

    background:black;
}


/* ÁUDIO */

#paiaço-message{
    position:absolute;
    inset:0;

    display:flex;

    justify-content:center;
    align-items:center;

    background:#050505;

    opacity:0;
    pointer-events:none;

    transition:opacity 1.5s ease;
}

#paiaço-message.active{
    opacity:1;
}

#paiaço-wait{
    font-family:'Cinzel', serif;

    font-size:
        clamp(1.5rem,4vw,3rem);

    opacity:.8;
}



/* BOOT */

#system-boot{
    position:absolute;
    inset:0;

    display:flex;

    justify-content:center;
    align-items:center;

    padding:30px;

    background:#050505;

    opacity:0;
    pointer-events:none;
}

#system-boot.active{
    opacity:1;
    pointer-events:auto;
}
.boot-terminal{
    width:min(700px,90vw);

    font-family:monospace;

    color:#ddd;
}

.boot-terminal p{
    margin:13px 0;
}

.boot-line,
.boot-success{
    opacity:0;
}

.boot-success{
    margin-top:35px !important;

    color:var(--gold);

    letter-spacing:3px;
}

/* ==========================
   REABERTURA DO CASO
========================== */

.case-reopened{
    position:relative;
}

.case-reopened::before{
    content:"";

    position:absolute;
    top:80px;
    left:50%;

    width:min(520px,70%);
    height:1px;

    transform:translateX(-50%);

    background:linear-gradient(
        90deg,
        transparent,
        rgba(95,9,235,.45),
        transparent
    );

    opacity:.7;
}


/* destaque do status */

.case-status{
    margin-top:55px !important;

    text-align:center;

    font-family:'Cinzel', serif;

    color:var(--purple);

    letter-spacing:2px;

    font-size:clamp(1.2rem,2.5vw,1.7rem) !important;

    text-shadow:
        0 0 12px rgba(95,9,235,.45),
        0 0 28px rgba(95,9,235,.20);
}

.case-date{
    margin-bottom:35px;

    font-family:'Cinzel', serif;
    font-size:.8rem;

    letter-spacing:3px;

    color:var(--purple);
    opacity:.75;
}

#experience-pause{
    position:fixed;

    right:25px;
    bottom:25px;

    z-index:99999;

    display:flex;
    align-items:center;
    gap:9px;

    padding:11px 16px;

    border:1px solid rgba(255,255,255,.25);
    border-radius:30px;

    background:rgba(5,5,8,.70);

    backdrop-filter:blur(10px);

    color:white;

    font-family:'Inter', sans-serif;
    font-size:.75rem;

    letter-spacing:2px;

    cursor:pointer;

    opacity:.7;

    transition:.3s;
}

#experience-pause:hover{
    opacity:1;
    border-color:var(--purple);
}

#pause-icon{
    font-size:1rem;
}

@media(max-width:600px){

    #experience-pause{
        right:15px;
        bottom:15px;

        padding:10px 13px;

        font-size:.65rem;
    }

}

/* =========================================================
   ARQUIVO Ω — CASO 02
========================================================= */
#case02-record {
    position: relative;

    margin-top: 28px;
    margin-left: 18px;

    cursor: pointer;

    opacity: 0;

    transition:
        opacity .8s ease,
        color .3s ease;
}

.case02-alert {
    display: block;

    margin-bottom: 10px;

    color: #d8b735;

    font-size: 0.75em;

    letter-spacing: 2px;
}

.case02-record-label {
    display: block;

    color: inherit;
}

#case02-record.visible{
    opacity:1;
}

#case02-record:hover{
    color:var(--purple,#aa78ff);
}

/* OVERLAY */

#case02-overlay{
    position:fixed;

    inset:0;

    z-index:9999999;

    display:flex;

    justify-content:center;
    align-items:center;

    padding:25px;

    background:rgba(3,3,5,.96);

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:
        opacity .6s ease,
        visibility .6s ease;
}

#case02-overlay.active{
    opacity:1;

    visibility:visible;

    pointer-events:auto;
}


/* JANELAS */

.case02-window{
    display:none;

    width:min(620px,100%);

    max-height:90vh;

    overflow-y:auto;

    padding:
        clamp(30px,6vw,55px);

    background:
        linear-gradient(
            145deg,
            #111,
            #080808
        );

    border:1px solid
        rgba(170,120,255,.25);

    border-radius:16px;

    text-align:center;

    box-shadow:
        0 0 60px
        rgba(170,120,255,.08);
}

.case02-window.active{
    display:block;

    animation:
        case02WindowIn
        .7s ease forwards;
}

@keyframes case02WindowIn{

    from{
        opacity:0;
        transform:translateY(15px)
                  scale(.98);
    }

    to{
        opacity:1;
        transform:translateY(0)
                  scale(1);
    }

}


/* TIPOGRAFIA */

.case02-label{
    display:block;

    color:var(--purple,#aa78ff);

    font-size:.7rem;

    letter-spacing:6px;

    margin-bottom:18px;
}

.case02-window h2{
    font-family:'Cinzel',serif;

    color:#fff;

    font-size:
        clamp(1.8rem,5vw,3rem);

    letter-spacing:2px;
}

.case02-window > p{
    margin-top:18px;

    color:#aaa;

    line-height:1.8;
}

.case02-question{
    color:#ddd !important;
}

.case02-untitled{
    color:#777 !important;

    letter-spacing:4px;

    font-size:.75rem;
}


/* INPUT */

#case02-name{
    width:100%;

    margin-top:30px;

    padding:16px 18px;

    background:#050505;

    border:1px solid #292929;

    border-radius:8px;

    outline:none;

    color:#fff;

    text-align:center;

    font-size:1rem;

    letter-spacing:4px;

    text-transform:uppercase;

    transition:.3s;
}

#case02-name:focus{
    border-color:
        var(--purple,#aa78ff);

    box-shadow:
        0 0 20px
        rgba(170,120,255,.12);
}


/* BOTÃO */

#case02-confirm{
    width:100%;

    margin-top:15px;

    padding:15px;

    border:1px solid
        var(--purple,#aa78ff);

    border-radius:8px;

    background:transparent;

    color:
        var(--purple,#aa78ff);

    font-weight:600;

    letter-spacing:2px;

    cursor:pointer;

    transition:.3s;
}

#case02-confirm:hover{
    background:
        var(--purple,#aa78ff);

    color:#080808;
}

#case02-error{
    min-height:20px;

    margin-top:15px;

    color:#c66;

    font-size:.75rem;

    letter-spacing:2px;
}


/* PAINEL */

.case02-divider{
    width:100%;

    height:1px;

    margin:28px 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(170,120,255,.35),
            transparent
        );
}

.case02-information{
    display:grid;

    gap:17px;

    text-align:left;
}

.case02-information p{
    display:flex;

    justify-content:space-between;

    gap:20px;

    margin:0;

    padding-bottom:12px;

    border-bottom:
        1px solid #181818;
}

.case02-information span{
    color:#777;

    font-size:.68rem;

    letter-spacing:2px;
}

.case02-information strong{
    color:#ddd;

    text-align:right;

    font-size:.8rem;

    letter-spacing:1px;
}

.case02-active-status{
    color:
        var(--purple,#aa78ff)
        !important;
}


/* REGRA */

.case02-rule{
    padding:24px;

    border-left:
        2px solid
        var(--purple,#aa78ff);

    background:
        rgba(170,120,255,.035);

    text-align:left;
}

.case02-rule span{
    display:block;

    margin-bottom:15px;

    color:
        var(--purple,#aa78ff);

    font-size:.65rem;

    letter-spacing:3px;
}

.case02-rule p{
    margin:8px 0;

    color:#ccc;

    line-height:1.7;
}


/* FECHAR */

.case02-close{
    margin-top:30px;

    padding:12px 20px;

    border:0;

    background:transparent;

    color:#666;

    cursor:pointer;

    font-size:.7rem;

    letter-spacing:3px;

    transition:.3s;
}

.case02-close:hover{
    color:#fff;
}


@media(max-width:600px){

    .case02-information p{
        flex-direction:column;

        gap:7px;
    }

    .case02-information strong{
        text-align:left;
    }

}

/* ==========================
   CASO Ω-02 — EVIDÊNCIA 01
========================== */

.case02-action {
    display: block;
    width: 100%;

    margin-top: 20px;
    padding: 13px 16px;

    border: 1px solid rgba(255,255,255,.18);
    background: transparent;

    color: #ddd;

    font-family: inherit;
    font-size: .75rem;
    letter-spacing: 2px;

    cursor: pointer;
}

.case02-action:hover {
    border-color: #d8b735;
    color: #d8b735;
}

.case02-evidence {
    text-align: left;
}

.case02-evidence-header {
    font-size: .65rem;
    letter-spacing: 4px;
    opacity: .55;
}

.case02-evidence-number {
    margin-top: 20px;

    font-size: .7rem;
    letter-spacing: 3px;

    color: #d8b735;
}

.case02-evidence h2 {
    margin: 7px 0 15px;

    font-size: 1.2rem;
    letter-spacing: 2px;
}

.case02-divider {
    height: 1px;

    margin-bottom: 20px;

    background:
        rgba(255,255,255,.12);
}

.case02-system-text {
    margin: 5px 0;

    font-size: .67rem;
    letter-spacing: 1px;

    opacity: .55;
}

.case02-evidence-message {
    margin-top: 28px;

    line-height: 1.7;
    opacity: .85;
}

.case02-code {
    margin: 30px 0 10px;

    text-align: center;

    font-size: 1.35rem;
    letter-spacing: 8px;

    color: #d8b735;
}

.case02-hint {
    text-align: center;

    font-size: .68rem;
    letter-spacing: 1px;

    opacity: .4;
}

#case02-overlay.active{
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

#case02-identification.active{
    display:block !important;
    position:relative;
    width:min(620px,90vw);
    max-height:none;
    overflow:visible;
    margin:0 auto;
}

#case02-panel{
    display:none;
}

#case02-panel.active{
    display:block !important;
}

.case02-window{
    position:relative;
}

.case02-close-x{
    position:absolute;
    top:18px;
    right:18px;

    margin:0;
    padding:0;

    width:36px;
    height:36px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;

    background:rgba(255,255,255,.03);
    color:#777;

    font-size:1.4rem;
    line-height:1;
    letter-spacing:0;

    cursor:pointer;
}

.case02-close-x:hover{
    color:#fff;
    border-color:var(--purple);
    background:rgba(170,120,255,.08);
}

/* Scroll discreto — Arquivo Ω */

.case02-window{
    scrollbar-width: thin;
    scrollbar-color: rgba(95, 9, 235, .35) transparent;
}

.case02-window::-webkit-scrollbar{
    width: 5px;
}

.case02-window::-webkit-scrollbar-track{
    background: transparent;
}

.case02-window::-webkit-scrollbar-thumb{
    background: rgba(95, 9, 235, .30);
    border-radius: 20px;
}

.case02-window::-webkit-scrollbar-thumb:hover{
    background: rgba(95, 9, 235, .55);
}

/* =========================================================
   CASO 02 — LUA INTERATIVA
========================================================= */

#moon-container.case02-moon-active{
    pointer-events:auto;
}

#moon-container.case02-moon-active #moon{
    cursor:pointer;
}

#back-to-start{
    position:fixed;

    left:30px;
    bottom:30px;

    padding:10px 18px;

    background:rgba(0,0,0,.45);
    border:1px solid rgba(255,255,255,.15);
    border-radius:8px;

    color:#999;
    font-size:.75rem;
    letter-spacing:.12em;

    cursor:pointer;
    z-index:10001;

    transition:.3s ease;
}

#back-to-start:hover{
    color:#fff;
    border-color:rgba(170,120,255,.45);
}

#case02-evidence-03-trigger{
    display:none;
}

#case02-evidence-03-trigger.case02-unlocked{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    width:max-content;
    margin:30px auto;

    font-family:monospace;
    font-size:.72rem;
    letter-spacing:.12em;

    color:rgba(255,255,255,.38);

    cursor:pointer;

    opacity:.65;
    transition:.3s ease;
}

#case02-evidence-03-trigger.case02-unlocked:hover{
    opacity:1;
    color:#fff;
}

.case02-scan-result{
    margin-top:30px;

    font-family:monospace;
    font-size:.75rem;
    letter-spacing:.1em;

    color:rgba(255,255,255,.55);

    opacity:0;
    transform:translateY(8px);

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

.case02-scan-result.show{
    opacity:1;
    transform:translateY(0);
}

.case02-scan-result strong{
    display:block;

    margin-top:10px;

    font-size:1rem;
    letter-spacing:.2em;

    color:#fff;
}

.case02-corrupted-line{
    display:none;
}

.case02-corrupted-line.case02-unlocked{
    display:flex;
    align-items:center;
    gap:10px;

    width:max-content;
    max-width:100%;

    margin:18px 0 28px;

    font-family:monospace;
    font-size:.68rem;
    letter-spacing:.08em;

    opacity:.48;
    cursor:pointer;

    transition:.3s ease;
}

.case02-corrupted-line.case02-unlocked:hover{
    opacity:1;
}

.case02-corrupted-prefix{
    color:#999;
}

.case02-corrupted-data{
    color:#666;
}

/* =========================================================
   CASO Ω-02 — MAPA DE PROGRESSO
========================================================= */

#case02-progress-map{
    position:fixed;
    left:24px;
    bottom:24px;

    width:310px;
    max-width:calc(100vw - 48px);

    padding:16px 18px;

    background:rgba(5,5,5,.88);
    border:1px solid rgba(212,175,55,.18);
    border-radius:10px;

    backdrop-filter:blur(10px);

    z-index:850;

    opacity:0;
    pointer-events:none;

    transform:translateY(12px);

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

#case02-progress-map.active{
    opacity:1;
    transform:translateY(0);
}

.case02-progress-title{
    margin-bottom:14px;

    font-family:monospace;
    font-size:.62rem;

    letter-spacing:.18em;

    color:#888;
}

.case02-progress-nodes{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.case02-progress-item{
    position:relative;

    display:flex;
    flex-direction:column;
    align-items:center;

    flex:1;
}

.case02-progress-item:not(:last-child)::after{
    content:"";

    position:absolute;

    top:6px;
    left:50%;

    width:100%;
    height:1px;

    background:#333;

    z-index:0;

    transition:.5s ease;
}

.case02-progress-item.recovered:not(:last-child)::after{
    background:rgba(212,175,55,.55);
}

.case02-progress-dot{
    position:relative;
    z-index:1;

    width:13px;
    height:13px;

    border:1px solid #555;
    border-radius:50%;

    background:#090909;

    transition:.4s ease;
}

.case02-progress-item.recovered
.case02-progress-dot{
    border-color:#d4af37;
    background:#d4af37;

    box-shadow:
        0 0 8px rgba(212,175,55,.55),
        0 0 18px rgba(212,175,55,.25);
}

.case02-progress-number{
    margin-top:7px;

    font-family:monospace;
    font-size:.56rem;

    letter-spacing:.08em;

    color:#555;

    transition:.4s ease;
}

.case02-progress-item.recovered
.case02-progress-number{
    color:#d4af37;
}

.case02-progress-connections{
    display:flex;
    align-items:center;
    gap:8px;

    margin-top:14px;
    padding-top:11px;

    border-top:1px solid rgba(255,255,255,.06);

    font-family:monospace;
    font-size:.55rem;

    letter-spacing:.12em;

    color:#666;
}

.case02-connection-dot{
    width:7px;
    height:7px;

    border:1px solid #555;
    border-radius:50%;

    transition:.4s ease;
}

.case02-connection-dot.recovered{
    border-color:#d4af37;
    background:#d4af37;

    box-shadow:
        0 0 7px rgba(212,175,55,.5);
}

@keyframes case02EvidencePulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.65);
        box-shadow:
            0 0 15px rgba(212,175,55,.8),
            0 0 30px rgba(212,175,55,.4);
    }

    100%{
        transform:scale(1);
    }
}

.case02-progress-dot.new-evidence{
    animation:
        case02EvidencePulse .8s ease;
}

@media(max-width:600px){

    #case02-progress-map{
        left:14px;
        bottom:14px;

        width:280px;
        max-width:calc(100vw - 28px);

        padding:13px 14px;
    }

}

/* =========================================================
   CASO Ω-02 — EVIDÊNCIA 004
========================================================= */

.case02-constellation-anomaly{
    display:none;

    position:absolute;
    right:9%;
    bottom:13%;

    width:30px;
    height:30px;

    border:1px solid rgba(212,175,55,.28);
    border-radius:50%;

    background:rgba(0,0,0,.35);

    color:rgba(212,175,55,.5);

    font-family:monospace;
    font-size:.75rem;

    cursor:pointer;

    z-index:20;

    opacity:.45;

    box-shadow:
        0 0 8px rgba(212,175,55,.08);

    transition:
        opacity .3s ease,
        border-color .3s ease,
        box-shadow .3s ease,
        transform .3s ease;
}

.case02-constellation-anomaly.case02-unlocked{
    display:flex;

    align-items:center;
    justify-content:center;
}

.case02-constellation-anomaly:hover{
    opacity:1;

    transform:scale(1.12);

    border-color:rgba(212,175,55,.7);

    box-shadow:
        0 0 12px rgba(212,175,55,.3);
}

@keyframes case02ConstellationSignal{

    0%,100%{
        opacity:.35;
    }

    50%{
        opacity:.85;

        box-shadow:
            0 0 14px rgba(212,175,55,.35);
    }
}

.case02-constellation-anomaly.case02-unlocked{
    display:flex;
    align-items:center;
    justify-content:center;

    pointer-events:auto;

    z-index:100;
}
/* =========================
   CASO 02 — EVIDÊNCIA 005
   CAMPO DE RECONSTRUÇÃO
========================= */

.case02-answer-area{
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#case02-evidence-05-answer{
    width: 100%;
    box-sizing: border-box;

    padding: 14px 16px;

    background: rgba(255,255,255,0.035);

    border: 1px solid rgba(229,196,55,0.35);
    border-radius: 4px;

    color: #f2f2f2;

    font-family: inherit;
    font-size: 13px;
    letter-spacing: 0.14em;

    outline: none;

    transition:
        border-color 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}

#case02-evidence-05-answer::placeholder{
    color: rgba(255,255,255,0.35);
}

#case02-evidence-05-answer:focus{
    background: rgba(229,196,55,0.04);
    border-color: rgba(229,196,55,0.75);

    box-shadow:
        0 0 0 1px rgba(229,196,55,0.08),
        0 0 18px rgba(229,196,55,0.06);
}

#case02-evidence-05-submit{
    width: 100%;

    padding: 13px 16px;

    background: transparent;

    border: 1px solid rgba(229,196,55,0.55);
    border-radius: 4px;

    color: #e5c437;

    font-family: inherit;
    font-size: 11px;
    font-weight: 600;

    letter-spacing: 0.22em;

    cursor: pointer;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        box-shadow 0.3s ease;
}

#case02-evidence-05-submit:hover{
    background: rgba(229,196,55,0.08);

    box-shadow:
        0 0 18px rgba(229,196,55,0.08);
}

#case02-evidence-05-feedback{
    min-height: 18px;

    margin: 4px 0 0;

    font-size: 11px;
    letter-spacing: 0.12em;
    line-height: 1.6;

    color: rgba(255,255,255,0.55);
}
/* =========================
   CASO 02 — BOTÃO DE ANÁLISE
========================= */

.case02-next-analysis{
    display: block;

    width: calc(100% - 56px);
    max-width: 430px;

    margin: 30px auto 8px;

    padding: 14px 18px;

    background: rgba(229,196,55,0.035);

    border: 1px solid rgba(229,196,55,0.45);
    border-radius: 4px;

    color: #e5c437;

    font-family: inherit;
    font-size: 11px;
    font-weight: 600;

    letter-spacing: 0.18em;
    text-transform: uppercase;

    cursor: pointer;

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.2s ease;
}

.case02-next-analysis:hover{
    background: rgba(229,196,55,0.08);

    border-color: rgba(229,196,55,0.75);

    box-shadow:
        0 0 20px rgba(229,196,55,0.08);

    transform: translateY(-1px);
}

.case02-next-analysis:active{
    transform: translateY(0);
}

.case02-investigator-name{
    cursor: default;

    transition:
        color .3s ease,
        text-shadow .3s ease,
        opacity .3s ease;
}

.case02-investigator-name.case02-anomaly{
    cursor: pointer;

    color: #e5c437;

    text-shadow:
        0 0 8px rgba(229,196,55,.28);
}

#case02-reconstruction-log{
    position: relative;
    margin-top: 24px;

    padding: 24px 22px;

    min-height: 260px;

    border: 1px solid rgba(229,196,55,.22);
   border-radius: 0 0 14px 14px;

    background:
        linear-gradient(
            180deg,
            rgba(10,12,16,.96),
            rgba(4,6,10,.98)
        );

    box-shadow:
        inset 0 0 30px rgba(229,196,55,.035),
        0 0 24px rgba(0,0,0,.35);

    overflow: hidden;

    font-family:
        "Courier New",
        monospace;

    line-height: 1.65;

    letter-spacing: .04em;
}


#case02-reconstruction-log::before{
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 3px,
            rgba(255,255,255,.018) 4px
        );

    opacity: .65;
}


#case02-reconstruction-log::after{
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    height: 90px;

    top: -100px;

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(229,196,55,.04),
            transparent
        );

    animation:
        case02-terminal-scan 7s linear infinite;
}


@keyframes case02-terminal-scan{

    from{
        transform: translateY(0);
    }

    to{
        transform: translateY(500px);
    }

}

.case02-reconstruction-terminal{
    margin-top: 24px;
}


.case02-reconstruction-topbar{
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 10px 14px;

    border: 1px solid rgba(229,196,55,.18);
    border-bottom: none;

    border-radius: 12px 12px 0 0;

    background:
        rgba(229,196,55,.045);

    font-size: 11px;
    letter-spacing: .18em;

    opacity: .78;
}


.case02-reconstruction-status{
    position: relative;

    padding-left: 14px;

    font-size: 10px;
}


.case02-reconstruction-status::before{
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    transform: translateY(-50%);

    background: currentColor;

    box-shadow:
        0 0 8px currentColor;

    animation:
        case02-status-pulse 1.8s ease-in-out infinite;
}


@keyframes case02-status-pulse{

    0%,
    100%{
        opacity: .3;
    }

    50%{
        opacity: 1;
    }

}

.case02-reconstruction-terminal{
    transition:
        filter .45s ease,
        transform .45s ease;
}


.case02-terminal-error{
    animation:
        case02-terminal-glitch .38s ease;
}


.case02-terminal-error
.case02-reconstruction-topbar{
    border-color:
        rgba(255,255,255,.28);

    background:
        rgba(255,255,255,.055);
}


.case02-terminal-error
#case02-reconstruction-log{
    border-color:
        rgba(255,255,255,.22);

    box-shadow:
        inset 0 0 35px rgba(255,255,255,.025),
        0 0 30px rgba(0,0,0,.5);
}


@keyframes case02-terminal-glitch{

    0%{
        transform:
            translateX(0);
    }

    20%{
        transform:
            translateX(-3px);
    }

    40%{
        transform:
            translateX(3px);
    }

    60%{
        transform:
            translateX(-2px);
    }

    80%{
        transform:
            translateX(2px);
    }

    100%{
        transform:
            translateX(0);
    }

}