Page slide transition

/* View Transitions API: slide animation */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: slide-out 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

::view-transition-new(root) {
  animation: slide-in 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slide-out {
  to { transform: translateX(-100%); opacity: 0; }
}

@keyframes slide-in {
  from { transform: translateX(100%); opacity: 0; }
}

/* SPA fallback with pure CSS */
.page-container {
  position: relative;
  overflow: hidden;
}

.page {
  position: absolute;
  inset: 0;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.01s;
  }
  .page { transition-duration: 0.01s; }
}

You are a senior frontend engineer building page navigation transitions.

Goal: A horizontal slide animation between pages — the old page pushes left while the new page enters from the right.

Technical constraints:
- Use the View Transitions API (@view-transition { navigation: auto }) for MPA transitions.
- Override ::view-transition-old(root) and ::view-transition-new(root) with @keyframes slide-out / slide-in.
- Use cubic-bezier(0.4, 0, 0.2, 1) for a material-style ease.
- Use oklch() for all color values — no hex or rgba().
- Duration 0.3–0.5s for the slide.

Framework variant (pick one):
A) MPA — CSS only with @view-transition and ::view-transition pseudo-elements.
B) React SPA — use document.startViewTransition() in a route change handler, CSS handles the animation.

Edge cases to handle:
- Respect prefers-reduced-motion: reduce duration to near-instant or disable the transition.
- Provide a pure-CSS fallback for SPAs without View Transitions API support.
- Ensure the back navigation reverses the slide direction (right to left).

Return CSS + minimal JS for the SPA variant.