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{
    filter:
    blur(12px);

    will-change:
    opacity;

    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 3.7s infinite;

    mix-blend-mode:screen;
}

@keyframes crtPulse{

    0%{
        opacity:.25;
    }

    8%{
        opacity:.42;
    }

    12%{
        opacity:.28;
    }

    20%{
        opacity:.62;
    }

    27%{
        opacity:.35;
    }

    42%{
        opacity:.75;
    }

    49%{
        opacity:.40;
    }

    63%{
        opacity:.58;
    }

    74%{
        opacity:.30;
    }

    91%{
        opacity:.82;
    }

    100%{
        opacity:.25;
    }

}

.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;
    }
}

.background{

    animation:
        roomBreath 35s ease-in-out infinite;

}

@keyframes roomBreath{

    0%{

        transform:
        scale(1.02)
        translateX(0px)
        translateY(0px);

    }

    25%{

        transform:
        scale(1.03)
        translateX(-10px)
        translateY(-4px);

    }

    50%{

        transform:
        scale(1.04)
        translateX(6px)
        translateY(4px);

    }

    75%{

        transform:
        scale(1.03)
        translateX(-4px)
        translateY(2px);

    }

    100%{

        transform:
        scale(1.02)
        translateX(0px)
        translateY(0px);

    }

}

/* ==================================
   MENU SEÑAL PIRATA
================================== */

#signal-menu{
    
    position:absolute;

    left:12%;
    top:50%;

    transform:translateY(-50%);

    display:flex;
    flex-direction:column;

    gap:18px;

    opacity:0;

    pointer-events:none;

    transition:
        opacity .8s ease;

    z-index:500;
}

#signal-menu.visible{

    opacity:1;

    pointer-events:auto;
}

.menu-title{

    color:#00ff88;

    font-family:monospace;

    letter-spacing:4px;

    margin-bottom:15px;

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

.signal-option{
    color:#00ff88;
    text-decoration:none;
    font-family:monospace;
    font-size:18px;
    letter-spacing:2px;
    opacity:.75;
    transition:transform .25s, opacity .25s;
}

.signal-option:hover{
    opacity:1;
    transform:translateX(8px);
    text-shadow:0 0 15px #00ff88;
}

.signal-link:hover{

    opacity:1;

    transform:translateX(8px);

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

#tv-trigger{

    position:absolute;

    left:52%;
    top:52%;

    width:120px;
    height:120px;

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

    z-index:200;

    cursor:pointer;
}

.signal-link::before{

    content:"> ";

    opacity:.7;
}