/* =========================================================================
   LA ENTRADA — lo que pasa al abrir la portada, sin tocar una tecla.

   El guion, segundo a segundo:

     0     - 0,5 s   el video a pantalla completa, limpio, sin velo ni texto
     0,5   - 1,0 s   el hero se recoge hacia arriba y sube la pagina sola
     1,0   - 4,0 s   el texto va apareciendo y viniendose hacia delante,
                     cogiendo sombra, como si se levantara de la pantalla
     4,0   - 4,25 s  "Sweet Lolita" pega el salto y vuelve a caer

   Todo en CSS. Sin JavaScript: no hay nada que se pueda quedar colgado.
   Va en su propio fichero para no pelearse con estilo.css.
   ========================================================================= */

:root {
    --alto-hero: 78vh;      /* donde se queda el hero cuando termina de subir */
    --entrada-video: .5s;   /* cuanto dura a pantalla completa */
    --entrada-subida: .5s;  /* cuanto tarda en recogerse */
}

/* ---------- 1. El hero: empieza llenando la pantalla y se recoge ---------- */
.hero {
    height: 100vh;
    animation: hero-recoger 1s cubic-bezier(.65, 0, .35, 1) forwards;
}

@keyframes hero-recoger {
    0%, 50% { height: 100vh; }        /* medio segundo quieto, a pantalla completa */
    100%    { height: var(--alto-hero); }
}

/* Durante ese primer medio segundo el video se ve limpio: sin desenfoque y
   sin bajar la opacidad. Al recogerse, entra el velo. */
.hero__video {
    animation: deriva-diagonal 34s linear infinite,
               video-atenuar 1.2s ease-out forwards;
}

@keyframes video-atenuar {
    0%, 42% { filter: blur(0);   opacity: 1; }
    100%    { filter: blur(2px); opacity: .55; }
}

.hero__fondo::after {
    opacity: 0;
    animation: velo-entrar .8s ease-out .45s forwards;
}

@keyframes velo-entrar {
    to { opacity: 1; }
}

/* ---------- 2. El texto: aparece y viene hacia delante ---------- */
/* Arranca lejos, pequeno, transparente y sin sombra. Termina cerca, entero,
   con sombra: la sensacion es que se despega de la pantalla. */
/* El h1 va aparte, mas abajo: el suyo es una subida larga, no esto. */
.hero__ojo,
.hero__lema,
.hero__acciones {
    opacity: 0;
    animation: texto-adelante 1.2s cubic-bezier(.22, 1, .36, 1) forwards;
}

.hero__ojo      { animation-delay: 1.0s; }
.hero__lema     { animation-delay: 2.0s; }
.hero__acciones { animation-delay: 2.5s; }

@keyframes texto-adelante {
    from {
        opacity: 0;
        transform: scale(.86) translateY(14px);
        text-shadow: 0 0 0 rgba(0, 0, 0, 0);
        filter: blur(3px);
    }
    60% {
        opacity: 1;
        filter: blur(0);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
        text-shadow: 0 14px 30px rgba(40, 22, 16, .45);
        filter: blur(0);
    }
}

/* ---------- 3. "Sweet Lolita": una sola subida, larga y suave ---------- */
/* Sube desde abajo, desde invisible y borroso, y va apareciendo y
   enfocandose por el camino. UN movimiento continuo de dos segundos: ni
   se coloca primero ni pega ningun salto al final. */
.hero h1 {
    animation: titulo-subir 2s cubic-bezier(.16, 1, .3, 1) 1s forwards;
}

@keyframes titulo-subir {
    from {
        opacity: 0;
        transform: translateY(90px) scale(.82);
        filter: blur(14px);
        text-shadow: 0 0 0 rgba(40, 22, 16, 0);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
        text-shadow: 0 18px 38px rgba(40, 22, 16, .5);
    }
}

/* ---------- Si alguien no quiere movimiento, no lo hay ---------- */
/* Hay gente a la que este tipo de animacion le marea de verdad. */
@media (prefers-reduced-motion: reduce) {
    .hero { height: var(--alto-hero); animation: none; }
    .hero__video { animation: none; filter: blur(2px); opacity: .55; }
    .hero__fondo::after { opacity: 1; animation: none; }
    .hero__ojo, .hero h1, .hero__lema, .hero__acciones {
        opacity: 1; animation: none; transform: none;
    }
}

/* En movil el hero no se come toda la pantalla al reposar, que si no hay
   que hacer scroll para ver que la pagina sigue. */
@media (max-width: 780px) {
    :root { --alto-hero: 68vh; }
}