/* =============================================================================
   CTFY · AO Scan (/programs/ao-scan/, PRD pages/28) · page-only layer
   Builds on css/site.css (foundation) and css/modules.css (M01–M33). Page variants only:
   hero fit (H5 square frame, retouched square crop) and the scan-trace instrument (M14 right column).
   The instrument is two static data-brainwave divider canvases (a dim fine trace and a smooth lit one) with a 1px head.
   One slow pass when the card first enters view (core.js adds .is-entered); everything moves by transform only:
   the head, and two counter-translating windows that swap dim for lit behind it. After the pass the lit trace holds.
   Off / reduced: the lit trace fully drawn, no head. No axis, labels, bars or numbers anywhere.
   ============================================================================= */

#why,#how,#start{scroll-margin-top:96px}

/* ---------- 1 · H5 hero ---------- */
.ao-chips{margin-top:26px}
.ao-chips a.chip{text-decoration:none}
.ao-hero .hero__portrait--square img{object-position:var(--pos,50% 50%)}

/* ---------- 2 · Why: split + scan-trace card ---------- */
.ao-why .m-split{gap:clamp(32px,6vw,96px)}
/* PRD mobile order: text first, instrument card after it */
@media (max-width:1023px){.ao-why .m-split__media{order:0}}
@media (min-width:1024px){.ao-why .m-split{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}}
.ao-why .m-split__copy p a,.m-route p a{color:var(--fg-link);text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}
.ao-scan{position:relative;isolation:isolate;container-type:inline-size;overflow:hidden;width:100%;height:100%;border-radius:var(--r-xl);
  background:linear-gradient(180deg,var(--bg-1),var(--bg-0))}
.ao-scan__bloom{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 70% at 50% 50%,rgba(62,85,245,.26),rgba(62,85,245,.07) 55%,transparent 78%)}
.ao-scan__win,.ao-scan__trace{position:absolute;inset:0;display:block}
.ao-scan__win{overflow:hidden;will-change:transform}
.ao-scan__trace{will-change:transform}
.ao-scan canvas{position:absolute;left:0;width:100%;display:block}
.ao-scan__trace--dim canvas{top:30%;height:40%;opacity:.5}      /* fine low-amplitude trace, many small cycles */
.ao-scan__trace--lit canvas{top:27%;height:46%}                  /* redrawn lit: smoother, slightly larger */
.ao-scan__head{position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--theta-400);opacity:0;pointer-events:none}
.ao-scan__head::before{content:"";position:absolute;right:1px;top:0;bottom:0;width:80px;
  background:linear-gradient(90deg,transparent,rgba(107,125,255,.2))}

/* finished state (default, reduced, off, no-JS): dim window parked off to the right, lit trace in place */
.ao-scan__win--dim{transform:translateX(100%)}
.ao-scan__trace--dim{transform:translateX(-100%)}
/* motion on, before the pass: all dim, lit window waiting on the left */
html.js:not([data-motion="off"]) .ao-scan:not(.is-entered) .ao-scan__win--dim,
html.js:not([data-motion="off"]) .ao-scan:not(.is-entered) .ao-scan__trace--dim{transform:none}
html.js:not([data-motion="off"]) .ao-scan:not(.is-entered) .ao-scan__win--lit{transform:translateX(-100%)}
html.js:not([data-motion="off"]) .ao-scan:not(.is-entered) .ao-scan__trace--lit{transform:translateX(100%)}
/* the pass: 3.2s, one direction, same easing everywhere so head and windows stay locked */
html.js:not([data-motion="off"]) .ao-scan.is-entered :is(.ao-scan__win,.ao-scan__trace,.ao-scan__head){animation-duration:3.2s;animation-delay:.5s;animation-timing-function:var(--ease-in-out);animation-fill-mode:both}
html.js:not([data-motion="off"]) .ao-scan.is-entered .ao-scan__win--dim{animation-name:ao-dim-win}
html.js:not([data-motion="off"]) .ao-scan.is-entered .ao-scan__trace--dim{animation-name:ao-dim-trace}
html.js:not([data-motion="off"]) .ao-scan.is-entered .ao-scan__win--lit{animation-name:ao-lit-win}
html.js:not([data-motion="off"]) .ao-scan.is-entered .ao-scan__trace--lit{animation-name:ao-lit-trace}
html.js:not([data-motion="off"]) .ao-scan.is-entered .ao-scan__head{animation-name:ao-head}
@keyframes ao-dim-win{from{transform:translateX(0)}to{transform:translateX(100%)}}
@keyframes ao-dim-trace{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@keyframes ao-lit-win{from{transform:translateX(-100%)}to{transform:translateX(0)}}
@keyframes ao-lit-trace{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes ao-head{0%{transform:translateX(0);opacity:0}4%{opacity:1}96%{opacity:1}100%{transform:translateX(calc(100cqw - 1px));opacity:0}}
html[data-motion="off"] .ao-scan :is(.ao-scan__win,.ao-scan__trace,.ao-scan__head){animation:none!important}
@media (prefers-reduced-motion:reduce){.ao-scan :is(.ao-scan__win,.ao-scan__trace,.ao-scan__head){animation:none!important}}

/* ---------- 3 · Your visit · 4 · Note ---------- */
.ao-how .sec__head{max-width:640px}
.ao-note{padding-block:clamp(40px,5vw,72px)}