/* Home: "Why Good Hope" card transition (reference: section slides in as a tilted card and leaves the same way)
   - The blue "Over five decades…" section keeps its original fade (no card effect).
   - IN:  the Why Good Hope panels slide up over the pinned school intro film as a tilted, rounded card and straighten;
          the hero behind sinks back and dims.
   - OUT: after the sideways panels finish, the Why card tilts and slides away upwards, revealing the next section.
   Pure CSS scroll timelines (same technique as the hero zoom). */
@supports (animation-timeline: view()){
@media (min-width:901px) and (prefers-reduced-motion: no-preference){
  /* School intro film (after "Over five decades"): pinned while it plays, then the Why card slides over it */
  .gh:not(.calm) .lv{height:500vh;view-timeline:--lv block;z-index:1}
  .gh:not(.calm) .lv-video{object-fit:cover}
  .gh:not(.calm) .lv-stage{animation:stageBack linear both;animation-timeline:--lv;animation-range:cover 66.667% cover 83.333%;transform-origin:50% 0}
  .gh:not(.calm) .lv-stage::after{content:"";position:absolute;inset:0;z-index:5;background:var(--ink);opacity:0;pointer-events:none;animation:dimIn linear both;animation-timeline:--lv;animation-range:cover 66.667% cover 83.333%}

  /* Why section: overlaps the hero's last screen (in) and the next section's first screen (out) */
  .gh:not(.calm) .hWrap.why{height:500vh;margin-top:-100vh;margin-bottom:-100vh;z-index:2}
  .gh:not(.calm) .why .hTrack,.gh:not(.calm) .why .hProg i{animation-range:cover 16.667% cover 66.667%}
  .gh:not(.calm) .why .hStage{transform-origin:50% 100%;box-shadow:0 -30px 80px rgba(23,20,58,.45);
    animation:cardIn linear both,cardOut linear forwards;animation-timeline:--hz,--hz;
    animation-range:entry 0% entry 100%,cover 66.667% cover 83.333%}
  .gh:not(.calm) .why~*{position:relative;z-index:1}
  .gh:not(.calm) .why+.band{margin-top:0}
}
}
@keyframes stageBack{from{transform:scale(1)}to{transform:scale(.9) translateY(-2%)}}
@keyframes dimIn{from{opacity:0}to{opacity:.55}}
@keyframes cardIn{
  0%{transform:translateY(0) rotate(5deg) scale(.96);border-radius:56px}
  85%,100%{transform:none;border-radius:0}
}
@keyframes cardOut{
  0%{transform:none;border-radius:0;transform-origin:50% 0}
  100%{transform:translateY(-112%) rotate(-6deg) scale(.96);border-radius:56px;transform-origin:50% 0}
}
/* tablets / phones: no pinned sections, so the Why card tilts in as it arrives and tilts away as it leaves */
@supports (animation-timeline: view()){
@media (max-width:900px) and (prefers-reduced-motion: no-preference){
  .gh:not(.calm) .why .hStage{transform-origin:50% 50%;box-shadow:0 -20px 50px rgba(23,20,58,.3);
    animation:cardIn linear both,cardOutSm linear forwards;animation-timeline:view(),view();
    animation-range:entry 0% entry 90%,exit 10% exit 100%}
  .gh:not(.calm) .hWrap.why{overflow-x:clip}
}
}
@keyframes cardOutSm{from{transform:none;border-radius:0}to{transform:rotate(-4deg) scale(.92);border-radius:44px}}

/* "Over five decades…" panel: deep ink instead of blue so it contrasts with the blue Why card */
.gh .veil{background:var(--ink)}

/* ===== School intro film section: plays frame by frame as you scroll (js/intro-film.js) ===== */
.lv{background:#050c22;position:relative;height:400vh}
.lv-stage{position:sticky;top:0;height:100vh;overflow:hidden;background:#050c22;display:flex;align-items:center;justify-content:center}
.lv-video{display:block;width:100%;height:100%;object-fit:contain;background:#050c22;pointer-events:none}
.lv-bar{position:absolute;left:0;bottom:0;height:4px;width:100%;background:linear-gradient(90deg,var(--yellow),var(--pink));transform-origin:left;transform:scaleX(0);z-index:6}
@media (prefers-reduced-motion: reduce){.lv{height:auto}.lv-stage{position:relative;height:auto}.lv-video{height:auto;aspect-ratio:16/9;pointer-events:auto}.lv-bar{display:none}}