/* ============================================================
   PLEASEPOINT 2026 — MOVIMIENTO

   Cómo se mueve cada gesto. Quién lo recibe, y cuándo, lo decide
   motion.js, escena a escena y según lo que cuenta cada bloque.

   Principios:
   · Se compone por escenas, no por piezas: una escena entra entera
     cuando llega a la altura de lectura, con su coreografía. Así
     también con scroll lento se ve la composición.
   · Vocabulario corto y usado con intención: subir, entrar por un
     lado, aparecer, crecer, barrer, trazar una regla, dibujar un
     diagrama, tachar. Ningún bloque los usa todos.
   · Solo transform y opacity (y el trazo del SVG). Nada en bucle.
     Una sola vez.
   · Sin JavaScript no se oculta nada: las clases mv- las pone el
     script. Con prefers-reduced-motion, todo en su sitio.
   ============================================================ */

:root{
  --mv-ease:cubic-bezier(.22,.61,.2,1);
  --mv-dur:.9s;
  --mv-y:26px;
  --mv-x:36px;
}
@media (max-width:759px){
  :root{ --mv-y:16px; --mv-x:22px; --mv-dur:.7s; }
}

/* ------------------------------------------------------------
   Estado de espera. Las transiciones se encienden después de
   marcar (main.mv-ready) para que ocultar no anime nada.
   ------------------------------------------------------------ */
.mv{ opacity:0; }
.mv-up{    transform:translateY(var(--mv-y)); }
.mv-down{  transform:translateY(calc(var(--mv-y) * -.7)); }
.mv-left{  transform:translateX(calc(var(--mv-x) * -1)); }
.mv-right{ transform:translateX(var(--mv-x)); }
.mv-scale{ transform:scale(.94); transform-origin:center; }
.mv-vline{ transform:scaleY(0); transform-origin:center top; }
.mv-hline{ transform:scaleX(0); transform-origin:left center; }
/* El barrido no atenúa: el texto está y se descubre de izquierda a
   derecha, como una línea que se escribe. Lo hace un velo del color
   del fondo que se retira hacia la derecha: es solo un transform,
   así que va por el compositor y no repinta el texto en cada
   fotograma (un clip-path animado sí lo hacía, y se notaba al hacer
   scroll). El velo deja aire arriba y abajo para los trazos que
   sobresalen de la caja. */
.mv.mv-wipe{ opacity:1; position:relative; }
.mv.mv-wipe::after{
  content:""; position:absolute; pointer-events:none;
  top:-.25em; bottom:-.25em; left:-.1em; right:-.1em;
  background:var(--mv-bg,var(--paper));
  transform:scaleX(1); transform-origin:right center;
}
.panel .mv-wipe{ --mv-bg:var(--panel); }

.mv-ready .mv{
  transition:
    opacity var(--mv-dur) cubic-bezier(.2,.5,.3,1) var(--mv-d,0s),
    transform var(--mv-dur) var(--mv-ease) var(--mv-d,0s);
}
.mv-ready .mv-wipe::after{ transition:transform 1.15s cubic-bezier(.4,0,.2,1) var(--mv-d,0s); }
.mv-ready .mv-vline,
.mv-ready .mv-hline{ transition-duration:1s; }

.mv.mv-in{ opacity:1; transform:none; }
.mv.mv-wipe.mv-in::after{ transform:scaleX(0); }

/* Lo que ya vive atenuado vuelve a su opacidad propia, no a 1. */
.quote-mark.mv.mv-in{ opacity:.28; }

/* ------------------------------------------------------------
   Reglas hairline que se trazan. El borde real se apaga y lo
   dibuja un pseudoelemento; sin la clase, el borde queda como
   estaba.
   ------------------------------------------------------------ */
.mv-rule{ position:relative; border-top-color:transparent !important; }
.mv-rule::before{
  content:""; position:absolute; left:0; right:0; top:-1px; height:1px;
  background:var(--mv-rule-c,var(--line));
  transform:scaleX(0); transform-origin:left center;
}
.mv-ready .mv-rule::before{ transition:transform 1.1s var(--mv-ease) var(--mv-d,0s); }
.mv-rule.mv-in::before{ transform:none; }
.panel .mv-rule{ --mv-rule-c:var(--panel-line); }
.day-result.mv-rule{ --mv-rule-c:var(--ink); }

/* ------------------------------------------------------------
   La escalera de "lo que cambia" (páginas de decisor). Cada punto
   cuelga de una regla vertical y baja un peldaño respecto al
   anterior. Se construye en ese orden: el peldaño se traza hacia la
   derecha, la regla baja y entonces llega el texto. El borde real se
   apaga y lo dibuja un pseudoelemento; el peldaño ya era uno.
   ------------------------------------------------------------ */
.mv-stair{ border-left-color:transparent !important; }
.mv-stair::after{
  content:""; position:absolute; left:-1px; top:0; bottom:0; width:1px;
  background:var(--line); transform:scaleY(0); transform-origin:center top;
}
.mv-stair + .mv-stair::before{ transform:scaleX(0); transform-origin:left center; }
.mv-ready .mv-stair::after{ transition:transform .55s var(--mv-ease) calc(var(--mv-d,0s) + .35s); }
.mv-ready .mv-stair + .mv-stair::before{ transition:transform .35s var(--mv-ease) var(--mv-d,0s); }
.mv-stair.mv-in::after{ transform:none; }
.mv-stair + .mv-stair.mv-in::before{ transform:none; }

/* ------------------------------------------------------------
   El diagrama que se dibuja. motion.js mide cada trazo (--len) y
   le da su turno (--d) por posición de lectura; los rellenos y los
   textos aparecen después y la pieza en acento cierra.
   Se anima el patrón de guiones ("0 L" → "L 0") y no el
   desplazamiento: Chromium enseña un tramo del rectángulo antes de
   tiempo con el desplazamiento.
   ------------------------------------------------------------ */
svg.mv-draw .mv-s{ stroke-dasharray:0 var(--len); }
svg.mv-draw .mv-f{ opacity:0; }
.mv-ready svg.mv-draw .mv-s{ transition:stroke-dasharray .9s var(--mv-ease) var(--d,0s); }
.mv-ready svg.mv-draw .mv-f{ transition:opacity .55s ease var(--d,0s); }
svg.mv-draw.mv-in .mv-s{ stroke-dasharray:var(--len) 0; }
svg.mv-draw.mv-in .mv-f{ opacity:1; }

/* ------------------------------------------------------------
   El tachado del antes/después se enciende: primero se lee lo
   que había, después cae.
   ------------------------------------------------------------ */
.is-gone.mv-strike{ color:var(--ink-2); text-decoration-color:transparent; }
.mv-ready .is-gone.mv-strike{
  transition:color .6s ease var(--mv-d,0s), text-decoration-color .6s ease var(--mv-d,0s);
}
.is-gone.mv-strike.mv-in{ color:var(--ink-3); text-decoration-color:var(--point-ink); }

/* ------------------------------------------------------------
   MOVIMIENTO REDUCIDO — todo en su estado final, sin transición
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .mv, .mv.mv-wipe{ opacity:1; transform:none; transition:none; }
  .mv.mv-wipe::after{ display:none; }
  .mv-rule::before{ transform:none; transition:none; }
  .mv-stair::after, .mv-stair + .mv-stair::before{ transform:none; transition:none; }
  svg.mv-draw .mv-s{ stroke-dasharray:none; transition:none; }
  svg.mv-draw .mv-f{ opacity:1; transition:none; }
  .is-gone.mv-strike{ color:var(--ink-3); text-decoration-color:var(--point-ink); transition:none; }
}