/* Native page transitions keep links, history and opening new tabs intact.
   Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/@view-transition */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  .site-header {
    view-transition-name: site-header;
  }

  .mobile-contact {
    view-transition-name: mobile-contact;
  }

  ::view-transition-group(root) {
    animation-duration: 0.42s;
  }

  ::view-transition-old(root) {
    animation: page-depart 0.22s ease-in both;
  }

  ::view-transition-new(root) {
    animation: page-arrive 0.42s var(--ease-out) both;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    mix-blend-mode: normal;
  }

  ::view-transition-group(site-header),
  ::view-transition-group(mobile-contact) {
    animation-duration: 0.3s;
    animation-timing-function: ease;
  }

  ::view-transition-old(site-header),
  ::view-transition-old(mobile-contact) {
    animation: fade-away 0.2s ease both;
  }

  ::view-transition-new(site-header),
  ::view-transition-new(mobile-contact) {
    animation: fade-in 0.3s ease both;
  }

  /* Older browsers still get a brief entrance without delaying navigation. */
  html.page-transition-fallback main {
    animation: page-arrive 0.42s var(--ease-out) both;
  }
}

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

@keyframes page-arrive {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fade-away {
  to {
    opacity: 0;
  }
}