:root {
  --drift: 5rem;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    @keyframes drift-slow { from { translate: 0 calc(var(--drift) * -.5); } to { translate: 0 var(--drift); } }
    @keyframes drift-fast { from { translate: 0 var(--drift); } to { translate: 0 calc(var(--drift) * -1); } }
    @keyframes drift-hero { to { translate: 0 calc(var(--drift) * 1.2); } }

    @media (min-width: 1140px) {
      .sheet-head {
        animation: drift-hero linear both;
        animation-timeline: scroll(root);
        animation-range: 0 80vh;
      }

      .spec,
      .case:nth-of-type(even),
      .band:nth-of-type(even),
      .record__section:is(:nth-of-type(1), :nth-of-type(even)),
      .job:first-of-type {
        animation: drift-slow linear both;
        animation-timeline: view();
        animation-range: cover;
      }

      .spec:nth-of-type(odd),
      .case__figure,
      .job:not(:first-of-type) {
        animation: drift-fast linear both;
        animation-timeline: view();
        animation-range: cover;
      }
    }
  }
}

/* Top shares ב״ה's corner, so without scroll-driven animation it stays hidden. */
.to-top { visibility: hidden; }

/* Once the page is 1vh past the fold Top slides down from above, or fades when motion is reduced. */
@supports (animation-timeline: scroll()) {
  @keyframes top-slide {
    from { translate: 0 -5rem; visibility: hidden; }
    to { translate: 0 0; visibility: visible; }
  }

  @keyframes top-fade {
    from { opacity: 0; visibility: hidden; }
    to { opacity: 1; visibility: visible; }
  }

  .to-top {
    animation: top-slide linear both;
    animation-timeline: scroll(root);
    animation-range: 101vh 111vh;
  }

  @media (prefers-reduced-motion: reduce) {
    .to-top { animation-name: top-fade; }
  }
}

@media print {
  *, *::before, *::after { animation: none !important; }
}