/* ───────────────────────────────────────────────────────────
   Loading overlay (boot) and inline download progress.
   ─────────────────────────────────────────────────────────── */

#loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #020d1c;
  background-image: url('../assets/images/background_enhenced.jpg');
  background-size: cover;
  background-position: center 40%;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

/* Layer 1 — vignette moderado + arco de luz na base */
#loading-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* arco de luz azul-branco na borda inferior */
    radial-gradient(
      ellipse 80% 38% at 50% 102%,
      rgba(130, 175, 255, 0.38) 0%,
      rgba(80, 120, 230, 0.22) 35%,
      rgba(30,  60, 140, 0.08) 60%,
      transparent 75%
    ),
    /* esmagamento do topo — moderado */
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.62) 0%,
      rgba(0, 0, 0, 0.38) 20%,
      rgba(0, 0, 0, 0.10) 45%,
      rgba(0, 0, 0, 0.00) 100%
    ),
    /* vinheta lateral suave */
    radial-gradient(
      ellipse 120% 100% at 50% 50%,
      transparent 48%,
      rgba(0, 0, 0, 0.35) 80%,
      rgba(0, 0, 0, 0.58) 100%
    );
}

/* Layer 2 — arc shimmer: animated sweep along the bottom light arc */
#loading-overlay::after {
  content: '';
  position: absolute;
  left: -30%;
  bottom: -10%;
  width: 160%;
  height: 55%;
  pointer-events: none;
  background: radial-gradient(
    ellipse 60% 55% at 50% 88%,
    rgba(160, 200, 255, 0.12) 0%,
    rgba(100, 148, 255, 0.06) 45%,
    transparent 70%
  );
  animation: arc-pulse 4s ease-in-out infinite;
}
@keyframes arc-pulse {
  0%,  100% { opacity: 0.6; transform: scaleX(1.00); }
  50%        { opacity: 1.0; transform: scaleX(1.06); }
}

#loading-overlay.done {
  opacity: 0;
  pointer-events: none;
}

/* ── Card ───────────────────────────────────────────────── */
.loading-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  user-select: none;
  pointer-events: none;
  padding: 40px 44px 36px;
  border-radius: 10px;
  background: rgba(2, 10, 24, 0.28);
  backdrop-filter: blur(10px) saturate(1.2);
  -webkit-backdrop-filter: blur(10px) saturate(1.2);
  border: 1px solid rgba(130, 175, 255, 0.10);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.3),
    0 24px 64px rgba(0, 0, 0, 0.55),
    0 0 48px rgba(80, 120, 255, 0.06);
}

.loading-logo {
  width: 58px;
  height: 58px;
  margin-bottom: 20px;
  filter:
    drop-shadow(0 0 12px rgba(130, 175, 255, 0.55))
    drop-shadow(0 4px 20px rgba(99, 152, 255, 0.28));
}
.loading-title {
  font: 700 38px/1 var(--font);
  color: var(--bright);
  letter-spacing: 0.20em;
  margin-bottom: 7px;
  text-shadow:
    0 0 24px rgba(130, 175, 255, 0.45),
    0 2px 10px rgba(0, 6, 18, 0.8);
}
.loading-sub {
  font: 400 12px/1 var(--font);
  color: rgba(211, 215, 222, 0.80);
  letter-spacing: 0.08em;
  margin-bottom: 4px;
  text-shadow: 0 1px 8px rgba(0, 6, 18, 0.7);
}
.loading-lab {
  font: 500 9.5px/1 var(--font);
  color: rgba(130, 138, 150, 0.70);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  margin-bottom: 36px;
  text-shadow: 0 1px 8px rgba(0, 6, 18, 0.7);
}

/* ── Progress bar ───────────────────────────────────────── */
.loading-bar-track {
  width: 280px;
  height: 5px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 14px;
  position: relative;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}

.loading-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    #2d5fd4 0%,
    #4d83ee 35%,
    #6398ff 65%,
    #93b6ff 100%
  );
  position: relative;
}


.loading-msg {
  font: 400 10.5px var(--mono);
  color: rgba(130, 138, 150, 0.75);
  letter-spacing: 0.07em;
  min-height: 1.4em;
  transition: opacity 0.25s;
  text-shadow: 0 1px 6px rgba(0, 6, 18, 0.8);
}

/* ── Inline download progress (in sidebar footer area) ─── */
#dl-progress {
  flex-shrink: 0;
  padding: 9px 12px 11px;
  border-top: 1px solid var(--border);
  background: var(--surface-1);
}
#dl-progress[hidden] {
  display: none;
}
.dl-stages {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
  flex-wrap: wrap;
  font: 500 10px var(--font);
  color: var(--muted);
  letter-spacing: 0.04em;
}
.dl-stage {
  display: flex;
  align-items: center;
  gap: 4px;
  font: 500 10px var(--mono);
  color: var(--muted);
  white-space: nowrap;
  letter-spacing: 0.02em;
  transition: color var(--motion-fast);
}
.dl-stage.active {
  color: var(--accent-text);
}
.dl-stage.done {
  color: var(--ok);
}
.dl-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  flex-shrink: 0;
  transition:
    background var(--motion-fast),
    box-shadow var(--motion-fast);
}
.dl-stage.active .dl-dot {
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
  animation: pulse 0.9s ease-in-out infinite;
}
.dl-stage.done .dl-dot {
  background: var(--ok);
  animation: none;
}
.dl-arrow {
  color: var(--dim);
  font-size: 10px;
}
#dl-bar-track {
  height: 3px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 2px;
  overflow: hidden;
}
#dl-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-strong), var(--accent));
  border-radius: 2px;
  transition: width 0.25s ease;
}
#dl-progress.local #dl-bar-fill {
  background: linear-gradient(90deg, #5a8c2a, #8fd64a);
}
#dl-progress.local .dl-stage.active {
  color: #8fd64a;
}
#dl-progress.local .dl-stage.active .dl-dot {
  background: #8fd64a;
  box-shadow: 0 0 6px #8fd64a;
}
#dl-progress.cancelled #dl-bar-fill {
  background: linear-gradient(90deg, #7a2222, var(--err));
  transition: background 0.2s ease;
}
#dl-progress.cancelled .dl-stage.active .dl-dot {
  background: var(--err);
  box-shadow: 0 0 6px var(--err);
  animation: none;
}
#dl-progress.cancelled .dl-stage.active {
  color: var(--err);
}