/* ============================================================
   ONDERMAX — /patches motion (SCOPED, per-page enhancement)
   Linked PER-PAGE on /patches ONLY, AFTER styles.css.
   WHY a separate sheet: styles.css is SHARED by /home, /staqs,
   /patches AND the LOCKED staqs_catalog funnel — adding /patches
   motion there would leak onto the frozen signature. This sheet
   is the /patches-only blast-radius firewall (mirrors how /home
   owns home.css and /consult owns consult.css). Architect guardrail G1.

   Colour tokens (--ink/--line/--muted/--accent + .theme-patches
   overrides) come from tokens.css/styles.css (loaded first) and
   cascade here for free. We define ONLY the three MOTION tokens,
   byte-identical to home.css / consult.css so the whole journey
   shares one rhythm (the self-drawing trace + calm reveal-up).
   ============================================================ */
: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 — patches.js
   only REMOVES visibility then reveals it, it never gates content
   (guardrail G4/G5). Same contract as home.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}

/* ---- self-drawing delivery spine (the journey signature gesture) ----
   Same contract as home.css §trace: the spine path carries a
   stroke-dasharray == its normalised length (pathLength="100") and
   offsets it out of view; the .is-drawn toggle eases the offset to 0
   (the molecule "travels" through the patch into the skin). Decorative
   reinforcement of the cross-section schematic — fully present static. */
.patch-trace .trace__path{stroke-dasharray:100;stroke-dashoffset:100}
.patch-trace.is-drawn .trace__path{transition:stroke-dashoffset var(--trace-dur) var(--ease-out);stroke-dashoffset:0}
/* the molecule glyph fades in as the line completes its descent. */
.patch-trace .trace__node{opacity:0;transition:opacity .15s var(--ease-out)}
.patch-trace.is-drawn .trace__node{opacity:1;transition-delay:calc(var(--trace-dur) * .7)}

/* ---- schematic illustration boxes (reserved-box, CLS=0) ----
   The decorative SVGs replace the old text imgslots in the SAME box
   geometry (.imgslot/.imgslot--hero/.imgslot--square keep their
   aspect-ratio from styles.css), so layout is byte-identical and there
   is zero shift. We only make the SVG fill the reserved box. */
.patch-illus{display:block;width:100%;height:100%}
.imgslot{overflow:hidden}

/* ---- benefit-card hover parity already lives in styles.css
   (.benefit-card:hover lift) — we do NOT restate it (G1). The Tier 1
   cursor tilt on the range cards is micro.css/micro.js ([data-tilt]). ---- */

/* ---- Tier 1: schematic self-draw (.patch-draw) ----
   The trust-section skin-layer schematic draws itself on IO enter via
   the SAME patches.js engine (.is-drawn toggle). Stroke shapes carry
   class="pd" + pathLength="100" in the markup so the dash math is
   geometry-independent (same normalisation as the delivery spine);
   the mono labels fade in after the strokes land. A diagram drawing
   itself = documentation happening. stroke-dashoffset/opacity only. */
.patch-draw .pd{stroke-dasharray:100;stroke-dashoffset:100}
.patch-draw.is-drawn .pd{transition:stroke-dashoffset var(--trace-dur) var(--ease-out);stroke-dashoffset:0}
.patch-draw text{opacity:0;transition:opacity .3s var(--ease-out)}
.patch-draw.is-drawn text{opacity:1;transition-delay:calc(var(--trace-dur) * .75)}

/* ---- reduced-motion + no-IO floor (FIRST gate) ----
   Everything present at its FINAL state, no animation. patches.js
   mirrors this in JS (settleFinal) before observers attach, so there
   is no flash-then-freeze. Content is identical to the animated path. */
@media (prefers-reduced-motion:reduce){
  .reveal,[data-reveal-group] > *{opacity:1!important;transform:none!important;transition:none!important}
  .patch-trace .trace__path{stroke-dashoffset:0!important;transition:none!important}
  .patch-trace .trace__node{opacity:1!important;transition:none!important;transition-delay:0s!important}
  .patch-draw .pd{stroke-dashoffset:0!important;transition:none!important}
  .patch-draw text{opacity:1!important;transition:none!important;transition-delay:0s!important}
}