/* ===== Efectos de movimiento (se apagan con [data-motion="off"]) ===== */

/* 5. Botones magneticos: retorno suave al soltar */
.magnetic { transition: transform .25s cubic-bezier(.16, 1, .3, 1); }

/* 2/8. Subrayado que se dibuja bajo los titulos al entrar en viewport */
.loom-title::after, #pricing .display::after {
  content: ''; display: block; height: 2px; width: 0; margin-top: .16em; background: var(--red);
  transition: width .85s var(--ease) .35s; }
.is-in .loom-title::after, .is-in #pricing .display::after { width: 68px; }

/* 9. Titulares linea a linea: cada linea sube dentro de su mascara (las construye js/lines.js).
   Solo existe con motion on; con off el titular ni se trocea. */
[data-motion="on"] .lmask { display: block; overflow: hidden; }
[data-motion="on"] .lmask .lline { display: block; transform: translateY(112%); transition: transform .95s var(--ease); }
[data-motion="on"] .is-in .lmask .lline { transform: translateY(0); }

/* 6. Las cuatro manos del Loom se tejen en secuencia (stagger mas marcado, una a una) */
[data-motion="on"] .hands .hand[data-d="1"] { transition-delay: .15s; }
[data-motion="on"] .hands .hand[data-d="2"] { transition-delay: .38s; }
[data-motion="on"] .hands .hand[data-d="3"] { transition-delay: .61s; }
[data-motion="on"] .hands .hand[data-d="4"] { transition-delay: .84s; }

/* ===== MOTION OFF: estado estatico (accesible), sigue la preferencia del sistema ===== */
[data-motion="off"] .magnetic { transition: none; }
[data-motion="off"] .loom-title::after, [data-motion="off"] #pricing .display::after { transition: none; width: 68px; }
[data-motion="off"] .rise { opacity: 1 !important; transform: none !important; transition: none !important; }
[data-motion="off"] .is-in .head-wink,
[data-motion="off"] .is-in [class*="dood-"] { animation: none !important; }
[data-motion="off"] .panel.active { animation: none; }