@view-transition {
  navigation: auto;
}

html {
  background: #f1efe7;
}

::view-transition-group(root) {
  animation-duration: 220ms;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}

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

::view-transition-new(root) {
  animation: woyoumi-page-in 220ms cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes woyoumi-page-out {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes woyoumi-page-in {
  from {
    opacity: .96;
    transform: translate3d(0, 2px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

html.page-transition-fallback.page-transition-entering {
  animation: woyoumi-fallback-in 180ms cubic-bezier(.22, 1, .36, 1) both;
}

html.page-transition-fallback.page-transition-leaving {
  animation: woyoumi-fallback-out 90ms ease-in both;
  pointer-events: none;
}

@keyframes woyoumi-fallback-in {
  from { opacity: .96; }
  to { opacity: 1; }
}

@keyframes woyoumi-fallback-out {
  from { opacity: 1; }
  to { opacity: .96; }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: .01ms !important;
  }

  html.page-transition-fallback.page-transition-entering,
  html.page-transition-fallback.page-transition-leaving {
    animation: none !important;
  }
}