/* ============================================================
   Jas Doit — Motion System (reutilizable)
   API: [data-reveal] · [data-reveal-delay] · [data-parallax]
        video[data-loop-pingpong] · .hover-lift · .btn-magnetic
   Easing global: cubic-bezier(.22,1,.36,1)
   Ignora [data-reveal="1"] (lo maneja el sistema propio de la página).
   ============================================================ */
:root { --m-ease: cubic-bezier(.22, 1, .36, 1); }

/* ---- Reveal on scroll (fade-up + fade-in) ---- */
[data-reveal].m-on {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--m-ease), transform .9s var(--m-ease);
  will-change: opacity, transform;
}
[data-reveal].m-on.in-view { opacity: 1; transform: none; }

/* ---- Parallax ---- */
[data-parallax] { will-change: transform; }

/* ---- Micro-interacciones ---- */
.hover-lift { transition: transform .35s var(--m-ease), box-shadow .35s var(--m-ease); }
.hover-lift:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(0, 0, 0, .42); }

.btn-magnetic { transition: transform .18s ease-out, box-shadow .35s var(--m-ease); will-change: transform; }

/* ---- Reduced motion: todo visible y estático ---- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal].m-on { opacity: 1 !important; transform: none !important; transition: none !important; }
  [data-parallax] { transform: none !important; }
  .hover-lift, .btn-magnetic { transition: none !important; }
  .hover-lift:hover { transform: none !important; }
}