/* Hero parallax for every page with a hero (home + .page-hero pages), modelled on olympic.no's hero:
   as you scroll the first viewport the background image slides DOWN inside the hero
   (to 0.8 x the scroll distance), so it travels at only ~0.2x page speed while the
   text scrolls normally on top. Scrubbed to scroll position (no easing), like theirs.
   To remove the trial: delete the <link> and <script> for hero-parallax in index.html. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes hero-parallax {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(0, 80vh, 0); }
  }
  /* Text + buttons also drift down, but only at 0.15x (it rises to about the menu bar, then the white section covers it), so they lag the page and the next
     (white) section slides over them while the hero clips them - the "curtain" look. */
  @keyframes hero-parallax-text {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(0, 15vh, 0); }
  }
  /* The white content below rises 0.2x faster than the page, so it reaches the text sooner.
     main gets an equal negative margin so the footer follows the shifted content (no gap). */
  @keyframes page-rest-rise {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(0, -20vh, 0); }
  }
  /* White backdrop for the content, except the last 166px: the CTA banner overlaps the footer there (Figma), and the footer must show behind it. */
  .page-rest {
    position: relative;
    z-index: 2;
    background: linear-gradient(var(--white), var(--white)) top / 100% calc(100% - clamp(110px, 8.65vw, 166px)) no-repeat;
  }
  /* Negative margins between main and the footer collapse to the largest one, so the footer's own
     overlap (166px) has to be included here or it would be swallowed. */
  main { margin-bottom: calc(-20vh - clamp(110px, 8.65vw, 166px)); }
  @supports (animation-timeline: scroll()) {
    .page-rest {
      animation: page-rest-rise linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
    }
    .hero__media,
    .page-hero__media {
      animation: hero-parallax linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
    }
    .hero__inner,
    .page-hero > .container {
      animation: hero-parallax-text linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
    }
  }
  .hero__media, .hero__inner, .page-hero__media, .page-hero > .container { will-change: transform; }
}