/* 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. */
/* The hero image itself never moves: it is pinned to the viewport (position: fixed) and the hero's
   clip-path crops it to the hero box, so the page and white content slide over a still image.
   No scroll animation on the image = nothing to lag or jitter. */
.hero, .page-hero { clip-path: inset(0); }
.hero__media, .page-hero__media { position: fixed; inset: 0; height: 100vh; height: 100lvh; }
@property --rest-lift { syntax: "<length>"; inherits: true; initial-value: 0px; }
@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). */
  /* --rest-lift tracks the same lift as a length, so sticky blocks inside .page-rest can add it to their
     `top` and still stop just below the header (css/case-study.css, css/blog-article.css). */
  /* Only the transform lives here: animating a custom property is main-thread work, and on .page-rest it
     restyled the whole page every scroll frame (the hero jerk). --rest-lift is animated separately,
     on just the two sticky blocks that use it (see below). */
  @keyframes page-rest-rise {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(0, -20vh, 0); }
  }
  @keyframes rest-lift {
    from { --rest-lift: 0px; }
    to   { --rest-lift: 20vh; }
  }
  /* 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;
    }
    .article-aside__inner,
    .case-body__sticky {
      animation: rest-lift 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;
    }
  }
  /* With Lenis running, js/hero-parallax.js drives the same transforms in the scroll frame (see smooth-scroll.js). */
  html.js-parallax .article-aside__inner,
  html.js-parallax .case-body__sticky,
  html.js-parallax .page-rest,
  html.js-parallax .hero__media,
  html.js-parallax .page-hero__media,
  html.js-parallax .hero__inner,
  html.js-parallax .page-hero > .container { animation: none; }
  .hero__inner, .page-hero > .container { will-change: transform; }
}