/* ============================================================================
   kinetic-perfection.css — Newtonian scroll-physics layer (2026-06-12)
   Loads after a11y-perfection.css (last). Additive only; compositor channels
   (transform/opacity); every animation double-gated (@supports + reduced-motion).

   PRICING 3D SCROLL ENTRY — multi-stage, mass-and-spring shaped:
   stage 1 (entry 0%):   card "at rest below the fold" — translated down 36px,
                         tipped back 8deg (rotateX) like a plate lying toward
                         the viewer, 96% scale, 20% opacity.
   stage 2 (entry ~55%): momentum overshoot — the mass passes equilibrium:
                         -4px above rest, -1.5deg forward tip, 100.5% scale.
                         Overshoot magnitude ≈ 11% of travel — an underdamped
                         spring (zeta≈0.6), not a linear ramp.
   stage 3 (entry 70%):  settles to identity.
   This SUPERSEDES motion-premium's single-stage :where() mpCardIn on
   .price-card (class selector here outweighs :where()'s zero specificity) and
   absorbs its opacity duty, so the two layers compose instead of double-firing.
   ============================================================================ */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .pricing-grid .price-card,
    .section-buy .price-card {
      animation: kp-card-rise linear backwards;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
  }
}

/* `animation-timeline: view()` maps keyframe % to scroll progress; the spring
   shape lives in the keyframe spacing itself (55% overshoot station), so the
   `linear` timing function is the correct scroll-physics choice here — the
   curve IS the keyframes, not the easing. */
@keyframes kp-card-rise {
  0% {
    opacity: 0.2;
    transform: perspective(900px) translateY(36px) rotateX(8deg) scale(0.96);
  }
  55% {
    opacity: 1;
    transform: perspective(900px) translateY(-4px) rotateX(-1.5deg) scale(1.005);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}