/* Keep normal links, history and full-navigation fallbacks. Browsers without
   View Transitions ignore this enhancement. No artificial loading delay. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  ::view-transition-old(root) {
    animation: navigation-leave 120ms ease-out both;
  }
  ::view-transition-new(root) {
    animation: navigation-arrive 180ms ease-out both;
  }
}

@keyframes navigation-leave { to { opacity: 0; } }
@keyframes navigation-arrive { from { opacity: 0; } }

/* Also cover a preference change while a transition is already running. */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}