/* /for-students, beside audience.css. Three small adjustments to the template for this page, then
   the one piece of scroll-driven motion of its own: the value grid as a sticky scroller, after the
   MagicStudent feature scroller (DISSECTION.md 5.2 and motion M17), built in CSS and SVG. The text
   column scrolls and marks the item in the middle of the screen with a rule and a lit icon, the
   words at full strength throughout; the illustration
   column sticks, cross-fades between six schematic panels and fills a progress track as the list
   is read. for-students.js switches it on (class fs-on) only on a wide, tall enough screen with
   motion allowed. Without it the module's grid stands as it is and the stage stays hidden.
   Only opacity and transform ever animate, and only while the visitor scrolls. */

/* the hero is whole without its illustration: an empty art slot gives its column back */
.aud-hero .container:has(>.aud-hero-art:empty){grid-template-columns:minmax(0,1fr)}
.aud-hero .container:has(>.aud-hero-art:empty) .aud-hero-text{max-width:760px}
.aud-hero-art:empty{display:none}

/* the template's sections start flush (top-0); after a tinted band they need their air back */
#learning,#visible{padding-top:clamp(64px,7vw,104px)}

/* who can see what: the class link beside the list */
.fs-aside p{color:var(--slate);font-size:15.5px;line-height:1.55;margin:0 0 18px;max-width:52ch}

/* ---------- the value grid as a sticky scroller ---------- */

.fs-stage{display:none}

#learning.fs-on .container{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:clamp(40px,5vw,80px);align-items:start}
#learning.fs-on .section-head{grid-column:1;grid-row:1}
#learning.fs-on .aud-values{grid-column:1;grid-row:2;grid-template-columns:minmax(0,1fr);gap:0;margin-top:26px}
#learning.fs-on .aud-value{position:relative;min-height:clamp(240px,42vh,380px);justify-content:center;padding:26px 0 26px 26px}
#learning.fs-on .aud-value::before{content:'';position:absolute;left:0;top:26px;bottom:26px;width:3px;border-radius:3px;background:var(--emerald);transform:scaleY(0);opacity:0}
#learning.fs-on .aud-value.is-on::before{transform:none;opacity:1}
#learning.fs-on .aud-ico{opacity:.5}
#learning.fs-on .aud-value.is-on .aud-ico{opacity:1}
#learning.fs-on .fs-stage{display:block;grid-column:2;grid-row:1 / span 2;align-self:start;position:sticky;top:max(calc(var(--nav-h) + 24px),calc(50vh - 236px))}

.fs-stage{background:var(--white);border:1px solid var(--rule);border-radius:var(--r-xl);box-shadow:var(--shadow);padding:16px 18px 18px}
.fs-meter{display:flex;align-items:center;gap:14px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin:2px 2px 14px}
.fs-count{flex:0 0 auto;font-variant-numeric:tabular-nums}
.fs-count b{color:var(--emerald-ink);font-weight:500}
.fs-track{flex:1 1 auto;position:relative;height:3px;border-radius:3px;background:var(--rule-soft);overflow:hidden}
.fs-fill{position:absolute;inset:0;background:var(--emerald);transform:scaleX(var(--p,0));transform-origin:left center}
.fs-panels{display:grid;border-radius:var(--r-lg);background-color:var(--paper);background-image:radial-gradient(var(--rule) 1px,transparent 1.5px);background-size:16px 16px;overflow:hidden}
.fs-panel{grid-area:1 / 1;width:100%;height:auto;display:block}

/* the panels' parts, in the site's tokens */
.fs-panel .k{fill:var(--white);stroke:var(--rule);stroke-width:1}
.fs-panel .ks{fill:var(--rule-soft)}
.fs-panel .sk{fill:var(--tint)}
.fs-panel .sk2{fill:var(--rule-soft)}
.fs-panel .nv{fill:var(--navy)}
.fs-panel .emf{fill:var(--emerald)}
.fs-panel .emw{fill:var(--emerald-wash)}
.fs-panel .wt{fill:var(--white)}
.fs-panel .flw{fill:var(--flag-wash)}
.fs-panel .ln{fill:none;stroke:var(--mist);stroke-width:1.2}
.fs-panel .ems{fill:none;stroke:var(--emerald);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fs-panel .ems.dash{stroke-dasharray:5 6}
.fs-panel .nvs{fill:none;stroke:var(--navy);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.fs-panel .nvs.thin{stroke:var(--slate);stroke-width:1.6}
.fs-panel .wts{fill:none;stroke:var(--white);stroke-width:2;stroke-linecap:round}
.fs-panel .fls{fill:none;stroke:var(--flag);stroke-width:1.8;stroke-linecap:round}
.fs-panel text{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.09em;fill:var(--faint)}
.fs-panel text.q{font-family:var(--font-text);font-size:14.5px;font-weight:600;letter-spacing:0;fill:var(--white)}
.fs-panel text.emi{fill:var(--emerald-ink)}
.fs-panel text.wtx{fill:var(--white)}
.fs-panel text.flx{fill:var(--flag)}
.fs-card{transform-box:fill-box;transform-origin:center}

/* one panel at a time; its cards arrive when it does */
#learning.fs-on .fs-panel{opacity:0}
#learning.fs-on .fs-panel.is-on{opacity:1}
#learning.fs-on .fs-card{opacity:0;transform:scale(.9)}
#learning.fs-on .fs-panel.is-on .fs-card{opacity:1;transform:none}

@media (prefers-reduced-motion:no-preference){
  /* the reading column: the rule beside the active item, and its icon */
  #learning.fs-on .aud-value::before{transition:transform .5s var(--ease-out),opacity .3s linear}
  #learning.fs-on .aud-ico{transition:opacity .4s linear}
  /* the cross-fade between panels */
  #learning.fs-on .fs-panel{transition:opacity .5s linear}
  /* an outgoing panel keeps its cards until it has faded, then they reset unseen */
  #learning.fs-on .fs-card{transition:opacity 0s linear .5s,transform 0s linear .5s}
  /* an incoming panel's cards pop in one after another */
  #learning.fs-on .fs-panel.is-on .fs-card{transition:opacity .26s var(--ease-out) calc(140ms + var(--k,0) * 80ms),transform .34s var(--ease-out) calc(140ms + var(--k,0) * 80ms)}
  /* the track follows the scroll and settles a beat behind it */
  #learning.fs-on .fs-fill{transition:transform .32s var(--ease-out)}
}