html.site-route-pending body { opacity: 0; }
html:is(.site-route-assembling, .site-route-leaving) { overflow-x: clip; }
.site-route-curtain {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}
html.site-route-leaving .site-route-curtain { opacity: 1; }
html.site-route-leaving body { pointer-events: none; }
html.site-route-assembling [data-route-piece] {
  animation: site-route-assemble 500ms cubic-bezier(.16,.84,.24,1) var(--route-delay, 0ms) both;
}
html.site-route-leaving [data-route-piece] {
  animation: site-route-disassemble 240ms ease both;
}
@keyframes site-route-assemble {
  from { opacity: 0; translate: var(--route-x, 0px) 20px; }
  to { opacity: var(--route-opacity, 1); translate: 0 0; }
}
@keyframes site-route-disassemble {
  from { opacity: var(--route-opacity, 1); translate: 0 0; }
  to { opacity: 0; translate: var(--route-x, 0px) -10px; }
}
@media (prefers-reduced-motion: reduce) {
  html.site-route-pending body { opacity: 1; }
  .site-route-curtain { transition: none; }
  html:is(.site-route-assembling, .site-route-leaving) [data-route-piece] { animation: none; }
}