/* ==========================================================================
   Movimiento · biblioteca de componentes de SIWOL (nivel 1)
   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; }

/* Copia recortada de plantillas-siwol/movimiento/: Inmopedia usa solo el revelado (1, 2 y 3). */

/* --------------------------------------------------------------------------
   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;
  }
}