/* ===================================================================
   EXPLORE � compositor-thread phone motion (html.x-scroll-drive)
   On iOS/Android, pinned scrub + main-thread transform writes always
   chase native momentum by ~1 frame. When scroll-timeline is supported
   (Safari 26+, Chrome 115+), phone + hero ring rise on the SCROLL
   compositor thread � zero main-thread lag on the biggest moving pieces.
   JS still drives screen crossfades, copy, tray, and props.
   =================================================================== */

@supports (animation-timeline: scroll()) {
  html.x-scroll-drive {
    scroll-timeline: --explore-scrub block;
  }

  html.x-scroll-drive .is-scrub .xphone {
    animation: x-drive-phone 1ms linear both;
    animation-timeline: --explore-scrub;
    animation-range: var(--scrub-start, 0px) var(--scrub-end, 100vh);
    transform-origin: center center;
    will-change: transform;
  }

  html.x-scroll-drive .is-scrub .xslide > .xring:not(.xring--front) {
    animation: x-drive-ring 1ms linear both;
    animation-timeline: --explore-scrub;
    animation-range: var(--scrub-start, 0px) var(--scrub-end, 100vh);
    transform-origin: center center;
    will-change: transform;
  }

  html.x-scroll-drive .is-scrub .xring--front {
    animation: x-drive-ring-front 1ms linear both;
    animation-timeline: --explore-scrub;
    animation-range: var(--scrub-start, 0px) var(--scrub-end, 100vh);
    transform-origin: center center;
    will-change: transform;
  }
}

@keyframes x-drive-phone {
  0% {
    transform: translate3d(0, var(--phone-travel, 40vh), 0) scale(1);
  }
  36% {
    transform: translate3d(0, 0, 0) scale(var(--feat-scale, 0.78));
  }
  100% {
    transform: translate3d(0, 0, 0) scale(var(--feat-scale, 0.78));
  }
}

@keyframes x-drive-ring {
  0%   { transform: scale(1.05); }
  36%  { transform: scale(1.18); }
  100% { transform: scale(1.18); }
}

@keyframes x-drive-ring-front {
  0%   { transform: scale(1); }
  36%  { transform: scale(var(--feat-scale, 0.78)); }
  100% { transform: scale(var(--feat-scale, 0.78)); }
}

@media (prefers-reduced-motion: reduce) {
  html.x-scroll-drive .is-scrub .xphone,
  html.x-scroll-drive .is-scrub .xring {
    animation: none !important;
  }
}