/* =============================================================================
   CTFY · Mind of an Athlete (/programs/athletes/, PRD pages/23) · programme layer
   Builds on css/site.css and css/modules.css. The .prog-* rules below are copied from the 28-Day Reset
   template (css/pages/28-day-reset.css §1–§4, §6) and keep their class names; .ath-* / .flow* are page-only.

   PAGE-ONLY · the focus-to-flow line (PRD 23 §4.4): two static data-brainwave dividers on one stage, a busy
   beta-density trace on the left and a slow theta wave on the right, blended over a short overlap. A cover
   (transform: scaleX) uncovers the line left → right over ≈2.4 s once in view, then everything holds still
   (no loop, no phase drift, no brightness change). Default CSS is the finished state, so reduced motion, the
   G4 toggle and no-JS show the settled composition.
   ============================================================================= */

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

/* ---------- §1 · Programme hero ---------- */
.prog-hero .hero__main{max-width:640px}
.prog-hero .crumbs{margin-bottom:24px}
.prog-hero__portrait picture{display:contents}
.prog-facts{margin-top:28px}
.prog-facts .chip{min-height:40px;text-decoration:none;transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.prog-facts .chip:hover{background:rgba(22,26,38,.62);border-color:rgba(255,255,255,.22)}}
@media (pointer:coarse){.prog-facts .chip{min-height:44px}}
@media (max-width:767px){.prog-facts{margin-top:22px;gap:8px}}
.hero__lead a{text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:.2em}

/* ---------- §2 · Statement (M02) ---------- */
.prog-statement{padding-block:var(--section-y-tight)}
.prog-statement .m-lightup__quote{max-width:25ch}

/* ---------- §3 · Why + feel list ---------- */
.prog-why{padding-top:var(--section-y-tight)}
.prog-why__aside{display:grid;gap:clamp(20px,2.4vw,32px)}
.prog-why__detail{aspect-ratio:16/10;border-radius:var(--r-l)}
.prog-included .m-feel__list li{align-items:center}
.prog-included .m-feel__list .icon{transform:none}
@media (min-width:1024px){.prog-why__split{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}}
@media (max-width:1023px){.prog-why .m-split__media{order:0}}

/* ---------- §4 · Three pillars (porcelain M24 numbered, icon panels) + chamber-bed frame ---------- */
.prog-rhythm .m-pillar__index{z-index:2;padding-right:14px;background:var(--surface)}
.prog-rhythm .m-pillar+.m-pillar .m-pillar__index{margin-left:-14px;padding-left:14px}
.prog-rhythm::before{display:none}
@media (min-width:1024px){
  @supports (width:1cqw){
    .prog-rhythm{container-type:inline-size}
    .prog-rhythm::before{--p:clamp(22px,2.4vw,30px);--gx:clamp(20px,3vw,40px);--w:calc((100cqw - 2 * var(--gx)) / 3);
      display:block;z-index:1;left:calc(var(--p) + 1px);right:calc(var(--w) - var(--p) - 28px);
      top:calc((var(--w) - 2px) * 9 / 16 + 21px + var(--t-num-m) / 2);
      background:linear-gradient(90deg,var(--theta-700),rgba(43,59,196,.4))}
  }
}
.prog-studio{margin-top:clamp(56px,7vw,104px)}
.prog-studio__frame{aspect-ratio:21/9;border-radius:var(--r-l)}
@media (max-width:767px){.prog-studio__frame{aspect-ratio:4/3}}

/* ---------- §6 · Bridge ---------- */
.prog-bridge .m-bridge__line{max-width:24ch}

/* ---------- PAGE-ONLY · A session: the focus-to-flow line ---------- */
.ath-session .sec__head{margin-bottom:clamp(28px,4vw,48px)}
.flow{--busy:46%;--lap:8%;margin-bottom:clamp(40px,5vw,72px)}
.flow__stage{position:relative;display:flex;flex-direction:column}
.flow__plot{position:relative;isolation:isolate;height:240px;overflow:hidden;border-radius:var(--r-m)}
.flow__wave{position:absolute;top:0;height:100%;display:block}
.flow__wave--busy{left:0;width:calc(var(--busy) + var(--lap));-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - var(--lap) * 3),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - var(--lap) * 3),transparent)}
.flow__wave--slow{left:calc(var(--busy) - var(--lap));right:0;width:auto;-webkit-mask-image:linear-gradient(90deg,transparent,#000 calc(var(--lap) * 3));mask-image:linear-gradient(90deg,transparent,#000 calc(var(--lap) * 3))}
.flow__wave--slow{width:calc(100% - var(--busy) + var(--lap))}
/* theta glow band behind the flow zone, labelled 4–8 Hz */
.flow__glow{position:absolute;z-index:-1;top:14%;bottom:14%;left:var(--busy);right:0;border-radius:var(--r-m);
  background:linear-gradient(90deg,transparent,rgba(62,85,245,.16) 22%,rgba(62,85,245,.1));
  border-block:1px solid rgba(107,125,255,.14)}
.flow__hz{position:absolute;right:16px;bottom:10px;color:var(--theta-300);font:600 .6875rem/1 var(--font-sans);letter-spacing:.14em}
/* pin hairline at the transition */
.flow__tick{position:absolute;z-index:1;top:0;bottom:0;left:var(--busy);width:1px;background:linear-gradient(180deg,var(--theta-400),rgba(107,125,255,.1))}
/* cover: uncovers the line left → right (transform only) */
.flow__cover{position:absolute;z-index:3;inset:0;background:var(--bg-1);transform:scaleX(0);transform-origin:right}
/* labels row above the plot: a pin at the transition and a bracket over the flow zone */
.flow__marks{position:relative;height:48px;margin:0}
.flow__marks p{margin:0;position:absolute;bottom:10px;color:var(--text-1);font:600 .75rem/1 var(--font-sans);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.flow__pin{left:var(--busy);transform:translateX(-50%)}
.flow__pin::after{content:"";position:absolute;left:50%;top:calc(100% + 4px);width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--theta-300);box-shadow:0 0 0 4px rgba(62,85,245,.22),0 0 12px var(--theta-glow)}
.flow__bracket{left:calc(var(--busy) + 8%);right:0;text-align:center;border-bottom:0}
.flow__bracket span{position:relative;z-index:1;padding-inline:14px;background:var(--bg-1)}
.flow__bracket::before{content:"";position:absolute;left:0;right:0;top:50%;height:9px;border:1px solid var(--line-2);border-bottom:0;border-top-color:transparent;transform:translateY(-2px)}
.flow__bracket::after{content:"";position:absolute;left:0;right:0;top:calc(50% + 3px);height:1px;background:var(--line-2)}
@media (max-width:767px){
  .flow{--busy:44%}
  .flow__plot{height:180px}
  /* labels move under the canvas as two chips */
  .flow__marks{order:2;display:flex;gap:10px;height:auto;margin-top:14px}
  .flow__marks p{position:static;transform:none;padding:7px 14px;border:1px solid var(--line-2);border-radius:var(--r-pill,999px);background:var(--bg-2)}
  .flow__marks p::after,.flow__marks p::before{display:none}
  .flow__marks .flow__pin::before{display:block;content:"";display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:var(--theta-300);vertical-align:1px}
  .flow__bracket span{padding:0;background:none}
}
.flow__marks p span{display:inline}

/* the plays-once sequence: cover slides away (2.4 s), then the glow, pin and labels settle */
.js .flow.is-pending{opacity:1;transform:none}
.js .flow.is-pending .flow__cover{transform:scaleX(1)}
.js .flow.is-pending .flow__glow,.js .flow.is-pending .flow__tick,.js .flow.is-pending .flow__marks{opacity:0}
.flow.is-in .flow__cover{transition:transform 2400ms cubic-bezier(.45,.05,.35,1)}
.flow.is-in .flow__glow,.flow.is-in .flow__tick{transition:opacity 900ms var(--ease-out) 1500ms}
.flow.is-in .flow__marks{transition:opacity 700ms var(--ease-out) 1900ms}

.ath-spec{--m-unit:var(--champ-400)}
.ath-spec.m-spec--plain{--m-unit:var(--champ-400)}
@media (max-width:359px){.ath-spec .m-spec__num{font-size:calc(var(--t-num-xl) * .8)}}

/* ---------- PAGE-ONLY · Proof: two portrait story cards ---------- */
.ath-stories{overflow:clip}
.ath-stories>.aurora{opacity:.45}
.ath-stories__grid{display:grid;gap:clamp(32px,5vw,56px)}
.ath-stories__head{margin-bottom:0}
.ath-stories__caption{max-width:46ch;color:var(--text-3);font-size:.9375rem;line-height:1.6}
.ath-stories__caption .link{display:inline;text-decoration:underline;text-underline-offset:.2em}
.ath-stories__rail{min-width:0}
@media (min-width:1024px){
  .ath-stories__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start;column-gap:clamp(40px,6vw,96px)}
  .ath-stories .m-stories .m-rail>li{width:calc((100% - 24px) / 2)}
  .ath-stories__rail .m-rail{gap:24px}
}
.ath-stories .m-story__quote{font-size:calc(var(--t-title) * 1.1 * var(--k-display))}
.ath-by{margin-top:auto;color:var(--text-2);font:600 .75rem/1.5 var(--font-sans);letter-spacing:.12em;text-transform:uppercase}
.ath-stories .m-story__body .link{margin-top:2px}
@media (max-width:599px){.ath-stories .m-rail>li{width:87%}}

/* ---------- Note band ---------- */
.ath-note{padding-block:var(--section-y-tight)}

/* ---------- Calm states ---------- */
[data-motion="off"] .flow *,[data-motion="off"] .prog-rhythm::before{transition:none!important}
@media (prefers-reduced-motion:reduce){.flow *{transition:none!important}}