/* ==========================================================================
   [N1-LOAD candidate A] — inline status chip in the Pause slot.
   Loaded after css/style.css (which is unchanged). While the film buffers
   (.stage.is-loading) the chip replaces the 'Pause motion' button in the same
   flex slot, so Inspect stays where it is; when the film starts the chip is
   removed and the button appears in the same place. Nothing is drawn over
   the hero. Reuses the existing control tokens (--ctl-bg, --ctl-border,
   --hud-text, --font); no new colours.
   ========================================================================== */

/* no 'Pause motion' before playback: .is-loading = buffering, .is-held = left "loading" without having played (manual / Inspect),
   .is-failed = the scene module failed and the film will never play (js/loading.js sets all three) */
.stage.is-loading #pauseBtn,
.stage.is-failed #pauseBtn { display: none; }
/* static fallback (reduced motion / no WebGL / init error): scene.js:51 sets #playbackControls.hidden, but style.css:227 gives
   .playback-controls display:flex with no [hidden] rule, so 'Pause motion' (and an Inspect with no handler) stayed over the
   poster. Honour the attribute, as style.css:253 already does for .ctl-btn[hidden]. */
.playback-controls[hidden] { display: none; }
.stage:not(.is-loading) .load-chip,
.stage.is-held .load-chip { display: none; }

.load-chip {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  margin: 0; min-height: 48px; padding: 0 18px;         /* same box metrics as .ctl-btn */
  background: var(--ctl-bg);
  border: 1px solid var(--ctl-border);
  border-radius: 2px;
  color: var(--hud-text);
  font-family: var(--font);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  backdrop-filter: blur(3px);
  cursor: default;
}

/* indeterminate hairline: honest "working" signal, not a fake percentage */
.load-chip .load-bar {
  position: absolute; left: 0; bottom: 0;
  width: 40%; height: 2px;
  background: var(--hud-text);
  animation: load-sweep 1.6s ease-in-out infinite;
}
@keyframes load-sweep {
  from { transform: translateX(-100%); }
  to   { transform: translateX(250%); }
}

@media (prefers-reduced-motion: reduce) {
  .load-chip .load-bar { animation: none; width: 100%; opacity: 0.55; }
}