/* ============================================
   LOADER
   ============================================ */
.loader {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 32px;
  transition: opacity 0.8s var(--ease-out), visibility 0.8s;
}
.loader.hide { opacity: 0; visibility: hidden; }

.loader-logo {
  position: relative;
  width: 80px; height: 80px;
}
.loader-logo svg {
  width: 100%; height: 100%;
}
.loader-logo .shield-outline {
  stroke: var(--cyan);
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: drawShield 1.4s var(--ease-out) forwards;
}
.loader-logo .shield-fill {
  fill: var(--cyan);
  opacity: 0;
  animation: fadeIn 0.6s 1.2s forwards;
}
@keyframes drawShield {
  to { stroke-dashoffset: 0; }
}
@keyframes fadeIn {
  to { opacity: 0.15; }
}

.loader-bar {
  width: 240px;
  height: 2px;
  background: var(--border);
  overflow: hidden;
  position: relative;
}
.loader-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--gold), transparent);
  animation: loaderSweep 1.8s ease-in-out infinite;
}
@keyframes loaderSweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.loader-text {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--text-mute);
  text-transform: uppercase;
}