/*
  motion.css — JOHNNYTECH
  Soporte de motion.js (servicios + consultoría).
  Regla madre: "¿Pieter Levels / Naval lo dejarían?" — CERO glow, CERO neon.
  Paleta: crema #f7f5f0 (--canvas) · indigo #4338ca (--accent) · tinta #16150f (--ink) · --muted
*/

/* ─────────────────────────────────────────────────────
   1. REVEAL — .rv OCULTO POR DEFECTO
      Se aplica antes del primer paint → SIN flash
      (nada de "aparece, se esconde, y recién ahí anima").
      GSAP lo revela al entrar al viewport.
      El contenido NUNCA queda tapado gracias a 3 redes:
        · JS off        → <noscript> en el <head> de la página
        · GSAP no carga → html.motion-off (lo agrega motion.js)
        · reduced-motion→ media query de abajo
───────────────────────────────────────────────────── */
.rv {
  opacity: 0;
  transform: translateY(24px);
  will-change: opacity, transform;
}
html.motion-off .rv {
  opacity: 1 !important;
  transform: none !important;
  will-change: auto;
}

/* ─────────────────────────────────────────────────────
   2. PAINT — palabras de .paint
      De var(--muted) a var(--ink) con scrub (lo hace GSAP).
      Spans inline: espaciado y wrap naturales.
───────────────────────────────────────────────────── */
.paint-word {
  color: var(--muted, #9c9991);
}

/* ─────────────────────────────────────────────────────
   3. PIN — contenedor con [data-pin]
      El pin lo maneja ScrollTrigger; sin CSS de posición.
───────────────────────────────────────────────────── */
[data-pin] { overflow: visible; }

/* ─────────────────────────────────────────────────────
   4. prefers-reduced-motion
      Nunca tapar contenido a quien pidió menos movimiento.
───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rv {
    opacity: 1 !important;
    transform: none !important;
    will-change: auto;
  }
  .paint-word {
    color: var(--ink, #16150f) !important;
  }
}
