/* ===========================================================
   Triveni Power - Page Loader
   Gear ring rotates in background; orange arc traces progress;
   logo + tagline centred. Dismissed on window.load.
   =========================================================== */

/* ── Backdrop ─────────────────────────────────────────────── */
#page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #0A0809;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition:
    opacity  700ms cubic-bezier(0.4, 0, 1, 1),
    transform 700ms cubic-bezier(0.4, 0, 1, 1);
  will-change: opacity, transform;
}
#page-loader.is-done {
  opacity: 0;
  transform: translateY(-18px);
  pointer-events: none;
}

/* ── Gear ring (large, rotates slowly, decorative) ────────── */
.ldr-gear {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  animation: ldrGearFade 1.4s ease 0.4s forwards;
}
.ldr-gear svg {
  width: clamp(380px, 50vw, 560px);
  height: clamp(380px, 50vw, 560px);
  animation: ldrGearSpin 28s linear infinite;
  transform-origin: center;
}
@keyframes ldrGearFade { to { opacity: 1; } }
@keyframes ldrGearSpin  { to { transform: rotate(360deg); } }

/* ── Stage (arc + logo, centred above gear) ───────────────── */
.ldr-stage {
  position: relative;
  z-index: 1;
  width:  clamp(260px, 38vw, 380px);
  height: clamp(260px, 38vw, 380px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Arc ring (SVG, fills the stage) ─────────────────────── */
.ldr-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);   /* arc starts from 12 o'clock */
  overflow: visible;
}

/* C = 2π × 168 ≈ 1055.75  (viewBox 360×360, cx=cy=180, r=168) */
#ldrArc {
  stroke-dasharray: 1055.75;
  stroke-dashoffset: 1055.75;
  animation: ldrArcFill 3s cubic-bezier(0.4, 0, 0.2, 1) 0.2s forwards;
  /* transition kicks in when JS overrides animation */
  transition: stroke-dashoffset 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes ldrArcFill {
  0%   { stroke-dashoffset: 1055.75; }
  40%  { stroke-dashoffset: 435;     } /* ~59% */
  75%  { stroke-dashoffset: 160;     } /* ~85% */
  100% { stroke-dashoffset: 106;     } /* ~90% - holds until JS fires */
}

/* ── Centre: logo + tagline ───────────────────────────────── */
.ldr-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.ldr-logo {
  width: clamp(140px, 14vw, 200px);
  height: auto;
  color: #FFFFFF;           /* wordmark inherits this */
  opacity: 0;
  animation: ldrLogoIn 700ms cubic-bezier(0.2, 0.8, 0.2, 1) 300ms forwards;
}
@keyframes ldrLogoIn {
  from { opacity: 0; transform: translateY(8px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

.ldr-tagline {
  font-family: 'Inter', ui-sans-serif, sans-serif;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.32);
  margin: 0;
  /* Centre each line - on narrow phones the tagline can wrap to two lines,
     and without this the wrapped line aligns left and reads off-centre. */
  text-align: center;
  opacity: 0;
  animation: ldrTagIn 500ms ease 900ms forwards;
}
@keyframes ldrTagIn { to { opacity: 1; } }

/* ── Orange glow pulse on the gear centre (atmospheric) ───── */
.ldr-glow {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,130,32,0.10) 0%, transparent 70%);
  animation: ldrGlowPulse 3s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes ldrGlowPulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%       { transform: scale(1.18); opacity: 0.6; }
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ldr-gear,
  .ldr-gear svg   { animation: none; opacity: 0.06; }
  .ldr-logo       { animation: none; opacity: 1; transform: none; }
  .ldr-tagline    { animation: none; opacity: 1; }
  .ldr-glow       { animation: none; }
  #ldrArc         { animation: none; stroke-dashoffset: 106; }
  #page-loader    { transition: opacity 250ms ease; transform: none; }
}

/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 480px) {
  .ldr-gear svg { width: 340px; height: 340px; }
  .ldr-stage    { width: 240px; height: 240px; }
  .ldr-logo     { width: 130px; }
}