/* Preloader v2 */
:root {
  --preloader-bg: #fff;
  --preloader-z: 9999;
  --preloader-hold-ms: 800ms;
  --preloader-slide-duration: 1000ms;
  --preloader-logo-width: clamp(60%, 12vw, 300px);
}

#preloader {
  position: fixed;
  inset: 0;
  background: var(--preloader-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--preloader-z);
  transform: translateY(0);
  transition: transform var(--preloader-slide-duration) ease;
  will-change: transform;
}

#preloader-logo {
  width: var(--preloader-logo-width);
  height: auto;
  opacity: 0;
  animation: preloaderFade 1s ease-out forwards;
  will-change: opacity;
}

@keyframes preloaderFade {
  to { opacity: 1; }
}

#preloader.preloader--hidden {
  transform: translateY(-100%);
}

html.preloader-lock,
body.preloader-lock {
  overflow: hidden;
  height: 100%;
}

@media (prefers-reduced-motion: reduce) {
  #preloader-logo {
    animation: none;
    opacity: 1;
  }

  #preloader {
    transition: none;
  }
}