/*
 * Page transitions
 * ----------------
 * Cross-document View Transitions: the browser animates between pages on normal
 * link clicks, no JavaScript needed. Browsers without support navigate as before.
 */

@view-transition {
  navigation: auto;
}

/* Keep the fixed navigation bar in place while the page content changes */
nav {
  view-transition-name: site-nav;
}

::view-transition-old(root) {
  animation: 200ms ease-in both page-out;
}

::view-transition-new(root) {
  animation: 400ms cubic-bezier(0.2, 0.7, 0.2, 1) 60ms both page-in;
}

@keyframes page-out {
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@keyframes page-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

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