.site-loader {
  display: none;
}

.js .site-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #0a0a0a;
  color: #8d8985;
  opacity: 1;
}

.js.skip-loader .site-loader {
  display: none;
}

.js .site-loader::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: rgba(213, 211, 209, 0.5);
  box-shadow:
    0 -5px 18px rgba(213, 211, 209, 0.08),
    0 5px 18px rgba(213, 211, 209, 0.08);
  opacity: 0;
}

.js body.is-loading {
  overflow: hidden;
}

.loader-shell {
  width: min(280px, calc(100vw - 40px));
  text-align: center;
}

.loader-cat {
  min-height: 4.2em;
  margin: 0;
  color: #a8a29e;
  font: 13px/1.2 "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0;
  white-space: pre;
  user-select: none;
}

.loader-percent {
  margin-top: 12px;
  color: #d5d3d1;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.site-loader.is-revealing {
  pointer-events: none;
  animation: loader-reveal 620ms steps(12, end) forwards;
}

.site-loader.is-revealing::after {
  opacity: 1;
  animation: loader-scan 620ms steps(12, end) forwards;
}

@keyframes loader-reveal {
  0% {
    clip-path: inset(0 0 0 0);
  }
  100% {
    clip-path: inset(0 0 100% 0);
  }
}

@keyframes loader-scan {
  0% {
    bottom: 0;
  }
  100% {
    bottom: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-loader.is-revealing {
    animation-duration: 180ms;
    animation-timing-function: linear;
  }

  .site-loader.is-revealing::after {
    animation-duration: 180ms;
    animation-timing-function: linear;
  }
}