/*
 * Movimiento de la página: lo que entra, cambia o se revela. Duraciones y curvas salen de
 * tokens.css (docs/design.json → movimiento). Overlays, galería y cursor están en overlays.css;
 * el acordeón de preguntas, en secciones.css.
 *
 * Reglas (docs/DISENO.md §11):
 *   - Todo se dispara UNA vez (no se repite al volver a pasar).
 *   - Sin JavaScript, todo se ve igual pero quieto: cada estado "escondido" lo pone el
 *     JavaScript, nunca el HTML. Y si el JavaScript falla, hay una salida de emergencia en CSS.
 *   - Con «menos movimiento» (prefers-reduced-motion) base.css pone todas las duraciones en
 *     0,01 ms, y cada módulo JS además se salta lo que sea desplazamiento o video automático.
 *
 * Índice:
 *   1. Título con máscara por líneas    4. Revelado del retrato
 *   2. Cabecera fija al bajar           5. Cambio de página
 *   3. Video de portada y clips
 */

/* ============================================================
   1. TÍTULO CON MÁSCARA POR LÍNEAS (700 ms, 90 ms entre líneas)
   titulo.js parte el título en líneas y mete cada una en una máscara; el texto sube
   desde abajo de su máscara. Sin JS el título es un título normal.
   ============================================================ */

/* Con JavaScript activo, el título espera escondido para no mostrarse entero y volver a empezar.
   Si el módulo nunca llega a correr (error de red, navegador viejo), a los 3 s se muestra solo. */
@media (scripting: enabled) {
  [data-titulo-mascara]:not([data-fase]) {
    visibility: hidden;
    animation: titulo-seguro 0s linear 3s forwards;
  }
}

@keyframes titulo-seguro {
  to { visibility: visible; }
}

.titulo__linea {
  display: block;
  overflow: hidden;
  /* Aire abajo para no cortar las colas de g, j, p, y; el margen negativo lo compensa */
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

.titulo__texto {
  display: block;
  white-space: nowrap;
  transform: translateY(110%);
  transition: transform var(--d-titulo) var(--curva-salida);
  transition-delay: calc(var(--n, 0) * var(--desfase-titulo));
}

[data-titulo-mascara][data-fase="visible"] .titulo__texto {
  transform: none;
}

/* ============================================================
   2. CABECERA FIJA — en la Home, al pasar la portada
   main.js agrega .cabecera--fija (fondo papel, texto negro, línea abajo; ver componentes.css §9)
   y acá se define cómo entra: baja desde arriba en 250 ms.
   ============================================================ */
@keyframes cabecera-entra {
  from { transform: translateY(-100%); }
  to   { transform: none; }
}

.cabecera--fija {
  animation: cabecera-entra var(--d-cabecera) var(--curva-salida);
}

/* ============================================================
   3. VIDEO DE PORTADA Y CLIPS — el video aparece en fundido sobre el póster (350 ms)
   El póster siempre queda debajo: si el video falla o no corresponde, no pasa nada.
   hero-video.js y clips.js agregan .esta-reproduciendo cuando el video ya está andando.
   ============================================================ */
.portada__video,
.medio__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--d-crossfade-video) var(--curva-salida);
}

@media (min-width: 1024px) {
  .portada__video { object-position: right center; }
}

.portada__video.esta-reproduciendo,
.medio__video.esta-reproduciendo {
  opacity: 1;
}

/* ============================================================
   4. REVELADO DEL RETRATO — máscara que se levanta (650 ms), una sola vez
   revelar.js pone .revelar-oculto al arrancar y .revelado cuando la foto entra en pantalla.
   ============================================================ */
[data-revelar] {
  transition: clip-path var(--d-retrato) var(--curva-salida);
}

[data-revelar] > picture {
  transition: transform calc(var(--d-retrato) * 1.4) var(--curva-salida);
}

[data-revelar].revelar-oculto {
  clip-path: inset(100% 0 0 0);
}

[data-revelar].revelar-oculto > picture {
  transform: scale(1.12);
}

[data-revelar].revelado {
  clip-path: inset(0);
}

/* ============================================================
   5. CAMBIO DE PÁGINA — fundido de 200 ms entre páginas (View Transitions)
   Sólo lo entienden Chrome, Edge y Safari recientes. En los demás navegadores y con
   «menos movimiento», la navegación es la de siempre.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: var(--d-cambio-ruta);
    animation-timing-function: var(--curva-salida);
  }
}