html[data-curtain='loading'] {
  background: var(--curtain-initial, #040715);
}
.page-curtain {
  display: none;
}
html[data-curtain] .page-curtain {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 10000;
  flex-direction: column;
  overflow: hidden;
  pointer-events: auto;
}
.page-curtain > span {
  flex: 1;
  background: color-mix(
    in srgb,
    var(--bg, #040715) 88%,
    var(--ink, #ffffff) 12%
  );
  transform: scaleY(1.02);
  transform-origin: top;
}
html[data-curtain='opening'] .page-curtain > span {
  transform: scaleY(0);
  transition: transform 430ms cubic-bezier(0.76, 0, 0.24, 1);
  transition-delay: calc(var(--i) * 55ms);
}
html[data-curtain='preparing'] .page-curtain > span {
  transform: scaleY(0);
  transform-origin: bottom;
}
html[data-curtain='closing'] .page-curtain > span {
  transform-origin: bottom;
  transition: transform 180ms cubic-bezier(0.76, 0, 0.24, 1);
  transition-delay: calc((9 - var(--i)) * 20ms);
}
@media (prefers-reduced-motion: reduce) {
  html[data-curtain='opening'] .page-curtain {
    display: none;
  }
  .page-curtain > span {
    transition: none !important;
  }
}