/* 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 hero 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){
  /* hero stays pinned 100vh longer so the Why card can slide over it; hero animation timing unchanged */
  .gh:not(.calm) .heroWrap{height:500vh;position:relative;z-index:1}
  .gh:not(.calm) .heroWrap .zoom,.gh:not(.calm) .heroWrap .zoom img,.gh:not(.calm) .hA,.gh:not(.calm) .hC,.gh:not(.calm) .hE,.gh:not(.calm) .hD,
  .gh:not(.calm) .zchip,.gh:not(.calm) .zstar,.gh:not(.calm) .shade,.gh:not(.calm) .veil,.gh:not(.calm) .hello,.gh:not(.calm) .nextTxt{animation-range:cover 16.667% cover 66.667%}
  .gh:not(.calm) .stage{animation:stageBack linear both;animation-timeline:--hero;animation-range:cover 66.667% cover 83.333%;transform-origin:50% 0}
  .gh:not(.calm) .stage::after{content:"";position:absolute;inset:0;z-index:20;background:var(--ink);opacity:0;pointer-events:none;animation:dimIn linear both;animation-timeline:--hero;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(var(--ink-rgb),.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(var(--ink-rgb),.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)}