html {
  background: #070707;
}

@media (prefers-reduced-motion: no-preference) {
  body.page-enter {
    animation: site-fade-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  body.page-enter:not(.is-entered) .page-enter-item {
    opacity: 0;
    transform: translateY(16px);
  }

  body.page-enter.is-entered .page-enter-item {
    animation: page-enter-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--enter-delay, 0s) forwards;
  }
}

@keyframes site-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes page-enter-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.page-enter .page-enter-item {
    opacity: 1;
    transform: none;
  }
}