/* Opt in only. The normal cascade is the finished, readable composition. */
.scroll-crop-stage { display: none; }
[data-scroll="crop"] {
  --crop-1-scale: 1; --crop-1-x: 0%; --crop-1-y: 0%;
  --crop-2-scale: 1; --crop-2-x: 0%; --crop-2-y: 0%;
  --crop-3-scale: 1; --crop-3-x: 0%; --crop-3-y: 0%;
  --crop-4-scale: 1; --crop-4-x: 0%; --crop-4-y: 0%;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-scroll="rise"] { view-timeline: --wordmark-rise block; }
    [data-scroll="rise"] .scroll-wordmark {
      animation: wordmark-rise linear both;
      animation-timeline: --wordmark-rise;
      animation-range: entry 0% entry 100%;
    }
    @media (min-width: 1024px) {
      [data-scroll="crop"] { view-timeline: --crop-story block; }
      [data-scroll="crop"] .scroll-crop-stage { display: block; position: sticky; top: 0; height: 100svh; overflow: clip; }
      [data-scroll="crop"] .scroll-crop-photo {
        width: 100%; height: 100%; object-fit: cover;
        animation: crop-photo var(--ease-in-out) both;
        animation-timeline: --crop-story;
        animation-range: contain 0% contain 100%;
      }
      [data-scroll="crop"] .scroll-crop-steps { position: relative; margin-top: -100svh; }
      [data-scroll="crop"] .scroll-crop-step { min-height: 70svh; }
    }
    @media (min-width: 1024px) and (min-height: 760px) {
      [data-scroll="stack"] { timeline-scope: --stack-1, --stack-2, --stack-3, --stack-4, --stack-5, --stack-6; }
      [data-scroll="stack"] > [data-scroll-item] {
        position: sticky; top: calc(var(--header-height) + 16px);
        transform-origin: top center; isolation: isolate;
        animation: benefit-covered linear both;
        animation-range: entry 0% entry 100%;
      }
      .site-header[data-hidden] ~ main [data-scroll="stack"] > [data-scroll-item] { top: 16px; }
      [data-scroll="stack"] > :nth-child(1) { view-timeline: --stack-1 block; }
      [data-scroll="stack"] > :nth-child(2) { view-timeline: --stack-2 block; }
      [data-scroll="stack"] > :nth-child(3) { view-timeline: --stack-3 block; }
      [data-scroll="stack"] > :nth-child(4) { view-timeline: --stack-4 block; }
      [data-scroll="stack"] > :nth-child(5) { view-timeline: --stack-5 block; }
      [data-scroll="stack"] > :nth-child(6) { view-timeline: --stack-6 block; }
      [data-scroll="stack"] > :nth-child(1) { animation-timeline: --stack-2; }
      [data-scroll="stack"] > :nth-child(2) { animation-timeline: --stack-3; }
      [data-scroll="stack"] > :nth-child(3) { animation-timeline: --stack-4; }
      [data-scroll="stack"] > :nth-child(4) { animation-timeline: --stack-5; }
      [data-scroll="stack"] > :nth-child(5) { animation-timeline: --stack-6; }
      [data-scroll="stack"] > :last-child { animation: none; }
    }
  }
}

@keyframes benefit-covered { from { scale: 1; } to { scale: .95; } }
@keyframes crop-photo {
  0% { scale: 1; translate: 0 0; }
  25% { scale: var(--crop-1-scale); translate: var(--crop-1-x) var(--crop-1-y); }
  50% { scale: var(--crop-2-scale); translate: var(--crop-2-x) var(--crop-2-y); }
  75% { scale: var(--crop-3-scale); translate: var(--crop-3-x) var(--crop-3-y); }
  100% { scale: var(--crop-4-scale); translate: var(--crop-4-x) var(--crop-4-y); }
}
@keyframes wordmark-rise { from { translate: 0 40%; clip-path: inset(100% 0 0 0); } to { translate: 0 0; clip-path: inset(0); } }