@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: fade-out 0.35s cubic-bezier(0.4, 0, 1, 1) forwards;
}
::view-transition-new(root) {
  animation: slide-in 0.45s cubic-bezier(0, 0, 0.2, 1) forwards;
}

@keyframes fade-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-16px) scale(0.98); }
}
@keyframes slide-in {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

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