.site-preloader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  color: #f2f2f2;
  background:
    radial-gradient(ellipse 775px 650px at calc(50% - 553px) calc(50% - 232px), rgb(31 48 61 / 59%), transparent 100%),
    radial-gradient(ellipse 420px 400px at calc(50% + 422px) calc(50% + 58px), rgb(117 79 38 / 34%), transparent 100%),
    radial-gradient(ellipse 500px 400px at calc(50% + 12px) calc(50% + 498px), rgb(26 33 38 / 13%), transparent 100%),
    #0c0f11;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

html[data-site-loading='true'] { overflow: hidden; }
html[data-site-loading='true'] .site-preloader {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
html[data-site-loading='leaving'] .site-preloader {
  visibility: visible;
  opacity: 0;
  transition: opacity 420ms cubic-bezier(.2, .7, .2, 1);
}

.site-preloader-content {
  display: grid;
  justify-items: center;
  gap: 20px;
  width: min(220px, 70vw);
  transform: translateY(-12px);
}
.site-preloader-content img { display: block; width: 58px; height: 54px; }
.site-preloader-brand { font: 500 18px/1.3 Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif; letter-spacing: .04em; white-space: nowrap; }
.site-preloader-track { position: relative; display: block; width: 100%; height: 2px; margin-top: 9px; overflow: hidden; border-radius: 2px; background: rgb(255 255 255 / 14%); }
.site-preloader-track > span { position: absolute; inset: 0 auto 0 0; width: 42%; border-radius: inherit; background: linear-gradient(90deg, #aeb8c6, #f1d898); animation: site-loading-sweep 1.35s ease-in-out infinite alternate; }

@keyframes site-loading-sweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(340%); }
}

@media (max-width: 767px) {
  .site-preloader {
    background:
      radial-gradient(ellipse 120% 70% at 5% 20%, rgb(31 48 61 / 48%), transparent 100%),
      radial-gradient(ellipse 90% 65% at 100% 80%, rgb(117 79 38 / 25%), transparent 100%),
      #0c0f11;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-site-loading='leaving'] .site-preloader { transition: none; }
  .site-preloader-track > span { animation: none; transform: none; width: 100%; }
}