/* ==========================================================================
   SLIDE 00 — COLD OPEN (video slot)
   A held 16:9 frame for the cold-open film. The deck opens where the film
   does — the calm boot cursor — so the live talk feels like the film's stage
   extension. Placeholder is clearly marked; swap in the <video> when ready.
   ========================================================================== */

.nc-cold__frame {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: var(--stage-pad-y) var(--stage-pad-x);
  display: flex;
  flex-direction: column;
}

.nc-cold__topbar,
.nc-cold__footbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--fs-label-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  flex: none;
}
.nc-cold__topbar { margin-bottom: var(--space-lg); }
.nc-cold__topbar .nc-eyebrow .idx { color: var(--accent); }
.nc-cold__footbar { margin-top: var(--space-lg); }
.nc-cold__footbar .accent { color: var(--accent-text); }
.nc-cold__cursorline { display: inline-flex; align-items: center; color: var(--text-muted); }

/* the 16:9 stage — fills the remaining height, stays exactly 16:9 */
.nc-cold__stage {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  background:
    radial-gradient(110% 80% at 50% 50%, #161414 0%, #0c0b0b 60%, #080707 100%);
}

/* real video, when dropped in, fills the frame at 16:9 */
.nc-cold__video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* placeholder — a calm play target + a clearly-marked label */
.nc-cold__ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
  text-align: center;
}
/* the label group sits a touch tighter under the play target */
.nc-cold__phlabel { margin-bottom: calc(var(--space-xl) * -0.5); }
/* a faint scanline-free dot grid: technical, not slop. */
.nc-cold__ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(168,162,154,0.08) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 50%, #000 0%, transparent 75%);
          mask-image: radial-gradient(70% 60% at 50% 50%, #000 0%, transparent 75%);
  pointer-events: none;
}

/* the play target is a real <button>: reset chrome, build it deliberately.
   Idle = a calm red ring; hover/focus = it powers up (brighter, lifts);
   active = a quick press. ONE motif — no neon slop, just a power button. */
.nc-cold__play {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  width: 104px; height: 104px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--accent);
  border: 1px solid rgba(214,52,43,0.55);
  background: rgba(214,52,43,0.06);
  box-shadow: 0 0 40px -10px rgba(214,52,43,0.4);
  position: relative;
  z-index: 1;
  cursor: pointer;
  transition:
    color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.nc-cold__play-icon { margin-left: 6px; } /* optical-centre the triangle */

/* a faint outer ring that pulses — the "armed / ready" heartbeat */
.nc-cold__play-ring {
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 1px solid rgba(214,52,43,0.28);
  pointer-events: none;
  animation: nc-cold-ring 2.6s var(--ease-out) infinite;
}
@keyframes nc-cold-ring {
  0%   { transform: scale(1);    opacity: 0.7; }
  70%  { transform: scale(1.18); opacity: 0;   }
  100% { transform: scale(1.18); opacity: 0;   }
}

.nc-cold__play:hover,
.nc-cold__play:focus-visible {
  color: #fff;
  border-color: var(--accent);
  background: rgba(214,52,43,0.16);
  box-shadow: 0 0 56px -8px rgba(214,52,43,0.6), 0 0 0 1px rgba(214,52,43,0.35);
  transform: scale(1.04);
  outline: none;
}
.nc-cold__play:focus-visible { box-shadow: 0 0 56px -8px rgba(214,52,43,0.6), 0 0 0 3px var(--focus-ring); }
.nc-cold__play:active { transform: scale(0.97); }

/* the PLAY cue in the label blinks gently — it reads as "press this" */
.nc-cold__cue { color: var(--accent-text); }

/* file-missing flag — quiet, technical, only shown when the reel is absent.
   Visibility is driven by the state machine (NOT the [hidden] attribute):
   reveal.css forces display on slide children, which beats UA [hidden], so we
   gate it with sufficient specificity here. */
.nc-cold__missing {
  position: relative; z-index: 1;
  margin: 0;
  font-size: var(--fs-label-sm);
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-transform: none;
  font-family: var(--font-mono);
  display: none;
}
.nc-cold__stage[data-cold-state="missing"] .nc-cold__missing { display: inline-flex; }

/* ---- state machine driven by [data-cold-state] on .nc-cold__stage -------- */
/* idle: overlay shown, video hidden underneath */
.nc-cold__stage[data-cold-state="idle"] .nc-cold__video,
.nc-cold__stage[data-cold-state="missing"] .nc-cold__video { opacity: 0; }
/* playing: overlay fades out, video shows (inline fallback if FS denied) */
.nc-cold__stage[data-cold-state="playing"] .nc-cold__ph {
  opacity: 0;
  pointer-events: none;
}
.nc-cold__stage[data-cold-state="playing"] .nc-cold__video { opacity: 1; }
.nc-cold__ph { transition: opacity var(--dur-base) var(--ease-out); }
.nc-cold__video { transition: opacity var(--dur-base) var(--ease-out); }
/* missing: dim the play target so it doesn't look clickable */
.nc-cold__stage[data-cold-state="missing"] .nc-cold__play {
  color: var(--text-muted);
  border-color: var(--border-strong);
  background: transparent;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}
.nc-cold__stage[data-cold-state="missing"] .nc-cold__play-ring { animation: none; opacity: 0; }

/* when the stage itself is the fullscreen element, fill the screen in pure
   black so the film owns the room (no brand chrome bleeding in) */
.nc-cold__stage:fullscreen { border: 0; border-radius: 0; background: #000; }
.nc-cold__stage:-webkit-full-screen { border: 0; border-radius: 0; background: #000; }
.nc-cold__stage:fullscreen .nc-cold__video,
.nc-cold__stage:-webkit-full-screen .nc-cold__video { object-fit: contain; }

@media (prefers-reduced-motion: reduce) {
  .nc-cold__play-ring { animation: none !important; }
}

.nc-cold__phlabel {
  font-size: var(--fs-h3);
  letter-spacing: 0.14em;
  color: var(--text-primary);
  position: relative; z-index: 1;
}
.nc-cold__phlabel .idx { color: var(--accent); margin-right: 0.4em; }

.nc-cold__phsub {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  color: var(--text-muted);
  max-width: 42ch;
  margin: 0;
  position: relative; z-index: 1;
}

.nc-cold__meta { letter-spacing: 0.14em; }

/* ---- the oversized "auto-pilot" cursor ----------------------------------
   On the first gesture (key/click) the cursor flies in from the lower-right
   and "clicks" PLAY for the presenter, so nobody has to aim at the small
   target on stage. Position is driven by JS (transform); CSS owns the look,
   the press squash, and the play target's hit-flash. */
.nc-cold__bigcursor {
  position: absolute;
  left: 0; top: 0;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,0.6));
}
.nc-cold__bigcursor-svg {
  display: block;
  width: 116px; height: 116px;
  transform-origin: 22% 14%;            /* the arrow tip = the click point */
  transition: transform 0.12s var(--ease-out);
}
.nc-cold__bigcursor-svg.is-press { transform: scale(0.8); }

/* the play target reacting to the auto-click (a firmer version of :active) */
.nc-cold__play--hit {
  color: #fff !important;
  border-color: var(--accent) !important;
  background: rgba(214,52,43,0.22) !important;
  box-shadow: 0 0 64px -6px rgba(214,52,43,0.7), 0 0 0 2px rgba(214,52,43,0.5) !important;
  transform: scale(0.92) !important;
}
/* never let the cursor linger once the film is up */
.nc-cold__stage[data-cold-state="playing"] .nc-cold__bigcursor { opacity: 0 !important; }

@media (prefers-reduced-motion: reduce) {
  .nc-cold__bigcursor { display: none; }
}