/* One motion language for the homepage and every generated document. */
@view-transition { navigation: auto; }

:root { --page-duration: 620ms; --page-ease: cubic-bezier(.22,.8,.22,1); }
.header, .page-header { view-transition-name: site-navigation; }
::view-transition { background: #060912; }
::view-transition-group(root) { animation: none; }
::view-transition-image-pair(root) { isolation: isolate; }
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: var(--page-duration);
  animation-timing-function: var(--page-ease);
  animation-fill-mode: both;
  mix-blend-mode: normal;
  backface-visibility: hidden;
  overflow: clip;
}
::view-transition-old(root) { animation-name: page-recede; z-index: 1; }
::view-transition-new(root) {
  animation-name: page-cover;
  z-index: 2;
  box-shadow: 0 -18px 70px #0005;
}
::view-transition-group(site-navigation) {
  z-index: 3;
  animation-duration: var(--page-duration);
  animation-timing-function: var(--page-ease);
}
::view-transition-old(site-navigation), ::view-transition-new(site-navigation) {
  mix-blend-mode: normal;
  animation-duration: 180ms;
}

@keyframes page-recede {
  from { transform: none; opacity: 1; border-radius: 0; }
  to { transform: translateY(-5vh) scale(.95); opacity: .62; border-radius: 22px; }
}
@keyframes page-cover {
  from { transform: translateY(100vh); border-radius: 22px 22px 0 0; }
  to { transform: none; border-radius: 0; }
}

/* Returning through browser history lifts the top page away again. */
:root[data-page-direction="back"]::view-transition-old(root) {
  animation-name: page-uncover;
  z-index: 2;
  box-shadow: 0 -18px 70px #0005;
}
:root[data-page-direction="back"]::view-transition-new(root) {
  animation-name: page-return;
  z-index: 1;
  box-shadow: none;
}
@keyframes page-uncover {
  from { transform: none; border-radius: 0; }
  to { transform: translateY(100vh); border-radius: 22px 22px 0 0; }
}
@keyframes page-return {
  from { transform: translateY(-5vh) scale(.95); opacity: .62; border-radius: 22px; }
  to { transform: none; opacity: 1; border-radius: 0; }
}

@media (max-width: 600px) { :root { --page-duration: 500ms; } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}