/* ==========================================================================
   bowlingmalaysia.com — scroll-driven motion (progressive enhancement)
   Uses CSS Scroll-driven Animations (animation-timeline). Browsers without
   support ignore this file's effects; reduced-motion users never see them.
   Kept separate from main.css because the W3C CSS validator does not yet
   recognise animation-timeline / animation-range.
   ========================================================================== */
@layer reset, base, layout, components, utilities;

@layer components {
  /* reading progress: a ball rolling down a lane strip under the header */
  @supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
      .lane-progress {
        display: block; position: absolute; left: 0; right: 0; bottom: -9px; height: 6px;
        pointer-events: none;
      }
      .lane-progress::before {
        content: ""; position: absolute; top: -3px; left: 0;
        width: 12px; height: 12px; border-radius: 50%;
        background: radial-gradient(circle at 35% 30%, #ff8a95, var(--red) 55%, #6d0716);
        box-shadow: 0 0 0 2px var(--navy-deep);
        animation: roll-down-lane linear both;
        animation-timeline: scroll(root block);
        will-change: transform;
      }
      /* hero parallax: the photo layer drifts slower than the page */
      .hero::before {
        inset: -12% 0 0 0;
        animation: hero-parallax linear both;
        animation-timeline: scroll(root block);
        animation-range: 0 100vh;
        will-change: transform;
      }
    }
  }
  /* transform-only keyframes run on the compositor, so they can't block scrolling
     (the old version animated "left", which forced a layout on every scroll frame) */
  @keyframes roll-down-lane {
    from { transform: translateX(0) rotate(0deg); }
    to { transform: translateX(calc(100vw - 28px)) rotate(1080deg); }
  }
  @keyframes hero-parallax {
    from { transform: translateY(0); }
    to { transform: translateY(12%); }
  }
}

@layer utilities {
  /* cards and sections fade up as they enter the viewport */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .reveal {
        animation: reveal-up linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 55%;
      }
    }
  }
  @keyframes reveal-up {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: none; }
  }
}