/* ==========================================================================
   LVN · Capa de movimiento
   Aditiva: se monta sobre lvn.css sin modificarlo. No define ni un color,
   ni una tipografía, ni un tamaño nuevo. Solo estados y transiciones.

   Regla de seguridad: nada se oculta salvo que motion.js haya puesto la
   clase .mv en <html>. Si el script no carga, la página se ve completa.
   ========================================================================== */

/* ── 1 · Revelado al scroll ─────────────────────────────────────────────── */
.mv .mv-reveal{
  opacity:0;
  transform:translate3d(0, 24px, 0);
  transition:opacity .78s var(--suave-e), transform .78s var(--suave-e);
  transition-delay:calc(var(--mv-i, 0) * .1s);
  will-change:opacity, transform;
}
.mv .mv-reveal.mv-in{
  opacity:1;
  transform:none;
}
/* Al terminar se suelta el will-change: no conviene dejarlo puesto. */
.mv .mv-reveal.mv-listo{will-change:auto}

/* ── 2 · Titulares con revelado por recorte ─────────────────────────────── */
/* De abajo hacia arriba, sin tocar el tipo ni el color. */
.mv .mv-clip{
  opacity:0;
  clip-path:inset(0 0 105% 0);
  transition:clip-path 1.05s var(--suave-e), opacity .5s linear;
  transition-delay:calc(var(--mv-i, 0) * .1s);
}
.mv .mv-clip.mv-in{opacity:1; clip-path:inset(0 0 -12% 0)}

/* ── 3 · Imágenes de galería ────────────────────────────────────────────── */
/* lvn.css ya hace scale(1.03) en hover; acá solo se ajusta el tiempo al
   rango pedido y se suma una curva más suave. */
.galeria .escena{transition:transform .45s cubic-bezier(.22,.61,.36,1)}

/* ── 4 · Indicador de avance de la lista de obra ────────────────────────── */
/* Una guía vertical que crece con el scroll y marca la etapa activa.
   Usa tokens que ya existen: --filete y --corten. */
.mv .obra{position:relative}
.mv .mv-guia{
  position:absolute; left:0; top:0; bottom:0; width:1px;
  background:var(--filete); pointer-events:none;
}
.mv .mv-guia__fill{
  position:absolute; left:0; top:0; width:1px; height:0;
  background:var(--corten);
  transform-origin:top;
}
.mv:not(.mv-calmo) .obra .etapa{padding-left:1.6rem}
.mv .obra .etapa{transition:opacity .5s var(--sal)}
.mv .obra .etapa:not(.mv-activa){opacity:.55}
@media (max-width:819px){
  .mv:not(.mv-calmo) .obra .etapa{padding-left:1.2rem}
}

/* ── 5 · Eco del titular de cierre ──────────────────────────────────────── */
.mv .mv-eco{position:relative}
.mv .mv-eco__copia{
  position:absolute; inset:0; margin:0;
  transform:translate3d(3px, 4px, 0);
  filter:blur(2px);
  opacity:.3;
  pointer-events:none;
  user-select:none;
}

/* ── 6 · Scroll con inercia ─────────────────────────────────────────────── */
/* Mientras la inercia por rueda está activa, el desplazamiento suave nativo
   estorba: se apaga para que no se apilen dos animaciones. */
.mv-inercia{scroll-behavior:auto}

/* ── 7 · Preferencia del sistema ────────────────────────────────────────── */
/* prefers-reduced-motion apunta a los disparadores vestibulares: movimiento,
   parallax, escala, inercia. Un fundido de opacidad no lo es. Por eso acá se
   reduce, no se apaga: motion.js además omite la inercia y el eco. */
@media (prefers-reduced-motion:reduce){
  /* Se van los desplazamientos, el recorte, la inercia y el eco.
     Queda un fundido de opacidad corto, que no dispara vértigo, para que la
     página no aparezca de golpe. Reducir el movimiento no es apagar la vida. */
  .mv .mv-reveal,
  .mv .mv-clip{
    transform:none !important;
    clip-path:none !important;
    transition:opacity .3s linear !important;
    transition-delay:calc(var(--mv-i, 0) * .04s) !important;
  }
  .mv .mv-reveal.mv-in,
  .mv .mv-clip.mv-in{opacity:1 !important}

  .mv .mv-eco__copia{display:none}
  .mv .mv-guia{display:none}
  .galeria .escena{transition:none}
}