/* ═══════════════════════════════════════════════════════════
   Udaan Beyond — Loader CSS
   Alag file: /assets/css/loader.css
   ═══════════════════════════════════════════════════════════ */

#loader {
  position: fixed; inset: 0;
  background: #07070a;
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  transition: opacity 0.8s cubic-bezier(0.4,0,0.2,1),
              visibility 0.8s cubic-bezier(0.4,0,0.2,1);
  overflow: hidden;
}
#loader.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* canvas particles */
#loader-cvs {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* corner ornaments */
.loader-corner {
  position: absolute;
  width: 44px; height: 44px;
  opacity: 0.22;
}
.loader-corner-tl { top: 26px; left: 26px;
  border-top: 1px solid #c8a84b; border-left: 1px solid #c8a84b; }
.loader-corner-tr { top: 26px; right: 26px;
  border-top: 1px solid #c8a84b; border-right: 1px solid #c8a84b; }
.loader-corner-bl { bottom: 26px; left: 26px;
  border-bottom: 1px solid #c8a84b; border-left: 1px solid #c8a84b; }
.loader-corner-br { bottom: 26px; right: 26px;
  border-bottom: 1px solid #c8a84b; border-right: 1px solid #c8a84b; }

/* horizontal accent lines */
.loader-hline {
  position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,168,75,0.13), transparent);
}
.loader-hline-t { top: 68px; }
.loader-hline-b { bottom: 68px; }

/* centre content */
.loader-body {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center;
}

/* ── SIGIL ── */
.loader-sigil {
  position: relative;
  width: 144px; height: 144px;
  margin-bottom: 38px;
}
.loader-ring-outer {
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(200,168,75,0.18);
  animation: loaderSpinCCW 9s linear infinite;
}
.loader-ring-outer::before,
.loader-ring-outer::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: #c8a84b;
}
.loader-ring-outer::before {
  width: 6px; height: 6px;
  top: -3px; left: 50%; transform: translateX(-50%);
}
.loader-ring-outer::after {
  width: 4px; height: 4px;
  bottom: -2px; left: 50%; transform: translateX(-50%);
}
.loader-ring-mid {
  position: absolute; inset: 16px;
  border-radius: 50%;
  border: 1.5px dashed rgba(200,168,75,0.22);
  animation: loaderSpinCW 7s linear infinite;
}
.loader-ring-spin {
  position: absolute; inset: 8px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: #c8a84b;
  border-right-color: #e2c97e;
  animation: loaderSpinCW 1.1s cubic-bezier(0.4,0,0.2,1) infinite;
  filter: drop-shadow(0 0 6px rgba(200,168,75,0.5));
}
.loader-ring-glow {
  position: absolute; inset: 34px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200,168,75,0.09) 0%, transparent 70%);
  animation: loaderPulse 2.4s ease-in-out infinite;
}
.loader-monogram {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 3px;
}
.loader-mono-text {
  font-family: 'Cinzel', 'Cormorant Garamond', serif;
  font-size: 1.7rem; font-weight: 700;
  letter-spacing: 6px;
  background: linear-gradient(150deg, #e2c97e 0%, #c8a84b 55%, #7a5e1a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: loaderGlowPulse 2.4s ease-in-out infinite;
}
.loader-mono-line {
  width: 26px; height: 1px;
  background: linear-gradient(90deg, transparent, #c8a84b, transparent);
  animation: loaderLineExpand 2.4s ease-in-out infinite;
}

/* ── TEXT ── */
.loader-brand {
  font-family: 'Cinzel', 'Cormorant Garamond', serif;
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  font-weight: 600; letter-spacing: 9px;
  color: #f0ead8; text-transform: uppercase;
  margin-bottom: 8px;
  opacity: 0;
  animation: loaderFadeUp 0.8s 0.3s forwards;
}
.loader-tagline {
  font-family: 'Cormorant Garamond', 'Cinzel', serif;
  font-size: clamp(0.7rem, 1.5vw, 0.8rem);
  font-style: italic; letter-spacing: 4px;
  color: #c8a84b; text-transform: uppercase;
  margin-bottom: 46px;
  opacity: 0;
  animation: loaderFadeUp 0.8s 0.5s forwards;
}

/* ── PROGRESS ── */
.loader-progress {
  width: clamp(180px, 28vw, 270px);
  display: flex; flex-direction: column;
  align-items: center; gap: 11px;
  opacity: 0;
  animation: loaderFadeUp 0.8s 0.7s forwards;
}
.loader-track {
  width: 100%; height: 1px;
  background: rgba(200,168,75,0.15);
  border-radius: 2px; overflow: hidden;
}
.loader-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #7a5e1a, #c8a84b, #e2c97e);
  border-radius: 2px;
  transition: width 0.2s ease;
  box-shadow: 0 0 8px rgba(200,168,75,0.45);
}
.loader-dots {
  display: flex; gap: 6px; align-items: center;
}
.loader-dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: rgba(200,168,75,0.25);
  transition: background 0.25s;
}
.loader-dot.on { background: #c8a84b; }
.loader-label {
  font-family: 'Cinzel', serif;
  font-size: 0.58rem; letter-spacing: 3px;
  color: rgba(240,234,216,0.35);
  text-transform: uppercase; min-height: 14px;
}

/* ── KEYFRAMES ── */
@keyframes loaderSpinCW  { to { transform: rotate(360deg);  } }
@keyframes loaderSpinCCW { to { transform: rotate(-360deg); } }
@keyframes loaderPulse   {
  0%,100% { opacity: 0.4; transform: scale(1);    }
  50%     { opacity: 1;   transform: scale(1.07); }
}
@keyframes loaderGlowPulse {
  0%,100% { filter: brightness(0.85); }
  50%     { filter: brightness(1.3) drop-shadow(0 0 8px rgba(226,201,126,0.4)); }
}
@keyframes loaderLineExpand {
  0%,100% { width: 18px; opacity: 0.5; }
  50%     { width: 34px; opacity: 1;   }
}
@keyframes loaderFadeUp {
  from { opacity: 0; transform: translateY(13px); }
  to   { opacity: 1; transform: translateY(0);    }
}