/* ==========================================================================
   OMNI Biologics — motion.css
   Polished motion engine (CSS half). Pages add motion by MARKUP ONLY via
   data-attributes; never write motion JS in a page. motion-boot.js sets
   html.motion-ready, which is the ONLY thing that hides reveal elements —
   so with no JS (or reduced-motion) all content is fully visible.
   Animate transform/opacity ONLY. Quiet + intentional.
   ========================================================================== */

:root{
  --m-ease:cubic-bezier(.16,.84,.44,1);
  --m-dur:.8s;
  --m-rise:16px;
}

/* ---- base: reveal elements only hide once the engine is live ---- */
html.motion-ready [data-reveal]{
  opacity:0;
  transform:translateY(var(--m-rise));
  will-change:opacity,transform;
  transition:opacity var(--m-dur) var(--m-ease),transform var(--m-dur) var(--m-ease);
}
html.motion-ready [data-reveal].is-in{
  opacity:1;
  transform:none;
}

/* ---- staggered children: parent[data-stagger] > [data-reveal] ---- */
/* per-child delay applied inline by the engine via --m-delay */
html.motion-ready [data-reveal]{transition-delay:var(--m-delay,0s)}

/* ---- hero headline line clip-reveal ---- */
html.motion-ready [data-text-reveal]{display:block}
html.motion-ready [data-text-reveal] .m-line{display:block;overflow:hidden}
html.motion-ready [data-text-reveal] .m-line > span{
  display:block;
  transform:translateY(110%);
  transition:transform .9s var(--m-ease);
  transition-delay:var(--m-delay,0s);
  will-change:transform;
}
html.motion-ready [data-text-reveal].is-in .m-line > span{transform:none}

/* ---- magnetic buttons: engine sets transform; keep it smooth ---- */
html.motion-ready [data-magnetic]{transition:transform .35s var(--m-ease)}

/* ---- parallax: engine writes transform via rAF; no transition (smooth already) ---- */
html.motion-ready [data-parallax]{will-change:transform}

/* ---- counters: no visual state needed; engine writes textContent ---- */

/* ==================== HARD reduced-motion kill =====================
   If the user prefers reduced motion the engine no-ops, but guard in CSS
   too so nothing is ever stuck hidden or animating.                  */
@media (prefers-reduced-motion:reduce){
  html.motion-ready [data-reveal],
  html.motion-ready [data-text-reveal] .m-line > span,
  html.motion-ready [data-magnetic],
  html.motion-ready [data-parallax]{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}