/* ============================================================
   ONDERMAX — /staqs motion (SCOPED, per-page enhancement)
   Linked PER-PAGE on /staqs ONLY, AFTER styles.css. Mirrors how /home
   owns home.css and /patches owns patches.css — the per-page
   blast-radius firewall (architect guardrail G1): styles.css is shared
   with the LOCKED staqs_catalog funnel and is never edited for motion.

   CSS + IntersectionObserver ONLY — /staqs carries NO GSAP (locked).
   Colour tokens cascade from tokens.css/styles.css; the three MOTION
   tokens below are byte-identical to home.css/patches.css/consult.css
   so the whole journey shares one rhythm.
   ============================================================ */
:root{
  /* motion (staqs_funnel signature; reduced-motion-safe) */
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --reveal-dur:.6s;
  --trace-dur:1.1s;
}

/* ---- reveal-up: progressive enhancement ----
   Default state below is the JS-ON pre-reveal (hidden). The no-JS /
   reduced-motion floors (below + the <noscript> head block) force the
   FINAL state, so content is ALWAYS present without JS — staqs.js only
   REMOVES visibility then reveals it (guardrail G4/G5). Same contract
   as home.css / patches.css. */
.reveal,[data-reveal-group] > *{opacity:0;transform:translateY(16px);transition:opacity var(--reveal-dur) var(--ease-out),transform var(--reveal-dur) var(--ease-out)}
.reveal[data-delay="1"],[data-reveal-group] > *:nth-child(2){transition-delay:.08s}
.reveal[data-delay="2"],[data-reveal-group] > *:nth-child(3){transition-delay:.16s}
.reveal[data-delay="3"],[data-reveal-group] > *:nth-child(4){transition-delay:.24s}
.reveal.is-in,[data-reveal-group].is-in > *{opacity:1;transform:none}

/* ---- hero lineup settle-in (load, CSS only) ----
   The four-carton render eases up once on load. The keyframes define
   the FROM state, so the element's natural state IS the final one:
   reduced-motion (animation:none, styles.css:33), JS-off and any
   animation failure all land on the fully visible render.
   opacity+transform only — CLS 0. */
@keyframes staqs-settle{from{opacity:0;transform:translateY(14px)}}
.hero-settle{animation:staqs-settle 1.2s var(--ease-out) backwards}

/* ---- batch-trace ruler: self-draws on scroll into view ----
   The cm ruler is gradient-built (no SVG stroke to dash), so the
   "draw" is a paper-coloured cover that collapses toward the reading
   end (transform:scaleX only — CLS 0) when staqs.js adds .is-drawn.
   The ruler's top/bottom hairlines stay visible while the ticks draw
   in — the instrument exists, the calibration arrives. The RTL origin
   flip (draws R->L on /ar) lives in arabic-rtl.css (G2 convention). */
.cm-ruler{position:relative}
.cm-ruler::after{content:"";position:absolute;inset:0;background:var(--paper);transform-origin:right center;transition:transform var(--trace-dur) var(--ease-out)}
.cm-ruler.is-drawn::after{transform:scaleX(0)}

/* ---- specimen spring hover ----
   The scale-1.02 spring + tilt live in micro.css ([data-tilt] +
   .specimen[data-tilt]{--t-scale:1.02}); the lift/shadow is the
   styles.css .specimen:hover affordance. Nothing restated here. */

/* ---- reduced-motion + no-IO floor (FIRST gate) ----
   Everything at its FINAL state: reveals in, ruler drawn, render
   settled. staqs.js mirrors this (settleFinal) before observers
   attach, so there is no flash-then-freeze. */
@media (prefers-reduced-motion:reduce){
  .reveal,[data-reveal-group] > *{opacity:1!important;transform:none!important;transition:none!important}
  .cm-ruler::after{content:none!important}
  .hero-settle{animation:none!important}
}