/* HAKIM — Homepage scroll choreography (Apple-style, native CSS).
 *
 * Loaded ONLY on the front page, AFTER homepage.css. The MOTION rule (#1) is
 * wrapped in @supports (animation-timeline: scroll()) + prefers-reduced-motion:
 * no-preference — so browsers without CSS scroll-driven animations (Firefox,
 * older Safari) and reduced-motion users get the normal, static page. The
 * sticky heading (#4) is layout, not motion, and applies on its own terms.
 *
 * Reuses --hk-ease / motion tokens from style.css.
 *
 * NOTE: per-element view()-timeline effects (image parallax / clip-unveil on
 * the card thumbnails) were dropped here — those images sit inside
 * overflow:hidden cards, which become the view() scrollport and freeze the
 * timeline. Clip-reveal on homepage images, if wanted, is done via the
 * existing IntersectionObserver component (.hk-reveal--clip), not here.
 */

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {

    /* ====================================================================
       #1 Hero recede — the cinematic hero gently sinks + fades as you
       scroll past it ("the imagery recedes"). transform/opacity only → no
       layout shift; animates only over the first ~screen of scroll → the
       LCP element is untouched at rest. Applied to the video-area, NOT the
       JS-controlled inner video/logo (hakim-fx.js owns those transforms).
       Uses scroll(root) (not view()) so it engages immediately on scroll.
       ==================================================================== */
    .hk-hero__video-area {
      animation: hk-hero-recede linear both;
      animation-timeline: scroll(root);
      animation-range: 0 78vh;
      transform-origin: center top;
    }
    @keyframes hk-hero-recede {
      from { opacity: 1;    transform: translateY(0)    scale(1);     }
      to   { opacity: 0.4;  transform: translateY(-5%)  scale(0.955); }
    }

  }
}

/* ======================================================================
   #4 Sticky section heading — the "Aktuelles" heading holds in place while
   its cards scroll past (Apple "the title stays"). Layout, not motion, so
   it is not gated behind scroll-driven-animation support. Desktop only —
   on mobile the short viewport makes a sticky heading cramped. top clears
   the ~85px sticky site header; z stays below it (--hk-z-sticky: 100).
   ====================================================================== */
@media (min-width: 1025px) {
  .hk-aktuelles .hk-section-heading {
    position: sticky;
    top: 104px;
    z-index: 2;
  }
}