html,
body{

    margin:0;
    padding:0;

    width:100%;
    height:100%;

    overflow:hidden;

    background:black;
}

#scene{

    position:relative;

    width:100vw;
    height:100vh;

    overflow:hidden;
}

.background{

    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    transform:scale(1.02);

    filter:
    brightness(.70)
    contrast(1.08)
    saturate(.9);

    transition:
        opacity .08s linear,
        filter .08s linear;
}

.crt-glow{

    position:absolute;

    left:52%;
    top:52%;

    width:220px;
    height:220px;

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

    background:

    radial-gradient(
        circle,
        rgba(0,220,255,.55),
        rgba(0,220,255,.18) 40%,
        transparent 75%
    );

    animation:
    crtPulse 4s infinite ease-in-out;

    mix-blend-mode:screen;
}

@keyframes crtPulse{

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

    50%{
        opacity:1;
    }

}

.vignette{

    position:absolute;
    inset:0;

    background:

    radial-gradient(
        circle,
        transparent 35%,
        rgba(0,0,0,.90)
    );

}

.grain{

    position:absolute;
    inset:-50%;

    background-image:

    repeating-radial-gradient(
        circle,
        rgba(255,255,255,.02) 1px,
        transparent 2px
    );

    animation:
    grainMove .25s infinite;
}

@keyframes grainMove{

    0%{
        transform:translate(0,0);
    }

    25%{
        transform:translate(-1%,1%);
    }

    50%{
        transform:translate(1%,-1%);
    }

    75%{
        transform:translate(2%,1%);
    }

    100%{
        transform:translate(0,0);
    }

}

@keyframes crt-flicker{

    0%{
        opacity:.90;
    }

    50%{
        opacity:1;
    }

    100%{
        opacity:.88;
    }

}

/* =========================
   INTRO
========================= */

#intro-screen{

    position:fixed;

    inset:0;

    background:black;

    z-index:9999;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:opacity 1.2s ease;

}

#intro-screen.hide{

    opacity:0;

    pointer-events:none;
}

#intro-content{

    text-align:center;
}

.signal-title{

    color:#00ff88;

    font-size:clamp(28px,4vw,60px);

    font-family:monospace;

    letter-spacing:6px;

    margin-bottom:10px;

    text-shadow:
        0 0 10px #00ff88,
        0 0 25px #00ff88;
}

.signal-year{

    color:#00ff88;

    opacity:.5;

    margin-bottom:40px;

    font-family:monospace;

    letter-spacing:8px;
}

#open-file{

    background:none;

    border:1px solid #00ff88;

    color:#00ff88;

    padding:14px 26px;

    cursor:pointer;

    font-family:monospace;

    letter-spacing:3px;

    animation:
        blink 1.2s infinite;
}

@keyframes blink{

    0%,100%{

        opacity:1;
    }

    50%{

        opacity:.35;
    }
}