/* =========================================================
   NEXUS TV+ — Cinematic Startup Loading Screen (Red Cinema)
   Deep black / dark crimson ambient stage, the original logo
   asset (favicon.svg) under a travelling red light sweep,
   real initialization progress, smooth hand-off to the app.
   Also carries the player loading-overlay styles (.signal-*).
   ========================================================= */

/* Shared vars — used by the player loading overlay too */
.startup-screen,
.signal-player-loader {
  --pulse-bg: #0a0608;
  --pulse-surface: #150a0e;
  --pulse-ink: #f5e8ea;
  --pulse-muted: #9a7078;
  --pulse-border: rgba(225,29,60,.18);
  --pulse-accent: #e11d3c;
  --pulse-accent2: #a3122a;
  --pulse-accent-light: #ff6b7a;
  --pulse-glow: rgba(225,29,60,.45);
  --pulse-glow-strong: rgba(225,29,60,.7);
  --pulse-xs: clamp(.72rem, .68rem + .12vw, .82rem);
  --pulse-sm: clamp(.84rem, .78rem + .2vw, .95rem);
  --pulse-brand: clamp(2rem, 1.2rem + 2.5vw, 3.2rem);
  font-family: 'Satoshi', 'Inter', sans-serif;
  color: var(--pulse-ink);
}

/* ===== FULLSCREEN STAGE ===== */
#appLoader.startup-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(1100px 560px at 50% -12%, rgba(120,10,28,.30), transparent 62%),
    radial-gradient(900px 620px at 86% 108%, rgba(90,8,22,.22), transparent 60%),
    radial-gradient(700px 480px at 8% 88%, rgba(60,6,16,.20), transparent 60%),
    var(--pulse-bg);
  transition: opacity .55s cubic-bezier(.4,0,.2,1), visibility .55s ease;
}
#appLoader.startup-screen.hide,
#appLoader.hide { opacity: 0; visibility: hidden; pointer-events: none; }

/* Cinematic backdrop layers */
.cinema-bg { position: absolute; inset: 0; overflow: hidden; }
.cinema-bg .cb-glow {
  position: absolute; border-radius: 50%;
  filter: blur(90px); opacity: .30; pointer-events: none;
}
.cinema-bg .cb-glow-1 {
  width: 46vmax; height: 46vmax;
  background: radial-gradient(circle, rgba(225,29,60,.55), transparent 70%);
  top: -18%; left: 50%; transform: translateX(-50%);
  animation: cbBreathe 6s ease-in-out infinite;
}
.cinema-bg .cb-glow-2 {
  width: 30vmax; height: 30vmax;
  background: radial-gradient(circle, rgba(163,18,42,.5), transparent 70%);
  bottom: -14%; right: -8%;
  animation: cbBreathe2 7s ease-in-out 1.2s infinite;
}
@keyframes cbBreathe {
  0%, 100% { opacity: .22; transform: translateX(-50%) scale(.96); }
  50% { opacity: .34; transform: translateX(-50%) scale(1.04); }
}
@keyframes cbBreathe2 {
  0%, 100% { opacity: .18; transform: scale(.96); }
  50% { opacity: .30; transform: scale(1.05); }
}
.cinema-bg .cb-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 120% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%);
}
/* Faint film-grain-free letterbox lines for a cinema feel */
.cinema-bg .cb-vignette::before,
.cinema-bg .cb-vignette::after {
  content: ''; position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--pulse-border), transparent);
}
.cinema-bg .cb-vignette::before { top: 7%; }
.cinema-bg .cb-vignette::after { bottom: 7%; }

/* ===== STAGE ===== */
.cinema-stage {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: 18px; padding: 28px; max-width: 480px; width: 100%;
  min-width: 0; text-align: center;
}

/* Logo with the travelling light sweep */
.cinema-logo-wrap {
  position: relative; width: 168px; height: 168px;
  border-radius: 30px; overflow: hidden; flex-shrink: 0;
  /* subtle ambient pool under the logo */
  filter: drop-shadow(0 18px 50px rgba(225,29,60,.28));
}
.cinema-logo {
  width: 100%; height: 100%; object-fit: contain; display: block;
  animation: cbLogoFloat 5s ease-in-out infinite;
}
@keyframes cbLogoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
/* The light sweep: a narrow skewed red highlight that travels
   across the logo, briefly illuminating it, then dwells before
   the next pass. GPU-friendly: transform-only animation. */
.cinema-sweep {
  position: absolute; top: -35%; bottom: -35%; width: 30%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,90,110,.20) 30%,
    rgba(255,255,255,.55) 50%,
    rgba(255,90,110,.20) 70%,
    transparent 100%);
  filter: blur(7px);
  mix-blend-mode: screen;
  transform: skewX(-14deg) translateX(-420%);
  animation: cinemaSweep 3.4s cubic-bezier(.45,0,.25,1) infinite;
  pointer-events: none;
}
@keyframes cinemaSweep {
  0%, 48% { transform: skewX(-14deg) translateX(-420%); }
  78%, 100% { transform: skewX(-14deg) translateX(520%); }
}

/* Brand wordmark */
.cinema-brand {
  display: flex; align-items: baseline; gap: 10px;
  justify-content: center; width: 100%;
  font-weight: 800; letter-spacing: .04em; line-height: 1;
}
.cinema-brand .cb-nexus {
  font-size: var(--pulse-brand);
  background: linear-gradient(100deg, #ff6b7a, #e11d3c 55%, #a3122a);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.cinema-brand .cb-tv {
  font-size: calc(var(--pulse-brand) * .58);
  color: var(--pulse-ink); letter-spacing: .12em; font-weight: 700;
}

/* Live status line */
.cinema-status {
  font-size: var(--pulse-sm); color: var(--pulse-muted);
  letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  min-height: 1.4em; text-align: center;
  width: 100%; overflow-wrap: anywhere; text-wrap: balance;
  /* Compensate trailing CSS letter spacing, in em rather than a viewport offset. */
  text-indent: .14em;
}

/* Progress */
.cinema-progress { width: 100%; max-width: 424px; min-width: 0; }
.cinema-bar {
  position: relative; height: 3px; border-radius: 2px;
  background: rgba(255,255,255,.09); overflow: hidden; margin-bottom: 16px;
}
.cinema-bar-fill {
  position: absolute; inset: 0 auto 0 0; width: 0%;
  background: linear-gradient(90deg, #a3122a, #e11d3c, #ff6b7a);
  border-radius: 2px;
  box-shadow: 0 0 14px rgba(225,29,60,.65);
  transition: width .45s cubic-bezier(.4,0,.2,1);
}

/* Startup phases */
.cinema-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px;
}
.cinema-steps li {
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--pulse-muted); font-weight: 600;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  white-space: normal; min-width: 0; text-align: center; line-height: 1.5;
}
.cinema-steps li::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.16); transition: background .3s, box-shadow .3s;
}
.cinema-steps li[data-state="active"] { color: var(--pulse-ink); }
.cinema-steps li[data-state="active"]::before {
  background: var(--pulse-accent);
  box-shadow: 0 0 10px rgba(225,29,60,.8);
  animation: cbStepPulse 1.4s ease-in-out infinite;
}
@keyframes cbStepPulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.cinema-steps li[data-state="done"] { color: rgba(154,112,120,.85); }
.cinema-steps li[data-state="done"]::before { background: rgba(225,29,60,.55); }

/* Real stats from the catalog load */
.cinema-stats {
  display: flex; align-items: center; gap: 18px; margin-top: 6px;
}
.cs-item { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.cs-label {
  font-size: 10px; color: var(--pulse-muted); text-transform: uppercase;
  letter-spacing: .12em; font-weight: 600;
}
.cs-value {
  font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: var(--pulse-ink);
}
.cs-value.ok { color: #3ecf8e; }
.cs-divider { width: 1px; height: 26px; background: var(--pulse-border); }

/* Retry (failure state) */
.cinema-retry {
  margin-top: 8px;
  background: var(--pulse-accent); color: #fff;
  border: 1px solid var(--pulse-accent); border-radius: 10px;
  font-family: inherit; font-weight: 700; font-size: 13px;
  padding: 10px 26px; cursor: pointer;
  transition: background .2s, transform .15s, box-shadow .2s;
}
.cinema-retry:hover {
  background: #f5314f; transform: translateY(-1px);
  box-shadow: 0 8px 26px rgba(225,29,60,.35);
}

/* ===== ERROR STATE ===== */
.startup-screen[data-state="error"] .cinema-brand .cb-nexus {
  background: linear-gradient(100deg, #f0b37f, #d97757);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.startup-screen[data-state="error"] .cinema-logo-wrap {
  filter: drop-shadow(0 18px 50px rgba(240,179,127,.25));
}
.startup-screen[data-state="error"] .cinema-sweep { animation-play-state: paused; opacity: .5; }

/* ===== PLAYER LOADING OVERLAY (preserved) ===== */
.loading-overlay.signal-player-loader {
  background: var(--pulse-bg);
}
.signal-player-inner {
  text-align: center;
  max-width: min(420px, 90%);
  padding: 24px;
}
.signal-player-inner .signal-brand {
  justify-content: center;
  margin-bottom: 24px;
}
.signal-player-inner h2 {
  font-size: var(--pulse-sm);
  font-weight: 650;
  letter-spacing: -.04em;
  margin: 0 0 12px;
}
.signal-player-inner p {
  color: var(--pulse-muted);
  font-size: var(--pulse-xs);
  line-height: 1.6;
  margin: 0;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 640px) {
  .cinema-stage { gap: 14px; padding: 20px; }
  .cinema-logo-wrap { width: 128px; height: 128px; border-radius: 24px; }
  .cinema-progress { width: 100%; max-width: 300px; }
  .cinema-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cinema-steps li { font-size: 9.5px; }
  .cinema-steps li:nth-child(3), .cinema-steps li:nth-child(4) { display: none; }
  .cinema-stats { gap: 12px; }
}
@media (max-height: 700px) {
  .cinema-stage { gap: 12px; padding: 16px; }
  .cinema-logo-wrap { width: 112px; height: 112px; }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  .cinema-bg .cb-glow,
  .cinema-logo,
  .cinema-sweep,
  .cinema-steps li[data-state="active"]::before {
    animation: none;
  }
  .cinema-sweep { opacity: 0; }
  #appLoader.startup-screen,
  .cinema-bar-fill {
    transition: none;
  }
}