/* ==========================================================================
   Vital Red — CORTINA DE ENTRADA
   ==========================================================================

   Solo la carga index.html. Es una cortina de dos hojas que sube y descubre el
   encabezado y el carrusel de inicio.

   POR QUÉ EL PREFIJO `cortina` Y NO `intro`
   Porque la palabra ya estaba ocupada: la sección «Quiénes somos» del inicio es
   `<section class="intro section">`. Con el nombre anterior, la regla
   `[data-intro="on"] .intro { position: fixed; inset: 0; z-index: 200 }`
   alcanzaba también a esa sección y la pegaba a pantalla completa encima de la
   portada. Las medidas seguían saliendo correctas —las hojas estaban justo
   donde debían— y el problema solo apareció al mirar las capturas.

   CÓMO SE ENCIENDE
   `js/anim.js` pone `data-intro="on"` en el <html> de forma síncrona, antes del
   primer pintado. Sin ese atributo nada de este archivo se aplica, así que una
   página sin el guion —o con el guion caído— se ve normal desde el primer
   fotograma.

   POR QUÉ TODO EL MOVIMIENTO ES CSS
   Las animaciones llevan `forwards`: terminan solas y se quedan fuera de la
   pantalla aunque ningún JavaScript vuelva a ejecutarse. El guion únicamente
   decide si la cortina se arma y limpia el atributo al final; si fallara a
   media animación, la cortina se retira igual. Es la diferencia entre una
   cortina que se puede quedar pegada y una que no.

   SECUENCIA (1.90 s en total)
     0    → 0.15 s   pantalla blanca quieta
     0.15 → 1.05 s   la hoja blanca sube
     0.30 → 1.30 s   la hoja azul la sigue, escalonada, con su filete rojo
     0.70 → 1.90 s   encabezado y portada entran con un fundido y 14 px de subida

   El reparto es deliberado: la blanca arranca sola y la azul entra cuando la
   primera ya lleva un sexto de recorrido, de modo que se leen como dos hojas y
   no como un telón. El contenido empieza a aparecer con la azul todavía a media
   subida: como la cortina sube, la página se descubre de abajo arriba y el
   fundido remata la entrada en vez de anunciarla.
   ========================================================================== */

/* La cortina no existe salvo que el guion la arme. */
.cortina { display: none; }

[data-intro="on"] .cortina {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 200;          /* por encima de todo, también del menú y del modal */
  pointer-events: none;  /* no atrapa clics ni siquiera mientras se ve */
}

/* `inset: 0` deja fuera el canal que `scrollbar-gutter: stable` reserva a la
   derecha: unos 15 px por los que, durante la fase azul, se colaba una franja
   blanca. Con `100vw` la hoja pasa por debajo de ese canal. Es una caja fija, y
   una caja fija no cuenta para el desplazamiento del documento, así que esto no
   introduce desplazamiento horizontal (está comprobado en las cuatro medidas). */
.cortina__hoja {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 100vw;
  will-change: transform;
}
/* Hoja blanca: la que se ve en el primer fotograma. El retraso de 0.15 s es la
   permanencia inicial, lo que hace que la entrada se note en vez de pasar
   desapercibida. */
.cortina__hoja--1 {
  background: #fff;
  animation: introSube .9s cubic-bezier(.66, 0, .2, 1) .15s forwards;
}
/* Hoja azul institucional, medio paso por detrás. Es la que da la sensación de
   profundidad: sin ella la cortina se lee como un simple telón. */
.cortina__hoja--2 {
  background: linear-gradient(170deg, var(--blue-050) 0%, var(--blue-100) 62%, var(--blue-200) 100%);
  animation: introSube 1s cubic-bezier(.66, 0, .2, 1) .3s forwards;
}
/* Filete de marca en el canto inferior de la hoja azul: acompaña el movimiento
   y se va con él. Es el único rojo de la secuencia. */
.cortina__hoja--2::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 3px;
  background: linear-gradient(90deg, var(--blue-600) 0%, var(--blue-500) 54%, var(--red-600) 100%);
}

@keyframes introSube {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -101%, 0); visibility: hidden; }
}

/* El contenido de debajo entra cuando la hoja azul ya va por la mitad. No se
   toca el <main> entero: solo el encabezado y la portada, que es lo que se ve
   en el primer pantallazo. Así el resto de la página no queda invisible si algo
   sale mal. */
[data-intro="on"] .topbar,
[data-intro="on"] .header,
[data-intro="on"] .hero {
  animation: introEntra 1.2s cubic-bezier(.22, .61, .36, 1) .7s both;
}
@keyframes introEntra {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}

/* Quien pide menos movimiento no ve cortina. `anim.js` ya evita armarla, pero
   la regla se repite aquí por si el atributo llegara por otra vía. */
@media (prefers-reduced-motion: reduce) {
  [data-intro="on"] .cortina { display: none; }
  [data-intro="on"] .topbar,
  [data-intro="on"] .header,
  [data-intro="on"] .hero { animation: none; }
}