@media (prefers-reduced-motion: no-preference) {
  :root[data-smooth-scroll] { scroll-behavior: smooth; }

  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root) {
    animation: none;
    mix-blend-mode: normal;
  }

  ::view-transition-new(root) {
    animation: navigation-fade 180ms ease-out both;
    mix-blend-mode: normal;
  }

  :root[data-page-entry] main {
    animation: navigation-entry 160ms ease-out;
  }
}

@keyframes navigation-fade {
  from { opacity: 0; }
}

@keyframes navigation-entry {
  from { opacity: .82; }
}