/* Slow-load state: hidden by default so fast navigations never flash a loader. */
[data-site-loader][hidden] { display: none; }

.site-loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--midnight);
  color: var(--paper);
  opacity: 1;
  pointer-events: auto;
}

.site-loader__inner {
  display: grid;
  justify-items: center;
  gap: 18px;
  width: min(260px, 100%);
  text-align: center;
}

.site-loader__mark {
  width: 22px;
  height: 35px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.site-loader__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  line-height: 1.5;
  text-transform: uppercase;
}

.site-loader__track {
  width: min(176px, 72vw);
  height: 1px;
  overflow: hidden;
  background: rgb(255 255 255 / .24);
}

.site-loader__progress {
  display: block;
  width: 42%;
  height: 100%;
  background: var(--thistle);
  transform: translateX(-115%);
  animation: site-loader-sweep 1.45s cubic-bezier(.22,.68,0,1) infinite;
}

body[data-loading] { overflow: hidden; }

body[data-loading-done] .site-loader {
  opacity: 0;
  pointer-events: none;
  transition: opacity 360ms cubic-bezier(.16,1,.3,1);
}

@keyframes site-loader-sweep {
  0% { transform: translateX(-115%); }
  55%, 100% { transform: translateX(350%); }
}

@media (prefers-reduced-motion: reduce) {
  .site-loader__progress {
    width: 100%;
    transform: none;
    animation: none;
    opacity: .72;
  }

  body[data-loading-done] .site-loader { transition: opacity 180ms linear; }
}