/* Everything is visible and stationary before progressive enhancement. */
@keyframes sky-to-night { from { opacity: 0; } to { opacity: 1; } }
@keyframes arrive-from-left { from { translate: -48px 0; } to { translate: 0 0; } }
@keyframes arrive-from-right { from { translate: 48px 0; } to { translate: 0 0; } }
@keyframes chapter-arrives { from { translate: 0 22px; } to { translate: 0 0; } }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  @supports (animation-timeline: view()) and (animation-timeline: scroll()) {
    .page-sky::after {
      animation: sky-to-night 1s linear both;
      animation-timeline: scroll(root block);
    }
    .farm-chapter, .expansion-card {
      view-timeline-name: --scene;
      view-timeline-axis: block;
    }
    .section-heading {
      animation: chapter-arrives 1s linear both;
      animation-timeline: view(block);
      animation-range: entry 0% cover 30%;
    }
    .travelling-strip {
      animation: arrive-from-left 1s linear both;
      animation-timeline: --scene;
      animation-range: entry 0% cover 42%;
    }
    .farm-chapter:nth-child(2) .travelling-strip {
      animation-name: arrive-from-right;
    }
    .expansion-copy {
      animation: chapter-arrives 1s linear both;
      animation-timeline: --scene;
      animation-range: entry 0% cover 35%;
    }
    @media (min-width: 1001px) and (min-height: 800px) {
      .expansion-card { position: sticky; top: 112px; }
      .expansion-journey { display: block; }
      .expansion-card + .expansion-card { margin-top: 100px; }
    }
  }
  ::view-transition-old(root) { animation-duration: 180ms; }
  ::view-transition-new(root) { animation-duration: 220ms; }
}

/* The explicit pause control stops both CSS and canvas movement. */
html.motion-paused { scroll-behavior: auto; }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation: none !important; transition: none !important; }
.motion-paused .expansion-card { position: relative; top: auto; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}