/* ============================================
   Loading-page extras: video panel + scored-ads
   progress bar. Kept in its own file to avoid
   concurrent-edit conflicts with batch-b.css.
   ============================================ */

/* --- Video panel (YouTube embed of Tyler's explainer) --- */
.loading-video {
  margin: 1.25rem auto 1.5rem;
  width: 100%;
  max-width: 640px;
}

.loading-video--hidden {
  display: none;
}

.loading-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: hsla(217, 33%, 12%, 0.8);
  border: 1px solid hsla(217, 33%, 22%, 0.6);
  box-shadow: 0 18px 40px -20px hsla(217, 91%, 30%, 0.45);
}

.loading-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.loading-video-caption {
  margin: 0.625rem 0 0;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  letter-spacing: 0.005em;
}

:root.light .loading-video-frame {
  background: hsla(0, 0%, 100%, 0.7);
  border-color: hsla(217, 33%, 80%, 0.7);
}

/* --- Scored-ads progress bar --- */
.loading-progress {
  margin: 0 auto 1.5rem;
  width: 100%;
  max-width: 520px;
}

.loading-progress-track {
  position: relative;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: hsla(217, 33%, 22%, 0.55);
  overflow: hidden;
}

.loading-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    hsl(217, 91%, 60%) 0%,
    hsl(199, 89%, 64%) 100%
  );
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 16px hsla(217, 91%, 60%, 0.45);
}

.loading-progress-label {
  margin: 0.5rem 0 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  text-align: center;
  letter-spacing: 0.005em;
  font-variant-numeric: tabular-nums;
}

:root.light .loading-progress-track {
  background: hsla(217, 33%, 80%, 0.6);
}

/* --- Mobile tweaks --- */
@media (max-width: 540px) {
  .loading-video {
    margin: 1rem auto 1.25rem;
  }
  .loading-video-caption {
    font-size: 0.75rem;
  }
  .loading-progress-label {
    font-size: 0.75rem;
  }
}