/* Motion system — shared build v20261021-1. Companion to motion.js.
   Hidden states below are only ever ACTIVATED by motion.js (it adds the
   classes); with JS off or effects off, none of this hides anything. */
:root{--fx-accent:#0066ff}

/* ── section reveals ── */
.fx-rv{opacity:0;transform:translateY(24px) scale(.98);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform}
.fx-rv.fx-in{opacity:1;transform:translateY(0) scale(1)}

/* ── marker highlights (hand-drawn circle / underline) ── */
.fx-mark{position:relative;display:inline-block;white-space:nowrap}
.fx-mark>svg.fx-mk{position:absolute;pointer-events:none;overflow:visible;z-index:1}
.fx-m-circle>svg.fx-mk{left:-7%;top:-16%;width:114%;height:132%}
.fx-m-underline>svg.fx-mk{left:-2%;top:auto;bottom:-.18em;width:104%;height:.34em}
.fx-mark>svg.fx-mk path{fill:none;stroke:var(--fx-accent);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;transition:stroke-dashoffset .9s ease .15s}

/* ── text rollout (same rules as the site stylesheets; repeated here so
      pages that load motion.js without the rollout CSS still roll) ── */
.ro-word{display:inline-block;opacity:.12;filter:blur(6px);transform:translateY(.35em);transition:opacity .7s cubic-bezier(.2,.7,.2,1),filter .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
[data-rollout].ro-go .ro-word{opacity:1;filter:blur(0);transform:translateY(0)}
[data-rollout="scrub"] .ro-word{transition:none}

@media (prefers-reduced-motion: reduce){
  .fx-rv{opacity:1;transform:none;transition:none}
  .fx-mark>svg.fx-mk path{transition:none}
  .ro-word{opacity:1;filter:none;transform:none;transition:none}
}