/* ============================================================
   StrataOPS Official — Site Loader / Splash Screen
   ============================================================ */

/* Prevent FOUC while loading */
body.loading {
  overflow: hidden;
}

/* ── Loader Overlay ─────────────────────────────────────── */
.site-loader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #050505;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-loader.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ── Gold ambient glow behind logo ──────────────────────── */
.site-loader::before {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 168, 67, 0.08) 0%, transparent 70%);
  animation: loaderGlowPulse 3s ease-in-out infinite;
}

@keyframes loaderGlowPulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.15); opacity: 1; }
}

/* ── Logo ───────────────────────────────────────────────── */
.loader-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 1;
  animation: loaderFadeUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.loader-logo-img {
  width: 88px;
  height: 88px;
  object-fit: contain;
  animation: loaderlogoPulse 2s ease-in-out infinite;
}

@keyframes loaderlogoPulse {
  0%, 100% {
    filter: drop-shadow(0 0 10px rgba(212, 168, 67, 0.3));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 28px rgba(212, 168, 67, 0.7));
    transform: scale(1.04);
  }
}

.loader-brand-name {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(
    135deg,
    #6b4f0a 0%,
    #c9a84c 38%,
    #f5d060 65%,
    #c9a84c 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: loaderShimmer 2s linear infinite;
}

@keyframes loaderShimmer {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* ── Tagline ────────────────────────────────────────────── */
.loader-tagline {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(212, 168, 67, 0.5);
  position: relative;
  z-index: 1;
  animation: loaderFadeUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.25s both;
}

/* ── Progress Bar ───────────────────────────────────────── */
.loader-progress-wrap {
  width: 200px;
  height: 2px;
  background: rgba(212, 168, 67, 0.1);
  border-radius: 100px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  animation: loaderFadeUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.4s both;
}

.loader-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #6b4f0a, #c9a84c, #f5d060);
  border-radius: 100px;
  animation: loaderProgress 3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes loaderProgress {
  0%   { width: 0%; }
  15%  { width: 25%; }
  40%  { width: 55%; }
  70%  { width: 78%; }
  90%  { width: 92%; }
  100% { width: 100%; }
}

/* ── Dots row beneath bar ───────────────────────────────── */
.loader-dots {
  display: flex;
  gap: 8px;
  position: relative;
  z-index: 1;
  animation: loaderFadeUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.5s both;
}

.loader-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(212, 168, 67, 0.4);
  animation: loaderDot 1.2s ease-in-out infinite;
}

.loader-dots span:nth-child(2) { animation-delay: 0.15s; }
.loader-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes loaderDot {
  0%, 100% { background: rgba(212, 168, 67, 0.2); transform: scale(0.8); }
  50% { background: rgba(212, 168, 67, 0.8); transform: scale(1.2); }
}

/* ── Shared fade-up keyframe ────────────────────────────── */
@keyframes loaderFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Horizontal gold line decorations ──────────────────── */
.loader-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, transparent, rgba(212, 168, 67, 0.3), transparent);
  position: absolute;
  animation: linePulse 2s ease-in-out infinite;
}

.loader-line-left  { left: calc(50% - 120px); }
.loader-line-right { right: calc(50% - 120px); }

@keyframes linePulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* ── Instant hide when session already loaded ───────────── */
/* Set by inline <head> script before page paint */
.loader-done .site-loader {
  display: none !important;
}
.loader-done body {
  overflow: auto !important;
}