/* Scoped mechanism only. No reset, typography, palette, body or scrollbar rules. */
@layer scroll-craft {
  :where([data-sc-root].sc-enhanced[data-sc-motion="full"])
  :where([data-sc-act="pin"], [data-sc-act="pan"], [data-sc-act="scrub"]) {
    position: relative;
    block-size: calc(var(--sc-span, 1.5) * 100svh);
  }

  :where([data-sc-root].sc-enhanced[data-sc-motion="full"])
  :where([data-sc-act="pin"], [data-sc-act="pan"], [data-sc-act="scrub"])
  > :where([data-sc-stage], .sc-stage) {
    position: sticky;
    inset-block-start: 0;
    block-size: 100svh;
    overflow: clip;
  }

  :where([data-sc-root].sc-enhanced[data-sc-motion="full"]) [data-sc-cue] {
    opacity: var(--sc-opacity, 1);
    transform: translate3d(0, var(--sc-cue-y, 0px), 0);
    pointer-events: var(--sc-hit, auto);
  }

  /* A keyboard target becomes visible immediately while focus parking settles. */
  :where([data-sc-root].sc-enhanced) [data-sc-cue]:focus-within {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  :where([data-sc-root].sc-enhanced[data-sc-motion="full"]) [data-sc-parallax] {
    transform: translate3d(0, var(--sc-parallax-y, 0px), 0);
  }

  :where([data-sc-root].sc-enhanced[data-sc-motion="full"]) [data-sc-pan] {
    transform: translate3d(var(--sc-pan-x, 0px), 0, 0);
  }

  /* Promote only the active act, then release compositor residency. */
  :where([data-sc-root].sc-enhanced[data-sc-motion="full"]) [data-sc-active]
  :where([data-sc-cue], [data-sc-parallax], [data-sc-pan]) {
    will-change: transform, opacity;
  }

  :where([data-sc-root].sc-enhanced) video[data-sc-scrub][data-sc-src] {
    opacity: 0;
  }

  :where([data-sc-root].sc-enhanced) .sc-media-ready video[data-sc-scrub][data-sc-src],
  :where([data-sc-root].sc-enhanced) video.sc-media-ready[data-sc-scrub][data-sc-src] {
    opacity: 1;
  }

  /* Reduced/static is a linear edit of the same semantic source. */
  :where([data-sc-root].sc-enhanced:is([data-sc-motion="reduced"], [data-sc-motion="static"]))
  :where([data-sc-act="pin"], [data-sc-act="pan"], [data-sc-act="scrub"]) {
    block-size: auto;
  }

  :where([data-sc-root].sc-enhanced:is([data-sc-motion="reduced"], [data-sc-motion="static"]))
  :where([data-sc-act="pin"], [data-sc-act="pan"], [data-sc-act="scrub"])
  > :where([data-sc-stage], .sc-stage) {
    position: relative;
    inset-block-start: auto;
    block-size: auto;
    overflow: visible;
  }

  :where([data-sc-root].sc-enhanced:is([data-sc-motion="reduced"], [data-sc-motion="static"]))
  :where([data-sc-cue], [data-sc-parallax], [data-sc-pan]) {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    will-change: auto;
  }

  :where([data-sc-root].sc-enhanced:is([data-sc-motion="reduced"], [data-sc-motion="static"]))
  [data-sc-act="pan"] > :where([data-sc-stage], .sc-stage) {
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-inline: contain;
  }

  :where([data-sc-root].sc-enhanced:is([data-sc-motion="reduced"], [data-sc-motion="static"]))
  video[data-sc-scrub][data-sc-src] {
    display: none;
  }

  @media print {
    :where([data-sc-root].sc-enhanced)
    :where([data-sc-act="pin"], [data-sc-act="pan"], [data-sc-act="scrub"]) {
      block-size: auto !important;
    }

    :where([data-sc-root].sc-enhanced) :where([data-sc-stage], .sc-stage) {
      position: relative !important;
      block-size: auto !important;
      overflow: visible !important;
    }

    :where([data-sc-root].sc-enhanced) :where([data-sc-cue], [data-sc-parallax], [data-sc-pan]) {
      opacity: 1 !important;
      transform: none !important;
    }

    :where([data-sc-root].sc-enhanced) video[data-sc-scrub][data-sc-src] {
      display: none !important;
    }
  }
}