/* ── PIEZA 5 · CAPA DE MOVIMIENTO ───────────────────────────────
   Regla: el movimiento tiene que decir algo que el texto no dice.
   Nada entra "porque queda lindo". Cada firma es la tesis de su
   dirección puesta en tiempo:
     cuaderno  → algo se pasa en limpio (se tacha, se reordena)
     dia       → el día avanza (el reloj corre, los mensajes llegan)
     titular   → el titular se declara (líneas que suben, cifras que suben)
     deck      → cada pantalla se planta al llegar
     editorial → el documento se lee (bloques que aparecen al paso)
     ficha     → la ficha se imprime (renglones, sin movimiento blando)
   El estado oculto lo pone el JS (atributo data-mv): sin JS, se ve todo. */

/* Escape cuando el documento no puede animar (pestaña de fondo, iframe
   oculto, prerender): ahí las transiciones CSS no avanzan y todo lo que
   se esconde para revelarse queda congelado en opacity:0 para siempre.
   El atributo lo pone pieza5-reveal.js. El estado final del revelado
   nunca puede depender de que una transición llegue a destino. */
html[data-mv-off] [data-mv],html[data-mv-off] .mv-ln>span{opacity:1!important;transform:none!important;mask-size:100% 100%!important;transition:none!important}
[data-mv]{opacity:0;transform:translateY(var(--mv-y,14px));transition:opacity var(--mv-d,620ms) cubic-bezier(.2,.7,.2,1) calc(var(--i,0)*var(--mv-s,70ms)),transform var(--mv-d,620ms) cubic-bezier(.2,.7,.2,1) calc(var(--i,0)*var(--mv-s,70ms));will-change:opacity,transform}
[data-mv].mv-on{opacity:1;transform:none}
/* El barrido va por mask-size, no por clip-path: un clip a área cero hace que
   el IntersectionObserver nunca vea el elemento y el revelado no dispara. */
[data-mv="wipe"]{opacity:1;transform:none;-webkit-mask-image:linear-gradient(90deg,#000,#000);mask-image:linear-gradient(90deg,#000,#000);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:0% 100%;mask-size:0% 100%;transition:-webkit-mask-size var(--mv-d,820ms) cubic-bezier(.22,.7,.2,1) calc(var(--i,0)*var(--mv-s,70ms)),mask-size var(--mv-d,820ms) cubic-bezier(.22,.7,.2,1) calc(var(--i,0)*var(--mv-s,70ms))}
[data-mv="wipe"].mv-on{-webkit-mask-size:100% 100%;mask-size:100% 100%}
[data-mv="side"]{transform:translateX(var(--mv-x,-18px))}
[data-mv="flat"]{--mv-y:0px;--mv-d:420ms}

/* progreso de lectura: la única pieza de chrome que agrego */
.mv-prog{position:fixed;left:0;right:0;bottom:0;height:2px;background:rgba(20,18,16,.10);z-index:99998;pointer-events:none}
.mv-prog i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#6C63FF,#1DB954)}

/* ── cuaderno: la lista se tacha sola y el jueves se ordena ── */
body[data-motion="cuaderno"] .li.tach{text-decoration:none;color:var(--c300);transition:color 500ms ease}
body[data-motion="cuaderno"] .li.tach.mv-done{color:var(--c500)}
.mv-strike{position:relative}
.mv-strike::after{content:'';position:absolute;left:-2px;right:-3px;top:53%;height:1.5px;background:rgba(180,57,46,.6);transform:scaleX(0);transform-origin:left;transition:transform 560ms cubic-bezier(.35,0,.15,1)}
.mv-strike.mv-on::after{transform:scaleX(1)}
body[data-motion="cuaderno"] .li.dud b{position:relative}
body[data-motion="cuaderno"] .li.dud.mv-ask b::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:1.5px;background:currentColor;opacity:.45;animation:mvAsk 1.6s cubic-bezier(.4,0,.2,1) 2}
@keyframes mvAsk{0%,100%{transform:scaleX(0);opacity:0}30%,70%{transform:scaleX(1);opacity:.45}}
body[data-motion="cuaderno"] .cruce i{transform:scaleY(0);transform-origin:top;transition:transform 420ms cubic-bezier(.2,.7,.2,1)}
body[data-motion="cuaderno"] .cruce.mv-on i{transform:scaleY(1)}
body[data-motion="cuaderno"] .cruce.mv-on i:last-of-type{transition-delay:520ms}
body[data-motion="cuaderno"] .cruce span{opacity:0;transition:opacity 460ms ease 260ms}
body[data-motion="cuaderno"] .cruce.mv-on span{opacity:1}
.mv-replay{display:inline-flex;align-items:center;gap:7px;margin-top:16px;min-height:44px;padding:0 14px;border:1px solid var(--rule,#D8D5D1);border-radius:999px;background:transparent;color:var(--mute,#3E3A37);font-family:var(--mono,monospace);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:border-color 180ms ease,color 180ms ease}
.mv-replay:hover{border-color:var(--v,#4A43CC);color:var(--v,#4A43CC)}

/* ── el día: el reloj de la nav corre con el scroll ── */
body[data-motion="dia"] .reloj{font-variant-numeric:tabular-nums;transition:color 240ms ease}
body[data-motion="dia"] .reloj.mv-tick{color:var(--v,#6C63FF)}
body[data-motion="dia"] [data-mv].bub{--mv-x:-22px;--mv-y:6px}
body[data-motion="dia"] [data-mv].bub.mine{--mv-x:22px}
body[data-motion="dia"] .bub{transform:translate(var(--mv-x,0),var(--mv-y,0))}
body[data-motion="dia"] .bub.mv-on{transform:none}
.mv-typing{display:inline-flex;gap:4px;align-items:center;height:9px}
.mv-typing i{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.35;animation:mvDot 1.1s infinite}
.mv-typing i:nth-child(2){animation-delay:.16s}.mv-typing i:nth-child(3){animation-delay:.32s}
@keyframes mvDot{0%,100%{transform:translateY(0);opacity:.3}40%{transform:translateY(-3px);opacity:.9}}

/* ── el titular: líneas que se declaran de abajo hacia arriba ── */
/* La ventana de recorte necesita aire ARRIBA: con line-height .86 la
   caja de línea es más baja que el glifo con tilde y «Dejá» perdía el
   acento. El margen negativo devuelve el aire sin mover el texto. */
.mv-ln{display:block;overflow:hidden;padding-top:.18em;margin-top:-.18em;padding-bottom:.02em}
.mv-ln>span{display:block;transform:translateY(105%);transition:transform 880ms cubic-bezier(.16,.84,.24,1) calc(var(--i,0)*90ms)}
.mv-ln.mv-on>span{transform:none}
.mv-count{font-variant-numeric:tabular-nums}

/* ── deck: cada pantalla se planta y se retira ── */
body[data-motion="deck"] .scr [data-mv]{--mv-y:22px;--mv-d:680ms;--mv-s:80ms}

/* ── ficha: renglones, no cortinas ── */
body[data-motion="ficha"] [data-mv]{--mv-y:5px;--mv-d:380ms;--mv-s:38ms}
body[data-motion="ficha"] .dl dt[data-mv]{--mv-y:0px}

@media (prefers-reduced-motion:reduce){
  [data-mv],[data-mv].mv-on{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  [data-mv="wipe"]{-webkit-mask-size:100% 100%!important;mask-size:100% 100%!important}
  .mv-ln>span{transform:none!important;transition:none!important}
  .mv-strike::after{transform:scaleX(1)!important;transition:none!important}
  body[data-motion="cuaderno"] .cruce i{transform:scaleY(1)!important}
  body[data-motion="cuaderno"] .cruce span{opacity:1!important}
  body[data-motion="cuaderno"] .li.dud.mv-ask b::after{animation:none}
  .mv-typing i{animation:none}
  .mv-prog i{transition:none}
}