/* One scroll-linked home image, with the existing touch lift intact.
   The translate property composes with the separate hover transform.
   Unsupported browsers and reduced-motion users keep the original still image. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hero-spaghetti-link {
      --hero-travel: 48px;
      view-timeline-name: --hero-image-motion;
      view-timeline-axis: block;
    }
    .hero-spaghetti-link .hero-image-wrap img {
      height: calc(100% + var(--hero-travel));
      max-height: none;
      animation: hero-image-drift linear both;
      animation-timeline: --hero-image-motion;
      animation-range: entry 0% exit 100%;
    }
    @keyframes hero-image-drift {
      from { translate: 0 0; }
      to { translate: 0 calc(-1 * var(--hero-travel)); }
    }
    @media (max-width: 640px) {
      .hero-spaghetti-link { --hero-travel: 28px; }
    }
  }
}