/* ───────────────────────────────────────────────────────────────────
   R3F HARNESS · shared figure / poster / canvas styling
   Loaded once per page alongside r3f-harness.js. Matches the WDC blog
   figure pattern so these figures sit beside the Canvas2D ones.
   ─────────────────────────────────────────────────────────────────── */

/* the stage holds the poster and (when mounted) the live canvas, stacked */
.r3f-stage{
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #02030d;            /* WDC void, shows under the poster while it loads */
}
.r3f-stage .r3f-poster,
.r3f-stage .r3f-canvas{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
.r3f-poster{
  object-fit: cover;
  opacity: 1;
  transition: opacity 360ms ease-out;
}
.r3f-poster.is-hidden{ opacity: 0; }
.r3f-canvas{
  opacity: 0;
  transition: opacity 360ms ease-out;
}
.r3f-canvas.is-live{ opacity: 1; }

/* in-stage overlay labels (per-figure, optional) */
.r3f-labels{
  position: absolute; inset: 0;
  pointer-events: none;
  display: flex; justify-content: space-between;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 12px 14px;
  color: #a4adda;
}
.r3f-readout{
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.14em; color: #ffb547;
  pointer-events: none;
}

/* the scrubber chrome, static HTML so it shows before the scene mounts */
.r3f-scrubber{ display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.r3f-scrubber [data-r3f-play]{
  background: rgba(255,255,255,0.05); border: 1px solid rgba(176,184,240,0.10);
  color: #d8dcff; border-radius: 50%; width: 30px; height: 30px; cursor: pointer; font-size: 12px;
}
.r3f-progress{
  flex: 1; height: 10px; background: rgba(176,184,240,0.10);
  border-radius: 100px; cursor: pointer; overflow: hidden; touch-action: none;
}
.r3f-progress-bar{
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #14e0ff, #b06bff, #ff3d8a);
  border-radius: 100px;
}