@view-transition {
  navigation: auto;
}

html {
  background-color: #0f1c2e;
}

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

::view-transition-new(root) {
  animation: page-transition-in 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.site-brand-logo {
  view-transition-name: site-brand-logo;
}

::view-transition-group(site-brand-logo) {
  animation-duration: 420ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

::view-transition-old(site-brand-logo),
::view-transition-new(site-brand-logo) {
  height: 100%;
  object-fit: contain;
}

@keyframes page-transition-out {
  to {
    opacity: 0;
    transform: translateY(-8px);
    filter: blur(2px);
  }
}

@keyframes page-transition-in {
  from {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(3px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-group(site-brand-logo) {
    animation: none;
  }
}