.page-transition-surface {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.page-transition-enter .page-transition-surface {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
}

.page-transition-enter.page-transition-ready .page-transition-surface {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 620ms ease-out,
    transform 620ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .page-transition-enter.page-transition-ready .page-transition-surface {
    transition-duration: 1ms;
  }
}