/* ─── PAGE LOADER ─── */
#page-loader {
  position: fixed;
  inset: 0;
  background: #07090f;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  transition: opacity .5s ease, visibility .5s ease;
}

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

/* Logo */
.loader-logo {
  opacity: 0;
  transform: translateY(12px);
  animation: loaderFadeUp .5s ease .1s forwards;
}
.loader-logo img {
  height: 48px;
  background: rgba(255,255,255,.92);
  padding: 5px 12px;
  border-radius: 6px;
}

/* Progress bar track */
.loader-bar-track {
  width: 260px;
  height: 2px;
  background: rgba(0,229,255,.12);
  border-radius: 2px;
  overflow: hidden;
  opacity: 0;
  animation: loaderFadeUp .4s ease .3s forwards;
}
.loader-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--cyan);
  border-radius: 2px;
  box-shadow: 0 0 10px var(--cyan);
  transition: width .05s linear;
}

/* Percentage text */
.loader-pct {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .2em;
  color: var(--cyan);
  opacity: 0;
  animation: loaderFadeUp .4s ease .35s forwards;
  margin-top: -.5rem;
}

/* Status line */
.loader-status {
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .15em;
  color: var(--g500);
  text-transform: uppercase;
  opacity: 0;
  animation: loaderFadeUp .4s ease .4s forwards;
  height: 1em;
}

/* Corner brackets on loader */
.loader-corner {
  position: absolute;
  width: 24px;
  height: 24px;
  border-color: rgba(0,229,255,.3);
  border-style: solid;
}
.loader-corner.tl { top: 2rem; left: 2rem; border-width: 1px 0 0 1px; }
.loader-corner.tr { top: 2rem; right: 2rem; border-width: 1px 1px 0 0; }
.loader-corner.bl { bottom: 2rem; left: 2rem; border-width: 0 0 1px 1px; }
.loader-corner.br { bottom: 2rem; right: 2rem; border-width: 0 1px 1px 0; }

/* Scanning line */
.loader-scan {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.loader-scan::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(transparent, rgba(0,229,255,.1), transparent);
  animation: scanline 2s linear infinite;
}

@keyframes loaderFadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* Wordmark text instead of logo */
.loader-wordmark {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--cyan);
  filter: drop-shadow(0 0 12px rgba(0,229,255,.6));
}