/* ring: commons
 * seed: inherit
 * still: ../patterns/parallax/still.md
 * reduced: replace (reduced.css kills the timeline; planes stack as designed still)
 * when-not: playground scrub / LAW #0 stills (native timeline ignores ?t= — force [data-c-driver="js"] there)
 *
 * Cheapest renderer first: native CSS scroll-driven animation where supported.
 * Same physical scroll position as raf-scroll-t — this is a renderer tier, not a second t.
 * [data-c-driver="js"] opts a subtree out of the native tier (deterministic scrub via --c-t).
 */

@supports (animation-timeline: scroll()) {
  :not([data-c-driver="js"]) > [data-c-parallax] [data-plane] {
    animation: c-plane-rise linear both;
    animation-timeline: scroll(root);
  }
  :not([data-c-driver="js"]) > [data-c-parallax] [data-plane="near"] { --c-travel: var(--c-travel-near, 96px); }
  :not([data-c-driver="js"]) > [data-c-parallax] [data-plane="mid"]  { --c-travel: var(--c-travel-mid, 48px); }
  :not([data-c-driver="js"]) > [data-c-parallax] [data-plane="far"]  { --c-travel: var(--c-travel-far, 16px); }
}

@keyframes c-plane-rise {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, calc(var(--c-travel, 48px) * -1), 0); }
}

@media (prefers-reduced-motion: reduce) {
  [data-c-parallax] [data-plane] {
    animation: none;
    transform: none;
  }
}