/* ============================================================
   PRELOADER — preloader.css
   Independent component. Depends only on global.css variables.
   ============================================================ */

body { overflow: hidden; }
body.preloader-done { overflow: auto; }

.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-black);
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader__glow {
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217,155,110,0.22) 0%, transparent 70%);
  filter: blur(60px);
  animation: preloaderGlowPulse 3s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes preloaderGlowPulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.15); opacity: 1; }
}

.preloader__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.preloader__logo-ring {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20,18,17,0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--c-line);
  box-shadow: 0 0 40px rgba(217,155,110,0.3);
  animation: preloaderLogoReveal 1.1s var(--ease-out) both, preloaderLogoFloat 3s ease-in-out 1.1s infinite;
  will-change: transform, opacity;
}
.preloader__logo-img {
  width: 62%;
  height: 62%;
  object-fit: contain;
}
@keyframes preloaderLogoReveal {
  0% { opacity: 0; transform: scale(0.6) rotate(-20deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes preloaderLogoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.preloader__brand {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--c-text-1);
  text-align: center;
  opacity: 0;
  animation: preloaderBrandFade 0.9s var(--ease-out) 0.35s forwards;
}
.preloader__brand span {
  display: block;
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--c-copper-light);
}
@keyframes preloaderBrandFade {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.preloader__progress {
  width: 220px;
  height: 2px;
  border-radius: 999px;
  background: var(--c-line);
  overflow: hidden;
}
.preloader__progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--grad-copper-soft);
  box-shadow: 0 0 10px rgba(217,155,110,0.6);
  transition: width 0.2s linear;
  will-change: width;
}

@media (prefers-reduced-motion: reduce) {
  .preloader__glow,
  .preloader__logo-ring {
    animation: none;
  }
}