html.page-motion-enabled body {
  opacity: 0;
}

html.page-motion-entering body {
  animation: arcana-page-enter 460ms cubic-bezier(.16, 1, .3, 1) both;
}

html.page-motion-leaving body {
  pointer-events: none;
  animation: arcana-page-leave 220ms cubic-bezier(.4, 0, 1, 1) both;
}

@keyframes arcana-page-enter {
  from {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(10px) scale(.997);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}

@keyframes arcana-page-leave {
  from {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    filter: blur(3px);
    transform: translateY(-5px) scale(.998);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.page-motion-enabled body,
  html.page-motion-entering body,
  html.page-motion-leaving body {
    opacity: 1;
    animation: none !important;
    filter: none;
    transform: none;
  }
}