html.site-loader-active,
html.site-loader-active body {
  overflow: hidden;
}

.site-loader {
  --loader-size: clamp(72px, 10vw, 108px);
  --loader-depth: calc(var(--loader-size) / 2);
  position: fixed;
  z-index: 2147483647;
  inset: 0;
  display: grid;
  place-items: center;
  isolation: isolate;
  opacity: 1;
}

.site-loader::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: '';
  background: #f8f6f2;
}

.site-loader[hidden] {
  display: none;
}

.site-loader.is-hiding {
  visibility: hidden;
  pointer-events: none;
}

.site-loader__scene,
.site-loader__cube {
  width: var(--loader-size);
  height: var(--loader-size);
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

.site-loader__scene {
  perspective: 700px;
}

.site-loader__cube {
  position: relative;
  will-change: transform;
}

.site-loader__face {
  position: absolute;
  inset: 0;
  border: 1px solid #161616;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: transparent;
}

.site-loader__face--front { transform: translateZ(var(--loader-depth)); }
.site-loader__face--back { transform: rotateY(180deg) translateZ(var(--loader-depth)); }
.site-loader__face--right { transform: rotateY(90deg) translateZ(var(--loader-depth)); }
.site-loader__face--left { transform: rotateY(-90deg) translateZ(var(--loader-depth)); }
.site-loader__face--top { transform: rotateX(90deg) translateZ(var(--loader-depth)); }
.site-loader__face--bottom { transform: rotateX(-90deg) translateZ(var(--loader-depth)); }

@media (prefers-reduced-motion: reduce) {
  .site-loader__cube { transform: rotateX(-8deg) rotateY(22deg); }
  .site-loader { transition: none; }
}