/* =============================================================================
   CTFY · Neuro BioHack™ (/programs/neuro-biohack/, PRD pages/22) · programme template layer + week track
   Builds on css/site.css and css/modules.css. The .prog-* rules in §1–§4 and §6 are copied from the
   28-Day Reset template (css/pages/28-day-reset.css); §5 is this page's hero moment, the week track.

   Week track: 8 nodes on a 1px line; on entry a theta fill runs left → right over 1.6 s (transform only),
   each node's lit layer pops (--ease-pop, dot only) as the fill reaches it, and the numerals brighten with it.
   Node 1 carries a champagne ring (the free first class; the spec strip's "Free" label repeats the glyph).
   The visual is aria-hidden; the spec strip below is the text. Default CSS = finished state, so reduced
   motion, the G4 toggle (html[data-motion="off"]) and no-JS show the full track.
   ============================================================================= */

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

/* ---------- §1 · Programme hero (H5 Portrait Subhero on BG-B aurora) ---------- */
.prog-hero .hero__main{max-width:640px}
.prog-hero .crumbs{margin-bottom:24px}
.prog-hero__portrait picture{display:contents}   /* the <picture>-wrapped photo fills the 4:5 / 16:10 frame and honours --pos / --pos-m */
/* fact chips: Veil glass over the aurora, links to the hero-moment chapter */
.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)}
.prog-facts__price{color:var(--champ-400)}
@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}}

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

/* ---------- §3 · Why (M14 split: copy left, topic card + detail photo right) ---------- */
.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)}
@media (min-width:1024px){.prog-why__split{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}}
/* phones and tablets: text, then the card, then the photo (PRD 22 §4.2), not the module's media-first order */
@media (max-width:1023px){.prog-why .m-split__media{order:0}}
/* Topic Cloud (M32) in a Lens card over a theta bloom: the card shell is M28's, the list is the cloud */
.prog-topics{position:relative;isolation:isolate}
.prog-topics>.bloom{inset:-20% 0;background:var(--m-bloom)}
.prog-topics .m-feel__card{display:block}
.prog-topics .m-topics{gap:10px}
.prog-topics .m-topic{min-height:52px;padding-block:8px;border-radius:26px;font:500 calc(var(--t-small) * var(--k-text))/1.4 var(--font-sans);color:var(--fg-1)}

/* ---------- §4 · Week rhythm (porcelain M24 numbered) + studio frame ---------- */
.prog-rhythm .m-pillar__media picture{display:contents}   /* <picture>-wrapped strips crop like plain <img> strips */
/* the numbers sit on a card-coloured plate so the hairline passes behind them */
.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){
    /* one hairline threads 01 → 02 → 03 across the cards at the numbers' centre line. Geometry from M24:
       card padding --p, column gap --gx, 16:9 media strip, 8px + 12px to the index (t-num-m, line-height 1). */
    .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)}
.prog-studio__caption{margin-top:20px}
@media (max-width:767px){.prog-studio__frame{aspect-ratio:4/3}}

.prog-studio__frame{max-width:1080px;margin-inline:auto}
.prog-studio{margin-top:clamp(48px,6vw,88px)}

/* ---------- §5 · The course: week track + spec strip + CTA + note ---------- */
.prog-course{overflow:clip}
.prog-track{position:relative;isolation:isolate;padding-block:clamp(8px,1vw,16px) 0}
.prog-track__bloom{position:absolute;left:4%;right:4%;top:-90px;bottom:-110px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(62,85,245,.30),rgba(62,85,245,.10) 55%,transparent)}
.prog-track__route{position:relative;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));margin:0;padding:0;list-style:none}
.prog-track__route::before,.prog-track__route::after{content:"";position:absolute;left:calc(100% / 16);right:calc(100% / 16);pointer-events:none}
.prog-track__route::before{top:7px;height:1px;background:var(--line-2)}
.prog-track__route::after{top:6px;height:2px;background:var(--theta-400);transform-origin:left;box-shadow:0 0 14px var(--theta-glow)}
.prog-track__route li{position:relative;display:grid;justify-items:center;gap:22px}
.prog-track__dot{position:relative;isolation:isolate;width:14px;height:14px;border-radius:50%;background:var(--bg-1);box-shadow:inset 0 0 0 1px var(--line-2)}
/* lit layer: crossfades in over the hollow node; the node itself never moves */
.prog-track__dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--theta-300);box-shadow:0 0 0 4px rgba(62,85,245,.22),0 0 14px var(--theta-glow)}
/* node 1: the free first class, a champagne ring */
.prog-track__route li:first-child .prog-track__dot::before{content:"";position:absolute;inset:-8px;z-index:-1;border-radius:50%;background:var(--bg-1);box-shadow:0 0 0 1px var(--champ-400),0 0 14px rgba(203,179,132,.35)}
.prog-track__n{color:var(--fg-1);font:300 calc(var(--t-num-m) * 1.2)/1 var(--font-sans);letter-spacing:-.03em;font-variant-numeric:tabular-nums}

@media (max-width:767px){
  /* vertical route on the left edge: node, then its numeral */
  .prog-track__route{grid-template-columns:minmax(0,1fr)}
  .prog-track__route::before,.prog-track__route::after{left:7px;right:auto;top:30px;bottom:30px;height:auto;width:1px}
  .prog-track__route::after{left:6px;width:2px;transform-origin:top}
  .prog-track__route li{grid-auto-flow:column;justify-content:start;align-items:center;gap:24px;height:60px}
  .prog-track__n{font-size:2rem}
}

/* spec strip (M03): champagne price numeral, figures at 1.25 × the medium numeral */
.prog-strip{margin-top:clamp(56px,7vw,96px)}
.prog-strip .m-spec__num{margin-top:22px;font-size:calc(var(--t-num-m) * 1.25)}
.prog-strip .m-spec__label{display:flex;align-items:center;gap:10px;margin-top:12px}
.prog-price .m-spec__rule{background:var(--g-champ)}
.prog-price .m-spec__num{color:var(--m-price)}
.prog-key{flex:none;display:inline-block}
.prog-key--ring{width:10px;height:10px;border-radius:50%;background:var(--theta-300);box-shadow:0 0 0 3px var(--bg-1),0 0 0 4.5px var(--champ-400)}
.prog-course__cta{margin-top:clamp(36px,4.5vw,56px)}
.prog-course__note{margin-top:clamp(28px,3.5vw,40px)}
@media (max-width:599px){.prog-course__cta .btn{width:100%}}

/* Sequence (≈2 s, data-reveal-hold="2000"): the fill runs first → last node over 1.6 s; node i lights as the fill
   reaches it (i × 1.6 s / 7); numerals brighten with their node; the bloom opens behind. */
.js .prog-track.is-pending{opacity:1;transform:none}
.js .prog-track.is-pending .prog-track__bloom{opacity:0}
.js .prog-track.is-pending .prog-track__route::after{transform:scaleX(0)}
.js .prog-track.is-pending .prog-track__dot::after{opacity:0;transform:scale(.3)}
.js .prog-track.is-pending .prog-track__n{opacity:.3}
@media (max-width:767px){.js .prog-track.is-pending .prog-track__route::after{transform:scaleY(0)}}
.prog-track.is-in .prog-track__bloom{transition:opacity 1600ms var(--ease-out)}
.prog-track.is-in .prog-track__route::after{transition:transform 1600ms linear 120ms}
.prog-track.is-in .prog-track__dot::after{transition:opacity 220ms var(--ease-out) calc(120ms + var(--i) * 1600ms / 7),transform 460ms var(--ease-pop) calc(120ms + var(--i) * 1600ms / 7)}
.prog-track.is-in .prog-track__n{transition:opacity 500ms var(--ease-out) calc(120ms + var(--i) * 1600ms / 7)}

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

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