/* EXTRA · hero-scroll-video — cabecera fija con vídeo que avanza al hacer scroll.
 *
 * TODO cuelga de `html.hero-video-on`, y esa clase la pone el JS del extra SOLO
 * cuando ya sabe que el vídeo carga y declara duración. Si el fichero falta o el
 * navegador no lo entiende, ninguna de estas reglas llega a aplicarse y la carta
 * se ve como si el extra no existiera. Importa: sin ese cerrojo, un vídeo roto
 * dejaría la cabecera pegada arriba y ocupando la pantalla entera.
 *
 * Las reglas van con `html.…` por delante (especificidad 1-1-1) para ganarle al
 * `#hero` del `override.css` del tenant, que se carga DESPUÉS de este fichero.
 */

html.hero-video-on #hero {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 0;
  overflow: clip;
  /* El fondo del motor (y el que pinte la piel del tenant) taparía el vídeo:
     mientras el extra está activo, el fondo ES el vídeo. */
  background: none;
}

html.hero-video-on .hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 0;
}

/* VELO. Un vídeo no es un fondo: cambia de claro a oscuro dentro del mismo plano,
   así que NINGÚN color de texto se lee sobre él en todo momento. Sin esta capa, el
   rótulo desaparece en cuanto pasa una escena clara — pasó con el primer montaje.
   Se oscurece más arriba y abajo que en el centro, para no apagar el plano entero.
   La intensidad la fija el tenant con `velo` en su extras.json (0 = sin velo). */
html.hero-video-on #hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(9, 14, 28, calc(var(--hero-velo, .5) * 1.15)) 0%,
    rgba(9, 14, 28, calc(var(--hero-velo, .5) * .78)) 42%,
    rgba(9, 14, 28, calc(var(--hero-velo, .5) * 1.3)) 100%
  );
}

/* El contenido de la cabecera, por encima del vídeo Y del velo. */
html.hero-video-on #hero > :not(.hero-video) {
  position: relative;
  z-index: 2;
}

/* La envoltura del hero. Su ÚNICA función es ser más alta que la pantalla: ese
   sobrante es el recorrido del scrub, y su final es el punto exacto donde el hero
   se despega. Sin ella, `sticky` se anclaría a `#main` y la cabecera se quedaría
   fija hasta el pie de la carta. La altura la fija el JS según `vueltas`. */
html.hero-video-on .hero-scroll-wrap {
  position: relative;
}

/* Lo que viene detrás tiene que TAPAR al hero pegado, no deslizarse por debajo.
   Sin esto, el ticker y la carta pasan por encima del vídeo a media transición. */
html.hero-video-on #ticker,
html.hero-video-on .cat,
html.hero-video-on #outro,
html.hero-video-on footer {
  position: relative;
  z-index: 2;
  background: var(--bg);
}