:root {
  --loader-ink: #10100f;
  --loader-bone: #eeeae0;
  --loader-signal: #f24b32;
  --loader-muted: #b5b0a7;
}

.page-loader {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--loader-ink);
  color: var(--loader-bone);
  opacity: 1;
  visibility: visible;
  transition: opacity .42s cubic-bezier(.22,.75,.2,1), visibility .42s;
}

.page-loader::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 49.95%, rgba(238,234,224,.09) 50%, transparent 50.05%),
    linear-gradient(0deg, transparent 49.95%, rgba(238,234,224,.09) 50%, transparent 50.05%),
    radial-gradient(circle at 50% 50%, rgba(242,75,50,.14), transparent 34%);
  background-size: 25vw 25vh, 25vw 25vh, auto;
  content: "";
  opacity: .55;
}

.page-loader::after {
  position: absolute;
  width: min(58vw, 560px);
  aspect-ratio: 1;
  border: 1px solid rgba(238,234,224,.14);
  border-radius: 50%;
  box-shadow: 0 0 0 34px rgba(238,234,224,.025), 0 0 0 35px rgba(238,234,224,.08);
  content: "";
  animation: page-loader-orbit 12s linear infinite;
}

.page-loader.is-done {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.page-loader img {
  position: relative;
  z-index: 1;
  width: clamp(92px, 12vw, 170px);
  height: auto;
  filter: invert(1);
  animation: page-loader-mark 1.1s cubic-bezier(.22,.75,.2,1) both;
}

.page-loader span {
  position: absolute;
  z-index: 1;
  top: calc(50% + clamp(92px, 12vw, 170px) / 2 + 30px);
  color: var(--loader-muted);
  font: 10px/1 var(--loader-mono, "JetBrains Mono", Consolas, monospace);
  letter-spacing: .16em;
  text-transform: uppercase;
}

@keyframes page-loader-mark {
  from { opacity: 0; transform: scale(.78) rotate(-8deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes page-loader-orbit {
  to { transform: rotate(360deg); }
}

html.is-leaving .page-loader {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .page-loader::after { animation-duration: 20s; }
  .page-loader img { animation-duration: .01ms; }
}

html.no-motion .page-loader::after,
html.no-motion .page-loader img {
  animation: none;
}