/* Keep the sheet and its controls still; only the artwork moves inside it. */
@media screen and (prefers-reduced-motion: no-preference) {
  [data-press-scroll] .wall-posters :is(.daymark-print, .pastry, .vinyl),
  [data-press-scroll] .ink-proof:has([value="both"]:checked) :is(.rust-ink, .black-ink) {
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-timing-function: linear;
    animation-play-state: paused;
    animation-delay: calc(-1s * var(--press-progress, 0));
  }

  [data-press-scroll] .daymark-print {
    animation-name: press-through-glass;
    transform-origin: 12% 44%;
  }

  /* Motion paths compose with the existing GSAP selection transforms. */
  [data-press-scroll] :is(.pastry, .vinyl) {
    offset-position: auto;
    offset-anchor: 0 0;
    offset-rotate: 0deg;
  }

  [data-press-scroll] .pastry {
    offset-path: path("M 0 0 Q 9 10 16 29");
    animation-name: press-knot-settle;
  }

  [data-press-scroll] .vinyl {
    offset-path: path("M 0 0 L 72 -5");
    animation-name: press-record-pull;
  }

  [data-press-scroll] .ink-proof:has([value="both"]:checked) .rust-ink {
    animation-name: press-rust-pass;
  }

  [data-press-scroll] .ink-proof:has([value="both"]:checked) .black-ink {
    animation-name: press-black-pass;
  }

  [data-press-scroll="native"] .wall-posters :is(.daymark-print, .pastry, .vinyl),
  [data-press-scroll="native"] .ink-proof:has([value="both"]:checked) :is(.rust-ink, .black-ink) {
    animation-duration: auto;
    animation-delay: 0s;
    animation-play-state: running;
  }

  [data-press-scroll="native"] .wall-posters :is(.daymark-print, .pastry, .vinyl) {
    animation-timeline: scroll(root);
    animation-range: 0px var(--press-wall-travel);
  }

  [data-press-scroll="native"] .proof-paper {
    view-timeline-name: --press-proof;
    view-timeline-inset: 0;
  }

  [data-press-scroll="native"] .ink-proof:has([value="both"]:checked) :is(.rust-ink, .black-ink) {
    animation-timeline: --press-proof;
    animation-range: entry 0% entry 90%;
  }
}

@media screen and (prefers-reduced-motion: no-preference) and (max-width: 600px) {
  [data-press-scroll] .vinyl {
    offset-path: path("M 0 0 L 48 -4");
  }
}

@keyframes press-through-glass {
  from { transform: scale(1); }
  to   { transform: scale(1.15); }
}

@keyframes press-knot-settle {
  from { offset-distance: 100%; }
  to   { offset-distance: 0%; }
}

@keyframes press-record-pull {
  from { offset-distance: 0%; }
  to   { offset-distance: 100%; }
}

@keyframes press-rust-pass {
  from { transform: translate(-8%, 3.5%) rotate(-3deg); }
  to   { transform: none; }
}

@keyframes press-black-pass {
  from { transform: translate(9%, -4.5%) rotate(4deg); }
  to   { transform: none; }
}