/* La capa de movimiento común a TODA la web. La cargan el portal (base.html) y las páginas
   generadas (generar.py), que tienen hojas distintas: por eso esto va aparte y no usa ninguna
   variable sin su respaldo. El guion es `movimiento.js`; lo que aquí no lleva clase `.con-*`
   funciona sin JavaScript.

   Las reglas de la casa: solo `transform` y `opacity`; nada parte de la nada (una entrada
   empieza visible al 0 % pero YA con forma, a escala .96, no a 0); curvas fuertes de salida
   —lo que entra arranca rápido y frena— y duraciones de interfaz por debajo de 300 ms salvo lo
   que es narración. Y con «reducir movimiento» se apaga TODO al final del archivo. */

:root {
  --mv-curva: cubic-bezier(.22, 1, .36, 1);           /* salida fuerte, sin rebote */
  --mv-curva-vaiven: cubic-bezier(.77, 0, .175, 1);   /* para lo que se mueve estando ya en pantalla */
}

/* ── La entrada de la página ───────────────────────────────────────────────────
   Lo que se ve al cargar entra escalonado desde abajo, por CSS y sin esperar a ningún guion:
   así no hay un fotograma con la página pintada y luego escondida. `backwards` y no `both`:
   cuando acaba, el elemento vuelve a mandar sobre su opacidad y su transform (lo necesitan
   los que aparecen al llegar con el scroll y los que mueve la portada). Se excluyen los que
   ya tienen entrada propia. Solo los ocho primeros llevan retraso: lo de más abajo no se ve
   al cargar y entra como si nada. */
@media (prefers-reduced-motion: no-preference) {
  main > :not(.revelar):not(.lp-escenario):not(script):not(template),
  .envoltorio > :not(.aparecer) {
    animation: mv-entra .6s var(--mv-curva) backwards;
  }
  main > :nth-child(2), .envoltorio > :nth-child(2) { animation-delay: 50ms; }
  main > :nth-child(3), .envoltorio > :nth-child(3) { animation-delay: 100ms; }
  main > :nth-child(4), .envoltorio > :nth-child(4) { animation-delay: 150ms; }
  main > :nth-child(5), .envoltorio > :nth-child(5) { animation-delay: 200ms; }
  main > :nth-child(6), .envoltorio > :nth-child(6) { animation-delay: 250ms; }
  main > :nth-child(7), .envoltorio > :nth-child(7) { animation-delay: 300ms; }
  main > :nth-child(8), .envoltorio > :nth-child(8) { animation-delay: 350ms; }
}
@keyframes mv-entra {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* ── Los titulares, palabra a palabra ────────────────────────────────────────── */
/* El recorte se agranda por abajo lo justo para que quepan las colas de la «g», la «y» y la
   «p», y se recupera con un margen negativo para que nada cambie de sitio. Sin esto, la «g»
   de «Descargar» salía sin cola (y Luis lo vio en el acto). */
.mv-titular .mv-palabra {
  display: inline-block; overflow: clip; vertical-align: bottom;
  padding-bottom: .2em; margin-bottom: -.2em;
}
.mv-titular .mv-palabra > span {
  display: inline-block; transform: translateY(120%); opacity: 0;
  transition: transform .7s var(--mv-curva), opacity .5s var(--mv-curva);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.mv-titular-entra .mv-palabra > span { transform: none; opacity: 1; }

/* ── Aparecer al llegar ───────────────────────────────────────────────────────
   `.mv` la pone el guion SOLO a lo que está por debajo de la primera pantalla; `.mv-visto`,
   al asomar. `--tanda` es el orden dentro de la misma tanda del observador: cinco tarjetas
   que asoman a la vez entran una detrás de otra, no las cinco de golpe. */
.mv { opacity: 0; transform: translateY(18px) scale(.985); }
.mv.mv-visto {
  opacity: 1; transform: none;
  transition: opacity .6s var(--mv-curva), transform .6s var(--mv-curva);
  transition-delay: calc(min(var(--tanda, 0), 6) * 70ms);
}

/* ── El texto que se resalta con el scroll ─────────────────────────────────────
   Cada palabra tiene su umbral (`--i / --n`) y el guion sube `--resalte` de 0 a 1 conforme la
   frase cruza la pantalla: las palabras se van encendiendo de la primera a la última. El color
   apagado es el del texto secundario de cada hoja; el encendido, el del texto normal. Sin el
   guion, `--resalte` no existe y todo sale encendido: la frase se lee igual. */
.mv-resalta .mv-tramo > span { color: var(--tinta, var(--texto, inherit)); transition: color .25s ease; }
.mv-resalta[style*="--resalte"] .mv-tramo > span {
  /* Encendida cuando su umbral queda por debajo del avance; el `clamp` convierte la resta en
     un 0 o un 1 sin JavaScript por palabra. */
  --umbral: calc(var(--i, 0) / max(var(--n, 1), 1));
  --encendida: clamp(0, calc((var(--resalte, 1) - var(--umbral)) * 40), 1);
  color: color-mix(in srgb, var(--tinta, var(--texto, #0f172a)) calc(var(--encendida) * 100%),
                   var(--mv-apagado, var(--suave, var(--texto-suave, #64748b))));
}

/* ── La luz de la barra ──────────────────────────────────────────────────────── */
.barra nav { position: relative; }
.nav-luz {
  position: absolute; left: 0; top: 0; width: 0; height: 0; border-radius: 9px; z-index: -1;
  background: color-mix(in srgb, var(--azul, var(--acento, #2563eb)) 10%, transparent);
  opacity: 0;
  transition: transform .28s var(--mv-curva), width .28s var(--mv-curva), opacity .18s ease;
}
.nav-luz.nav-luz-viva { opacity: 1; }
.barra nav .nav-enlace { position: relative; z-index: 1; }

/* ── Los desplegables ─────────────────────────────────────────────────────────
   Donde el navegador ya sabe animar `height: auto` (Chrome 131+, Safari 18.4+), un `<details>`
   se abre deslizando y su marcador gira. Donde no, se abre de golpe como siempre. */
details { interpolate-size: allow-keywords; }
@supports selector(::details-content) {
  details::details-content {
    height: 0; overflow: clip; opacity: 0;
    transition: height .32s var(--mv-curva), opacity .28s ease, content-visibility .32s allow-discrete;
  }
  details[open]::details-content { height: auto; opacity: 1; }
}
summary::marker, summary::-webkit-details-marker { transition: transform .2s ease; }

/* ── Pulsar ──────────────────────────────────────────────────────────────────
   Lo que se pulsa se hunde un pelo AL PULSAR, no al soltar: es el momento en que la interfaz
   dice «te he oído». Solo lo que aún no lo hacía en su propia hoja. */
@media (hover: hover) {
  .chip:active, .guia:active, .version-ancla:active, .nav-enlace:active { transform: scale(.97); }
}

/* ── Quietud ───────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  main > *, .envoltorio > * { animation: none !important; }
  .mv, .mv-titular .mv-palabra > span { opacity: 1 !important; transform: none !important; transition: none !important; }
  .mv-resalta .mv-tramo > span { color: inherit !important; transition: none !important; }
  .nav-luz { display: none; }
  details::details-content { transition: none !important; }
}