Navigation transition

/* Enable cross-document View Transitions */
@view-transition {
  navigation: auto;
}

/* Default: cross-fade (built-in) */

/* Custom: slide-fade for page content */
::view-transition-old(root) {
  animation: nav-out 0.35s ease both;
}

::view-transition-new(root) {
  animation: nav-in 0.35s ease both;
}

@keyframes nav-out {
  to {
    opacity: 0;
    transform: translateX(-2rem);
  }
}

@keyframes nav-in {
  from {
    opacity: 0;
    transform: translateX(2rem);
  }
}

/* Keep header stable during transition */
.page-header {
  view-transition-name: header;
}

::view-transition-group(header) {
  animation: none;
}

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

You are a senior frontend engineer adding page navigation transitions.

Goal: Smooth slide-fade animation between page navigations using the View Transitions API.

Technical constraints:
- Enable with @view-transition { navigation: auto } for MPA sites.
- Override ::view-transition-old(root) and ::view-transition-new(root) with custom @keyframes.
- Keep persistent elements (header, nav) stable by assigning them view-transition-name and animation: none.
- Use oklch() for all color values — no hex or rgba().
- Duration 0.3–0.4s with ease timing.

Framework variant (pick one):
A) MPA — CSS-only, works with standard <a> links between pages.
B) React SPA — wrap router transitions in document.startViewTransition(), CSS handles animation.

Edge cases to handle:
- Respect prefers-reduced-motion: reduce animation duration to near-instant.
- Back navigation should reverse the slide direction (configurable via navigation API types).
- Browsers without View Transitions support simply skip the animation — no broken layout.

Return CSS.