@keyframes pageEnterUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pageEnterFromRight {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  html.page-enter-ready [data-page-enter]:not(.is-page-enter-visible) {
    opacity: 0;
    transform: translateY(14px);
  }

  html.page-enter-ready [data-page-enter="from-right"]:not(.is-page-enter-visible) {
    transform: translateX(10px);
  }

  html.page-enter-on [data-page-enter].is-page-enter-visible {
    --page-enter-duration: 0.58s;
    --page-enter-ease: cubic-bezier(0.22, 1, 0.36, 1);
    animation: pageEnterUp var(--page-enter-duration) var(--page-enter-ease) both;
    animation-delay: calc(
      var(--page-enter-base, 0ms) + var(--page-enter-step, 55ms) * var(--page-enter-i, 0)
    );
  }

  html.page-enter-on [data-page-enter].is-page-enter-visible[data-page-enter="from-right"] {
    animation-name: pageEnterFromRight;
    --page-enter-duration: 0.5s;
  }

  html.page-enter-on [data-page-enter].is-page-enter-visible[data-page-enter="slow"] {
    --page-enter-duration: 0.68s;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.page-enter-ready [data-page-enter] {
    opacity: 1;
    transform: none;
  }
}