/* ==========================================================================
   Movimiento · biblioteca de componentes de SIWOL (nivel 1)
   Copia recortada para Hospelia (sin deriva, contador ni marquee, que no se usan).
   Revelado por scroll, revelado por escena, texto que se destapa, caída y
   deriva, contador y marquee. Sin librerías, sin canvas, sin GSAP.
   Solo anima transform, opacity y clip-path: nada dispara layout.

   Contrato general:
     · El contenido es HTML real y visible sin JS. `movimiento.js` agrega
       `mv-js` al <html>; solo con esa clase puesta algo arranca oculto.
       Si el JS no corre, la página se ve completa. Nunca al revés.
     · Con `prefers-reduced-motion: reduce` todo queda quieto y completo.
     · Cada pieza se activa con la clase `mv-visto`, que pone el observer
       cuando el elemento entra en pantalla.

   Parámetros (sobre :root o sobre el componente):
     --mv-dur       duración del revelado           (560ms)
     --mv-dist      distancia del revelado en px    (24px)
     --mv-ease      curva de entrada                (cubic-bezier(.2,.7,.2,1))
     --mv-paso      separación de la cadencia       (70ms)
   ========================================================================== */

:root {
  --mv-dur: 560ms;
  --mv-dist: 24px;
  --mv-ease: cubic-bezier(.2, .7, .2, 1);
  --mv-paso: 70ms;
}

/* --------------------------------------------------------------------------
   1 · Revelado por scroll
   <p data-mv="subir">, data-mv="aparecer" | "escalar" | "izquierda" | "derecha"
   data-mv-orden="3" para la cadencia dentro de un grupo (empieza en 0)
   data-mv-retraso="200" en ms, para un retraso fijo
   -------------------------------------------------------------------------- */
html.mv-js [data-mv] {
  opacity: 0;
  transition:
    opacity var(--mv-dur) var(--mv-ease),
    transform var(--mv-dur) var(--mv-ease);
  transition-delay: calc(var(--mv-orden, 0) * var(--mv-paso) + var(--mv-retraso, 0ms));
  will-change: opacity, transform;
}
html.mv-js [data-mv="subir"]     { transform: translateY(var(--mv-dist)); }
html.mv-js [data-mv="izquierda"] { transform: translateX(calc(var(--mv-dist) * -1)); }
html.mv-js [data-mv="derecha"]   { transform: translateX(var(--mv-dist)); }
html.mv-js [data-mv="escalar"]   { transform: scale(.96); }
html.mv-js [data-mv].mv-visto {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* --------------------------------------------------------------------------
   2 · Revelado por escena
   <section data-mv-escena> … </section>
   La sección entra como un plano nuevo: fondo primero, después sus hijos en
   cadencia. Los hijos directos no necesitan data-mv: los ordena el JS.
   -------------------------------------------------------------------------- */
html.mv-js [data-mv-escena] {
  --mv-dist: 40px;
  clip-path: inset(6% 0 6% 0 round 0);
  transition: clip-path calc(var(--mv-dur) * 1.4) var(--mv-ease);
}
html.mv-js [data-mv-escena].mv-visto {
  clip-path: inset(0 0 0 0 round 0);
}

/* --------------------------------------------------------------------------
   3 · Texto que se oculta y se revela
   <h1 class="mv-tapa"><span>Línea uno</span><span>Línea dos</span></h1>
   Cada span sube desde detrás de una máscara. Una línea por span.
   -------------------------------------------------------------------------- */
.mv-tapa > span {
  display: block;
  overflow: hidden;
  /* el descendente de la tipografía no se corta con la máscara */
  padding-bottom: .08em;
  margin-bottom: -.08em;
}
/* el texto de cada span se envuelve en .mv-tapa__linea desde el JS */
html.mv-js .mv-tapa .mv-tapa__linea {
  display: block;
  transform: translateY(110%);
  transition: transform calc(var(--mv-dur) * 1.2) var(--mv-ease);
  transition-delay: calc(var(--mv-orden, 0) * var(--mv-paso));
}
html.mv-js .mv-tapa.mv-visto .mv-tapa__linea { transform: none; }

/* --------------------------------------------------------------------------
   Movimiento reducido: todo quieto y completo. Es la promesa del presupuesto
   de movimiento (animacion-escenica.md, sección 6) y no se negocia.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.mv-js [data-mv],
  html.mv-js [data-mv-escena],
  html.mv-js .mv-tapa .mv-tapa__linea {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }
}