/* ===== View Transitions: Page Fade ===== */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
}
@keyframes fade-out {
  to { opacity: 0; transform: translateY(-8px); }
}

/* Main content fades */
::view-transition-old(root) {
  animation: fade-out 0.25s ease-in forwards;
}
::view-transition-new(root) {
  animation: fade-in 0.3s ease-out forwards;
}

/* Keep nav stable during transition */
#nav, .nav, nav {
  view-transition-name: nav;
}
::view-transition-old(nav),
::view-transition-new(nav) {
  animation: none;
  mix-blend-mode: normal;
}

/* Only animate when supported and not reduced-motion */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }
}