html {
  background: #000;
}

[data-page-shell] {
  transform-origin: center top;
  transition:
    opacity 850ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 850ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 850ms cubic-bezier(0.22, 1, 0.36, 1);
}

html.page-entering-forward [data-page-shell],
html.page-leaving-back [data-page-shell] {
  opacity: 0;
  transform: translateY(48px) scale(1.02);
  filter: blur(8px);
}

html.page-entering-back [data-page-shell],
html.page-leaving-forward [data-page-shell] {
  opacity: 0;
  transform: translateY(-34px) scale(0.968);
  filter: blur(7px);
}

html.page-entering-forward #root[data-page-shell],
html.page-entering-back #root[data-page-shell],
html.page-leaving-forward #root[data-page-shell],
html.page-leaving-back #root[data-page-shell] {
  filter: none;
}

html.page-entering-forward [data-page-shell],
html.page-entering-back [data-page-shell],
html.page-leaving-forward [data-page-shell],
html.page-leaving-back [data-page-shell] {
  will-change: opacity, transform, filter;
}

html.page-leaving-forward [data-page-shell],
html.page-leaving-back [data-page-shell] {
  transition-duration: 620ms;
  pointer-events: none;
}

html.page-revealing-forward [data-page-reveal] {
  animation: page-content-reveal 750ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

html.page-revealing-forward [data-page-reveal="1"] { animation-delay: 80ms; }
html.page-revealing-forward [data-page-reveal="2"] { animation-delay: 150ms; }
html.page-revealing-forward [data-page-reveal="3"] { animation-delay: 220ms; }
html.page-revealing-forward [data-page-reveal="4"] { animation-delay: 290ms; }
html.page-revealing-forward [data-page-reveal="5"] { animation-delay: 360ms; }
html.page-revealing-forward [data-page-reveal="6"] { animation-delay: 430ms; }

@keyframes page-content-reveal {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  [data-page-shell] {
    transition: none;
  }
  html.page-revealing-forward [data-page-reveal] {
    animation: none;
  }
}