/* components/hero-parallax/hero-parallax.css
 *
 * Subtil parallax i sidornas hero (Anders 2026-11-12, t.ex. /case/cuatro-torres-complex-spain/):
 * bilden glider långsammare än sidan när man scrollar förbi heron.
 * Gäller herona med bild kant i kant: .brokk-hero-xl__img (startsidan, branscher, tjänster,
 * innovationer m.fl.) och .brokk-case-project-hero__img (case).
 *
 * translate, inte object-position: heronas bilder har egna fokuspunkter i object-position
 * (t.ex. 49.6% 16%) som annars skulle skrivas över. Bilden görs --hero-parallax-shift högre än
 * ramen och lyfts lika mycket, och glider sedan ned samma sträcka. Ingen glipa, även där
 * headern inte är klistrad (mobil). Startsidans Ken Burns (transform) och mobilens scale: 1.25
 * är egna egenskaper och påverkas inte.
 *
 * Scroll-styrd CSS-animation (animation-timeline), inget skript. Webbläsare utan stöd och
 * reducerad rörelse: bilden står still och ser ut som förut. Styrka: --hero-parallax-shift.
 */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .brokk-hero-xl__img,
    .brokk-case-project-hero__img {
      overflow: clip;
    }
    .brokk-hero-xl__img img,
    .brokk-case-project-hero__img img {
      block-size: calc(100% + var(--hero-parallax-shift));
      margin-block-start: calc(-1 * var(--hero-parallax-shift));
      animation-name: brk-hero-parallax;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: scroll(root block);
      animation-range: 0 100vh;
    }
    /* Startsidan har redan en animation på bilden (Ken Burns); båda körs. */
    .home .brokk-hero-xl__img img {
      animation-name: brk-kenburns, brk-hero-parallax;
      animation-duration: var(--dur-kenburns), auto;
      animation-timing-function: var(--ease-kenburns), linear;
      animation-timeline: auto, scroll(root block);
      animation-range: normal, 0 100vh;
    }
  }
}

@keyframes brk-hero-parallax {
  from { translate: 0 0; }
  to   { translate: 0 var(--hero-parallax-shift); }
}