@supports (animation-timeline: view()) {
  @keyframes kw-progress-grow { from { scale: 0 1; } to { scale: 1 1; } }
  .scroll-progress {
    position: fixed;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--color-primary);
    transform-origin: left center;
    z-index: var(--z-max);
    animation: kw-progress-grow linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes kw-parallax-slow {
    from { transform: translateY(8%); }
    to { transform: translateY(-8%); }
  }
  @keyframes kw-parallax-fast {
    from { transform: translateY(18%); }
    to { transform: translateY(-18%); }
  }
  .parallax-slow {
    animation: kw-parallax-slow linear both;
    animation-timeline: view(block);
  }
  .parallax-fast {
    animation: kw-parallax-fast linear both;
    animation-timeline: view(block);
  }
  @keyframes kw-scroll-fade-up {
    from { opacity: 0; transform: translateY(var(--anim-distance)); }
    to { opacity: 1; transform: none; }
  }
  .scroll-reveal {
    animation: kw-scroll-fade-up var(--ease-out) both;
    animation-timeline: view(block);
    animation-range: entry 10% entry 60%;
  }
  @keyframes kw-scroll-zoom {
    from { transform: scale(1.12); }
    to { transform: scale(1); }
  }
  .scroll-zoom-img > img {
    animation: kw-scroll-zoom linear both;
    animation-timeline: view(block);
    animation-range: entry 0% cover 50%;
  }
  @keyframes kw-header-solidify {
    from { background-color: transparent; box-shadow: none; }
    to { background-color: var(--color-bg-1); box-shadow: var(--shadow-sm); }
  }
  .header-solidify {
    animation: kw-header-solidify linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 120px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .parallax-slow, .parallax-fast, .scroll-zoom-img > img { animation: none; }
  .scroll-reveal { animation-duration: 0.01ms; }
}