/* /for-schools: what this page needs on top of audience.css. The hero standing alone until its
   illustration lands, the still in the proof band framed on what it shows, the card beside who can
   see what, and the page's one piece of scroll motion: the value grid as a scroller.

   The scroller is an original equivalent of the pillar scroller on magicschool.ai's AI OS page and
   the feature scroller on MagicStudent (DISSECTION.md M16, M17). On wide screens the section pins
   under the nav, the six items sit stacked in one card and cross-fade as the page scrolls, and a
   rail of their titles fills from one to the next. On phones the items stay a list and light one by
   one as they reach the reading line, beside a rail that fills: the marker and the icon light,
   the words stay at full strength throughout. public/assets/for-schools.js adds
   .fs-pin or .fs-flow and moves the state; it never runs on an idle page and never runs under
   reduced motion. Without the script every item shows in the template's grid. Only opacity and
   transform animate. */

/* the hero, whole without its art */
.aud-hero-art:empty{display:none}
.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}

/* the recording still in the proof band: when only the whole poster exists, framed on the Sources
   list it is there to show (the cut made by scripts/record/sources-crop.js needs no framing) */
.aud-proof.has-img img:not(.is-crop){object-position:62% 92%}

/* links inside the value items */
.aud-value p a{color:var(--emerald-ink);font-weight:600}

/* who can see what: the card beside the list */
.fs-guard h3{font-size:clamp(19px,1.9vw,22px);margin-bottom:14px}
.fs-guard .list li{font-size:15.5px;color:var(--slate)}
.fs-guard .list li+li{margin-top:10px}

/* the rail exists only while the scroller runs */
.fs-rail{display:none}
/* a change of mode (first run, a resize across the breakpoint) lands without a fade */
#values.fs-settle .aud-value,#values.fs-settle .aud-ico,#values.fs-settle .aud-value::after,#values.fs-settle .aud-values::after,#values.fs-settle .fs-rail li,#values.fs-settle .fs-rail li::after,#values.fs-settle .fs-fill{transition:none}

/* ---------- wide: pinned, one item at a time ---------- */
@media (prefers-reduced-motion:no-preference) and (min-width:961px) and (min-height:620px){
  #values.fs-pin{height:calc(100vh - var(--nav-h) + (var(--n,6) - 1) * 46vh);padding:0}
  #values.fs-pin>.container{position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);grid-template-rows:auto auto;column-gap:clamp(40px,5vw,76px);align-content:center;align-items:start}
  #values.fs-pin .section-head{grid-column:1;grid-row:1}
  #values.fs-pin .section-head h2{font-size:clamp(28px,2.9vw,38px)}
  #values.fs-pin .section-head .lede{max-width:40ch}

  #values.fs-pin .fs-rail{display:block;grid-column:1;grid-row:2;position:relative;margin-top:32px;padding-left:30px}
  .fs-rail ol{list-style:none;margin:0;padding:0;display:grid;gap:12px}
  .fs-rail li{position:relative;font-family:var(--font-display);font-weight:600;font-size:15.5px;line-height:22px;letter-spacing:-.005em;color:var(--navy);opacity:.5;transition:opacity .4s linear}
  .fs-rail li.is-on{opacity:1}
  .fs-rail li::before,.fs-rail li::after{content:'';position:absolute;left:-29px;top:5px;width:12px;height:12px;border-radius:50%;box-sizing:border-box}
  .fs-rail li::before{background:var(--white);border:2px solid var(--mist)}
  .fs-rail li::after{background:var(--emerald);transform:scale(.3);opacity:0;transition:opacity .3s linear,transform .45s var(--ease-out)}
  .fs-rail li.is-on::after,.fs-rail li.is-past::after{opacity:1;transform:none}
  .fs-track{position:absolute;left:6px;top:11px;bottom:11px;width:2px;border-radius:2px;background:var(--rule);overflow:hidden}
  .fs-fill{position:absolute;inset:0;background:var(--emerald);transform:scaleY(0);transform-origin:top;transition:transform .55s var(--ease-out)}

  #values.fs-pin .aud-values{grid-column:2;grid-row:1 / span 2;align-self:center;display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin:0;padding:clamp(34px,3.4vw,50px);background:var(--white);border:1px solid var(--rule);border-radius:var(--r-xl);box-shadow:var(--shadow);counter-reset:fsv}
  #values.fs-pin .aud-value{grid-area:1 / 1;position:relative;border-top:0;padding:0;gap:10px;counter-increment:fsv;opacity:0;transform:translateY(16px);transition:opacity .45s linear,transform .7s var(--ease-out);pointer-events:none}
  #values.fs-pin .aud-value.is-past{transform:translateY(-16px)}
  #values.fs-pin .aud-value.is-on{opacity:1;transform:none;pointer-events:auto}
  #values.fs-pin .aud-value::before{content:counter(fsv,decimal-leading-zero);position:absolute;top:10px;right:0;font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;color:var(--faint)}
  #values.fs-pin .aud-value h3{font-size:clamp(25px,2.3vw,31px);margin:8px 0 2px}
  #values.fs-pin .aud-value p{font-size:18px;line-height:1.6;max-width:46ch}
}

/* ---------- phones: a list that lights as it is read ---------- */
@media (prefers-reduced-motion:no-preference) and (max-width:560px){
  #values.fs-flow .aud-values{position:relative;padding-left:26px}
  #values.fs-flow .aud-values::before,#values.fs-flow .aud-values::after{content:'';position:absolute;left:5px;top:44px;height:var(--rail-h,calc(100% - 44px));width:2px;border-radius:2px}
  #values.fs-flow .aud-values::before{background:var(--rule)}
  #values.fs-flow .aud-values::after{background:var(--emerald);transform:scaleY(var(--fill,0));transform-origin:top;transition:transform .35s var(--ease-out)}
  #values.fs-flow .aud-value{position:relative}
  #values.fs-flow .aud-ico{opacity:.5;transition:opacity .45s linear}
  #values.fs-flow .aud-value::before{content:'';position:absolute;left:-26px;top:38px;width:12px;height:12px;border-radius:50%;box-sizing:border-box;background:var(--white);border:2px solid var(--mist);z-index:1}
  #values.fs-flow .aud-value::after{content:'';position:absolute;left:-26px;top:38px;width:12px;height:12px;border-radius:50%;background:var(--emerald);z-index:2;transform:scale(.3);opacity:0;transition:opacity .3s linear,transform .45s var(--ease-out)}
  #values.fs-flow .aud-value.is-on .aud-ico,#values.fs-flow .aud-value.is-past .aud-ico{opacity:1}
  #values.fs-flow .aud-value.is-on::after,#values.fs-flow .aud-value.is-past::after{opacity:1;transform:none}
}