.site-preloader { display: none; }
html.is-loading { overflow: hidden; }
html.is-loading .site-preloader,
.site-preloader.is-leaving { display: grid; }

.site-preloader {
  position: fixed;
  z-index: 2000;
  inset: 0;
  place-items: center;
  background: #f8f8f6;
  overflow: hidden;
  transition: opacity .4s cubic-bezier(.22, 1, .36, 1);
}
.loading-logo { position: relative; width: 260px; height: 260px; }
.loading-logo canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.loading-logo.is-3d canvas { opacity: 1; }
.loading-label { position: absolute; top: calc(100% - 25px); left: 0; width: 100%; text-align: center; color: #77747f; font: 400 12px/1.5 Inter, Arial, sans-serif; letter-spacing: .04em; }
.site-preloader.is-leaving { opacity: 0; pointer-events: none; }

@media (max-width: 600px) {
  .loading-logo { width: 220px; height: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-preloader { transition: none; }
}