#site-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  isolation: isolate;
  transform: translateZ(0);
  transition: opacity 0.6s ease-in-out;
  overflow: hidden;
}

#site-preloader.preloader--out {
  opacity: 0;
  pointer-events: none;
}

#site-preloader .preloader-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

#site-preloader .preloader-logo {
  height: clamp(3rem, 12vh, 5rem);
  aspect-ratio: 671 / 744;
}

#site-preloader .preloader-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  animation: logo-fade-in 0.9s ease-out forwards;
}

@keyframes logo-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#site-preloader .preloader-bar {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  z-index: 3;
  width: min(8rem, 28vw);
  height: 1px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.15);
  overflow: hidden;
}

#site-preloader .preloader-bar-fill {
  height: 100%;
  width: 100%;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
  animation: preloader-bar-grow 3.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

#site-preloader.preloader--out .preloader-bar-fill {
  animation: none;
  transform: scaleX(1);
  transition: transform 0.25s ease-out;
}

@keyframes preloader-bar-grow {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(0.92);
  }
}