html {
  background: var(--transition-layer, #10202a);
}
html.js::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  pointer-events: none;
  opacity: 1;
  background:
    radial-gradient(circle at 82% 22%, rgba(255,205,0,.14), transparent 25%),
    linear-gradient(135deg, var(--transition-layer, #10202a), #16303f);
  transition: opacity 260ms cubic-bezier(.22,.72,.28,1);
}
html.js.page-ready::before { opacity: 0; }
html.js.page-leaving::before { opacity: 1; }

.reveal { opacity: 1; transform: none; }
html.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 650ms cubic-bezier(.22,.72,.28,1) var(--reveal-delay, 0ms),
    transform 650ms cubic-bezier(.22,.72,.28,1) var(--reveal-delay, 0ms);
}
html.js .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js::before { display: none; }
  html.js .reveal,
  html.js .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}