/* ═══════════════════════════════════════════════
   Page Loader — loader.css
   ═══════════════════════════════════════════════ */

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

/* ── Loader overlay ── */
.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.loader.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ── Dark background with subtle construction grid ── */
.loader__bg {
  position: absolute;
  inset: 0;
  background: #1a1e2a;
  background-image:
    linear-gradient(rgba(249,168,38,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(249,168,38,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* Radial orange glow in center */
.loader__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 55% at 50% 50%,
    rgba(249,168,38,0.1) 0%,
    transparent 70%);
}

/* ── Content wrapper ── */
.loader__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

/* ── Gear logo stack ── */
.loader__logo {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Outer ring — slow counter-clockwise */
.loader__gear--outer {
  position: absolute;
  width: 120px;
  height: 120px;
  animation: spinCCW 8s linear infinite;
}

/* Inner hexagon gear — fast clockwise */
.loader__gear--inner {
  position: absolute;
  width: 76px;
  height: 76px;
  animation: spinCW 3s linear infinite;
  filter: drop-shadow(0 0 16px rgba(249,168,38,0.55));
}

@keyframes spinCW {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes spinCCW {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

/* ── Brand text ── */
.loader__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  animation: fadeUp 0.7s ease both 0.2s;
}

.loader__name {
  font-family: 'Poppins', 'Segoe UI', sans-serif;
  font-size: 1.8rem;
  font-weight: 900;
  letter-spacing: 6px;
  color: #ffffff;
  text-transform: uppercase;
  line-height: 1;
}

.loader__name span { color: #f9a826; }

.loader__tagline {
  font-family: 'Poppins', 'Segoe UI', sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 4px;
  color: #f9a826;
  text-transform: uppercase;
  opacity: 0.85;
}

/* ── Progress bar ── */
.loader__bar-wrap {
  width: 200px;
  height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
  animation: fadeUp 0.6s ease both 0.3s;
}

.loader__bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #f9a826, #ffcf6e, #f9a826);
  background-size: 200% 100%;
  border-radius: 2px;
  animation:
    barFill 1.8s cubic-bezier(0.4, 0, 0.2, 1) forwards 0.1s,
    barShimmer 1s linear infinite;
}

@keyframes barFill {
  0%   { width: 0%; }
  60%  { width: 75%; }
  100% { width: 100%; }
}

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

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}