@view-transition {
  navigation:auto
}

::view-transition-old(root) {
  animation:site-leave .24s cubic-bezier(.4,0,1,1) both
}

::view-transition-new(root) {
  animation:site-enter .42s cubic-bezier(.22,1,.36,1) both
}

.nav {
  view-transition-name:site-navigation
}

::view-transition-old(site-navigation),::view-transition-new(site-navigation) {
  animation-duration:.32s;
  animation-timing-function:cubic-bezier(.22,1,.36,1)
}

@keyframes site-leave {
  to {
    opacity:0;
    transform:translateY(-7px)
  }

}

@keyframes site-enter {
  from {
    opacity:0;
    transform:translateY(12px)
  }

  to {
    opacity:1;
    transform:none
  }

}

html.fallback-leave .page {
  opacity:0;
  transform:translateY(-7px);
  transition:opacity .18s ease,transform .22s ease
}

.fallback-enter .page {
  animation:site-enter .42s cubic-bezier(.22,1,.36,1)
}

@media(prefers-reduced-motion:reduce) {
  ::view-transition-old(root),::view-transition-new(root),::view-transition-old(site-navigation),::view-transition-new(site-navigation) {
    animation:none
  }

  .fallback-enter .page {
    animation:none
  }

  html.fallback-leave .page {
    opacity:1;
    transform:none;
    transition:none
  }

}