/* ==========================================================================
   Motor de movimiento · capa CSS
   Primitivas que se activan con data-m="…" (ver motor.js). Todo lee los
   tokens --motion-* del sistema. Sin JS, el contenido se ve igual (estado final).
   ========================================================================== */

:root {
  --motion-rapido: 140ms;
  --motion-base: 260ms;
  --motion-lento: 700ms;
  --motion-entrada: cubic-bezier(.16, 1, .3, 1);
  --motion-salida: cubic-bezier(.7, 0, .84, 0);
  --motion-estandar: cubic-bezier(.2, .7, .2, 1);
  --motion-cascada: 70ms;
  --motion-distancia: 24px;
}

/* ---------- Aparecer (sólo se oculta si el motor está activo) ---------- */
.m-activo [data-m~="aparecer"] {
  opacity: 0;
  transform: translate3d(0, var(--motion-distancia), 0);
  transition:
    opacity var(--motion-lento) var(--motion-entrada),
    transform var(--motion-lento) var(--motion-entrada),
    filter var(--motion-lento) var(--motion-entrada),
    clip-path var(--motion-lento) var(--motion-entrada);
  transition-delay: var(--m-retraso, 0ms);
}
.m-activo [data-m~="aparecer"][data-m-efecto="desenfoque"] { filter: blur(10px); transform: translate3d(0, calc(var(--motion-distancia) / 2), 0); }
.m-activo [data-m~="aparecer"][data-m-efecto="escala"] { transform: scale(.94); }
.m-activo [data-m~="aparecer"][data-m-efecto="cortina"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); }
.m-activo [data-m~="aparecer"][data-m-efecto="lateral"] { transform: translate3d(calc(var(--motion-distancia) * -1.5), 0, 0); }
.m-activo [data-m~="aparecer"].m-visible { opacity: 1; transform: none; filter: none; clip-path: inset(0 0 0 0); }

/* ---------- Texto palabra por palabra ---------- */
.m-palabra { display: inline-block; overflow: clip; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.m-palabra > span { display: inline-block; }
.m-activo [data-m~="texto"] .m-palabra > span {
  transform: translate3d(0, 105%, 0);
  transition: transform var(--motion-lento) var(--motion-entrada);
  transition-delay: calc(var(--m-i, 0) * var(--motion-cascada) + var(--m-retraso, 0ms));
}
.m-activo [data-m~="texto"].m-visible .m-palabra > span { transform: none; }

/* ---------- Magnético, inclinar, foco de cursor ---------- */
[data-m~="magnetico"] { transition: transform var(--motion-base) var(--motion-estandar); will-change: transform; }
[data-m~="inclinar"] { transform-style: preserve-3d; transition: transform var(--motion-base) var(--motion-estandar); will-change: transform; }
[data-m~="foco-cursor"] { position: relative; isolation: isolate; }
[data-m~="foco-cursor"]::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), color-mix(in oklab, var(--color-acento) 14%, transparent), transparent 70%);
  opacity: 0; transition: opacity var(--motion-base) var(--motion-estandar);
}
[data-m~="foco-cursor"]:hover::after { opacity: 1; }

/* ---------- Progreso de lectura ---------- */
[data-m~="progreso"] { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; background: var(--color-acento); transform-origin: 0 50%; transform: scaleX(var(--m-progreso, 0)); }
@supports (animation-timeline: scroll()) {
  [data-m~="progreso"] { animation: m-progreso linear both; animation-timeline: scroll(root); }
  @keyframes m-progreso { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* ---------- Cabecera que se esconde al bajar ---------- */
[data-m~="cabecera"] { position: sticky; top: 0; z-index: 50; transition: transform var(--motion-base) var(--motion-estandar), background var(--motion-base), box-shadow var(--motion-base); }
[data-m~="cabecera"].m-oculta { transform: translateY(-100%); }
[data-m~="cabecera"].m-despegada { background: color-mix(in oklab, var(--color-lienzo) 82%, transparent); backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 1px 0 var(--color-borde); }

/* ---------- Cinta (marquee) ---------- */
[data-m~="cinta"] { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.m-cinta-pista { display: flex; width: max-content; gap: var(--m-hueco, 48px); animation: m-cinta var(--m-duracion, 40s) linear infinite; }
[data-m~="cinta"]:hover .m-cinta-pista { animation-play-state: paused; }
@keyframes m-cinta { to { transform: translateX(calc(-50% - var(--m-hueco, 48px) / 2)); } }

/* ---------- Scroll-driven nativo (sin JS) para elementos decorativos ---------- */
@supports (animation-timeline: view()) {
  [data-m~="deriva"] { animation: m-deriva linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  @keyframes m-deriva { from { transform: translateY(calc(var(--m-velocidad, 1) * 40px)); } to { transform: translateY(calc(var(--m-velocidad, 1) * -40px)); } }
}

/* ---------- Transición de tema (View Transitions) ---------- */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: m-tema var(--motion-lento) var(--motion-entrada); }
@keyframes m-tema { from { clip-path: circle(0 at var(--m-tx, 50%) var(--m-ty, 0%)); } to { clip-path: circle(150% at var(--m-tx, 50%) var(--m-ty, 0%)); } }

/* ---------- Lienzos generativos ---------- */
canvas[data-lienzo] { display: block; width: 100%; height: 100%; }
.m-lienzo-capa { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* ---------- Imagen ---------- */
[data-imagen~="grano"] { position: relative; isolation: isolate; }
[data-imagen~="grano"]::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: var(--m-grano, .18); mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.m-activo [data-imagen~="revelar"] { clip-path: inset(12% 12% 12% 12% round var(--radius-tarjeta, 8px)); transition: clip-path 1.1s var(--motion-entrada); }
.m-activo [data-imagen~="revelar"] img, .m-activo [data-imagen~="revelar"] canvas { transform: scale(1.15); transition: transform 1.4s var(--motion-entrada); }
.m-activo [data-imagen~="revelar"].m-visible { clip-path: inset(0 0 0 0 round var(--radius-tarjeta, 8px)); }
.m-activo [data-imagen~="revelar"].m-visible img, .m-activo [data-imagen~="revelar"].m-visible canvas { transform: none; }

/* ---------- Gráficos ---------- */
[data-grafico] svg { display: block; width: 100%; height: auto; overflow: visible; }
.g-barra { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); transition: transform var(--motion-lento) var(--motion-entrada); transition-delay: calc(var(--g-i, 0) * var(--motion-cascada)); }
.g-trazo { transition: stroke-dashoffset 1.4s var(--motion-entrada); }
.g-barra-h { transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(0); transition: transform var(--motion-lento) var(--motion-entrada); transition-delay: calc(var(--g-i, 0) * var(--motion-cascada)); }
.m-visible .g-barra, .g-sin-motor .g-barra, .m-visible .g-barra-h, .g-sin-motor .g-barra-h { transform: none; }
.g-punto { opacity: 0; transition: opacity var(--motion-base) var(--motion-estandar); transition-delay: calc(900ms + var(--g-i, 0) * 40ms); }
.m-visible .g-punto, .g-sin-motor .g-punto { opacity: 1; }
.g-tip { position: absolute; pointer-events: none; padding: 6px 10px; border-radius: 4px; font: 500 12px/1.3 var(--font-mono, monospace); background: var(--color-tinta); color: var(--color-lienzo); transform: translate(-50%, calc(-100% - 10px)); opacity: 0; transition: opacity var(--motion-rapido); white-space: nowrap; z-index: 5; }
.g-tip.m-visible { opacity: 1; }
.solo-lector { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Accesibilidad: movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .m-cinta-pista { animation: none; }
}