@charset "UTF-8";

/* ====================================================================
   ANIMACIÓN DE INTRODUCCIÓN (al hacer scroll)
   El JavaScript (js/animacion.js) va cambiando estas variables según
   el scroll, para mover el logo y desvanecer las cosas.
   ==================================================================== */

:root {
    --logo: url("../img/logo-capitan-pixel.svg");

    --overlay-opacity: 0;
    /* 0 = se ve la imagen, 1 = fondo cubierto */
    --logo-x: 0px;
    /* posición y tamaño del logo en pantalla */
    --logo-y: 0px;
    --logo-w: 0px;
    --logo-h: 0px;
    --hole-w: 0px;
    /* agujero del fondo: mismo tamaño que el logo, o 0 si está cerrado */
    --hole-h: 0px;
    --logo-fill-opacity: 0;
    --texto-opacity: 0;
    --nav-alto: 0px;
    /* alto real del nav, lo mide el JavaScript */
}

/* ==================== CAPA DE INTRODUCCIÓN ==================== */

.intro {
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    overflow: hidden;

    &.is-done {
        display: none;
    }

    /* Fondo con el logo recortado como un agujero: se restan dos máscaras
       (la pantalla entera y el logo) con mask-composite */
    .intro__bg {
        position: absolute;
        inset: 0;
        background: var(--negro);
        opacity: var(--overlay-opacity);
        -webkit-mask-image: linear-gradient(#000, #000), var(--logo);
        mask-image: linear-gradient(#000, #000), var(--logo);
        -webkit-mask-position: 0 0, var(--logo-x) var(--logo-y);
        mask-position: 0 0, var(--logo-x) var(--logo-y);
        -webkit-mask-size: 100% 100%, var(--hole-w) var(--hole-h);
        mask-size: 100% 100%, var(--hole-w) var(--hole-h);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }

    /* Logo relleno: el mismo SVG usado como máscara sobre un color sólido,
       colocado con las mismas medidas que el agujero de arriba */
    .intro__logo {
        position: absolute;
        left: var(--logo-x);
        top: var(--logo-y);
        width: var(--logo-w);
        height: var(--logo-h);
        background: var(--blanco);
        opacity: var(--logo-fill-opacity);
        -webkit-mask-image: var(--logo);
        mask-image: var(--logo);
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
    }

    /* Frase que aparece con un fundido sencillo, justo debajo de donde
       queda el logo. Cada palabra clave lleva un color sólido.
       El "35%" debe coincidir con el 0.35 que usa animacion.js para
       colocar el logo (así el texto siempre queda justo debajo). */
    .intro__text {
        position: absolute;
        top: calc(35% + 120px);
        left: 50%;
        width: min(85vw, 1400px);
        transform: translateX(-50%);
        margin: 0;
        text-align: center;
        font-family: var(--poppins);
        font-weight: 900;
        text-transform: uppercase;
        /* "min(vw, vh)" evita que el texto sea enorme en pantallas
           horizontales, donde sobra ancho pero falta alto */
        font-size: clamp(3rem, min(9vw, 11vh), 4rem);
        line-height: 1.05;
        color: var(--blanco);
        opacity: var(--texto-opacity);

        .cyan {
            color: var(--cyan);
        }

        .amarilla {
            color: var(--amarillo);
        }

        .magenta {
            color: var(--magenta);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        display: none;
    }
}

/* ==================== RECORRIDO DE SCROLL ====================
   El JavaScript pone aquí la altura real, según cuánto dure la animación */

.intro-track {
    position: relative;
    height: 100vh;
    /* alto de sobra por si el JavaScript no llega a ejecutarse */

    /* El vídeo se queda fijo en pantalla mientras dura el scroll. El
       scroll mueve su "currentTime" hacia delante y hacia atrás, en vez
       de reproducirse solo: por eso no lleva "autoplay" ni "controls" */
    .intro-track__frames {
        position: sticky;
        top: 0;
        display: block;
        width: 100%;
        height: 100vh;
        object-fit: cover;
        overflow: hidden;
        background: var(--blanco);
    }
}

/* ==================== LA WEB SE QUEDA QUIETA UN RATO ====================
   El logo grande y el título van aquí dentro (el nav se queda fuera, para
   que siga fijo arriba siempre, no solo durante esta pausa).

   El truco: este contenedor mide más que una pantalla (height: 250vh) y
   su hijo es "sticky", pegado justo debajo del nav. Mientras se hace
   scroll dentro de este contenedor tan alto, el hijo no se mueve del
   sitio. Solo cuando el scroll supera esa altura, se suelta y se puede
   seguir bajando hacia el resto de la página con normalidad.

   Al ser CSS (sticky) y no JavaScript, funciona igual subiendo que
   bajando: si vuelves a subir, la animación se ve otra vez sin recargar.

   Para alargar o acortar la pausa, basta con subir o bajar el "height". */

.hero-pin {
    position: relative;
    height: 400vh;

    .hero-pin__inner {
        position: sticky;
        top: var(--nav-alto);
    }
}