/* ============================================================
   ESCENAS — estilos comunes del scroll por capítulos
   (el comportamiento está en /assets/js/escenas.js)
   ============================================================ */

/* Lenis: el scroll suave lo maneja el JS, no el CSS */
html.lenis, html.lenis body { height: auto; }
html.escenas-activas { scroll-behavior: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Escena: sección alta con una caja pegada que ocupa la pantalla */
.escena { --p: 0; --largo: 250; position: relative; height: calc(var(--largo) * 1svh); }
.escena__pin { position: sticky; top: 0; height: 100svh; padding-top: var(--header-h); overflow: hidden; display: flex; flex-direction: column; justify-content: center; }

/* Palabras que aparecen con el scroll: entran en baja opacidad y en un momento quedan a full */
[data-palabras] .palabra { display: inline-block; opacity: 0; transform: translateY(0.25em); filter: blur(6px); transition: opacity var(--t-salida) var(--ease-salida), transform var(--t-salida) var(--ease-salida), filter var(--t-salida) var(--ease-salida); }
[data-palabras] .palabra.is-on { animation: palabraEntra 1.4s var(--ease-firma) forwards; }
[data-palabras] em { font-style: normal; color: var(--accent); }
[data-palabras] em .palabra.is-on { animation-name: palabraEntraRoja; }
@keyframes palabraEntra {
    0% { opacity: 0; transform: translateY(0.25em); filter: blur(6px); }
    20% { opacity: 0.28; transform: none; filter: blur(0); }
    55% { opacity: 0.28; }
    100% { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes palabraEntraRoja {
    0% { opacity: 0; transform: translateY(0.25em); filter: blur(6px); }
    20% { opacity: 0.28; transform: none; filter: blur(0); text-shadow: none; }
    55% { opacity: 0.28; text-shadow: none; }
    100% { opacity: 1; transform: none; filter: blur(0); text-shadow: 0 0 28px var(--glow); }
}

/* Galería horizontal: la pista se mueve de lado mientras la pantalla está quieta */
.h-track { display: flex; gap: var(--s-5); padding-inline: var(--gutter); will-change: transform; width: max-content; }

/* Reducir movimiento: todo como página normal, sin fijaciones */
.escenas-quietas .escena { height: auto; }
.escenas-quietas .escena__pin { position: relative; height: auto; min-height: 0; padding-block: var(--section-gap); overflow: visible; }
.escenas-quietas .h-track { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; }
.escenas-quietas .h-track > * { scroll-snap-align: start; }