/* ──────────────────────────────────────────────────────────
   hero-anim.css — overrides that turn the lab into a clean,
   chrome-free embeddable (the stage fills the frame; a single
   replay button appears at the interactive end-state).
   Loaded AFTER lab.css. Used by hero-anim.html (embedded via
   <iframe> on the homepage hero).
   ────────────────────────────────────────────────────────── */

html, body {
  margin: 0;
  height: 100%;
  background: var(--panel);
}
body.hero-embed { overflow: hidden; }

/* the stage fills the whole frame (no card chrome — the iframe host frames it) */
.hero-embed .lab-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 0;
  box-shadow: none;
}

/* replay button — hidden during the animation, fades in when it settles */
.hero-replay {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(18, 17, 13, 0.86);
  color: var(--ink);
  border: 1px solid var(--card-line);
  border-radius: 999px;
  padding: 7px 14px 7px 12px;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  backdrop-filter: blur(4px);
}
.hero-replay.show { opacity: 1; pointer-events: auto; transform: none; }
.hero-replay:hover { border-color: var(--green); color: var(--green); }
.hero-replay svg { display: block; }