/* ============================================================
   ONDERMAX — micro.css: site-wide micro-physics (Motion Tier 1)
   Linked PER PAGE after the page's scoped sheet (Architecture A — no
   global bundle; the LOCKED staqs_catalog funnel does NOT link it).
   Companion to micro.js: the JS only writes CSS custom props /
   classes, this sheet owns every visual. transform/opacity only —
   zero layout properties, CLS 0. styles.css/tokens.css UNTOUCHED (G1).
   ============================================================ */
:root{
  --m-ease:cubic-bezier(.22,.61,.36,1);
  --m-spring:cubic-bezier(.34,1.56,.64,1); /* slight overshoot = the settle */
}

/* ---- CTA magnet (micro.js writes --mx/--my; <=6px) ----
   Also declared in home.css/consult.css (pre-Tier-1, identical values);
   restated here so the /staqs + /patches magnets work standalone. */
.cta-magnet{transform:translate(var(--mx,0),var(--my,0));transition:transform .18s var(--m-ease)}

/* ---- card tilt (micro.js writes --rx/--ry; <=3deg) ----
   :hover re-states each card family's existing lift/scale so the tilt
   COMPOSES with the affordance styles.css already ships (transform is
   a single property — it cannot be additively merged, so the hover
   lift value is repeated here). hover+fine-pointer media only: on
   touch this block is inert and the styles.css :hover/:active
   behaviour stands (graceful absence). box-shadows are untouched. */
@media (hover:hover) and (pointer:fine){
  [data-tilt]:hover{transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--t-lift,-3px)) scale(var(--t-scale,1))}
  .benefit-card[data-tilt]{--t-lift:-4px} /* styles.css lifts range cards 4px */
  .specimen[data-tilt]{--t-scale:1.02}    /* /staqs spring hover: scale 1.02 */
}

/* ---- word-level heading stagger ([data-split]; .is-split by micro.js) ----
   The hidden state exists ONLY once JS has split (is-split), so no-JS /
   reduced-motion = intact, fully visible heading (no noscript needed).
   translateY only — RTL-safe by construction (word ORDER is DOM order,
   which the bidi algorithm still lays out correctly). */
[data-split].is-split .w{display:inline-block;opacity:0;transform:translateY(.35em);transition:opacity .5s var(--m-ease),transform .55s var(--m-spring);transition-delay:calc(var(--wi,0)*70ms)}
[data-split].is-in .w{opacity:1;transform:none}

/* ---- reduced-motion floor: fully legible static state ----
   micro.js already returns before wiring anything under reduce; this is
   the belt-and-braces CSS floor if the preference flips mid-visit.
   Tilt vars are FORCED to 0 (author !important beats the inline props
   micro.js may already have written) while the plain lift/scale hover
   AFFORDANCE is kept — it snaps (styles.css kills transitions), which
   matches the pre-Tier-1 behaviour of these cards. */
@media (prefers-reduced-motion:reduce){
  .cta-magnet{transform:none!important;transition:none!important}
  [data-tilt]{--rx:0deg!important;--ry:0deg!important}
  [data-split].is-split .w{opacity:1!important;transform:none!important;transition:none!important}
}