/* Shared frame for motion specimens */
@import url("../colors_and_type.css");

html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); }
body { min-height: 100vh; padding: 28px; -webkit-font-smoothing: antialiased; }

.spec {
  max-width: 960px; margin: 0 auto;
  display: grid; gap: 14px;
}
.spec-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.spec-eyebrow {
  color: var(--muted); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase;
}
.spec-title { font-size: 20px; font-weight: 600; letter-spacing: -0.005em; margin: 0; }
.spec-sub   { color: var(--ink-2); font-size: 13px; margin: 0; }

.stage {
  position: relative;
  border-radius: 12px; border: 1px solid var(--border);
  background: var(--panel);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  min-height: 320px;
}
.stage canvas { display: block; width: 100%; height: 100%; }
.stage .hud {
  position: absolute; inset: 0; pointer-events: none;
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-3);
}
.hud .tl { position: absolute; top: 12px; left: 14px; color: var(--muted); font-family: var(--font-sans); text-transform: uppercase; letter-spacing: .08em; font-size: 11px;}
.hud .tr { position: absolute; top: 12px; right: 14px; }
.hud .bl { position: absolute; bottom: 12px; left: 14px; }
.hud .br { position: absolute; bottom: 12px; right: 14px; }
.hud .k  { color: var(--muted); }
.hud .v  { color: var(--text); }
.hud .acc { color: var(--accent); }
.hud .amb { color: var(--accent-2); }
.hud .red { color: var(--warn); }
.hud .grn { color: var(--good); }

.live-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; border-radius: 999px;
  background: #0b3b5a; border: 1px solid #1d5783;
  color: #a7e1ff; font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0;
}
.live-pill i {
  width: 5px; height: 5px; border-radius: 999px; background: #7dd3fc;
  box-shadow: 0 0 6px #7dd3fc;
  animation: live-pulse 1.8s infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .4; }
}

.caption {
  color: var(--muted); font-size: 12px; line-height: 1.55;
}
.caption code {
  background: #0f1830; border: 1px solid var(--border);
  padding: 1px 5px; border-radius: 4px; font-family: var(--font-mono);
  color: var(--accent); font-size: 11px;
}

/* Embed mode — hide chrome so specimens can be iframed as hero/feature viz. */
body.embed { padding: 0; background: transparent; min-height: 0; }
body.embed .spec { max-width: none; gap: 0; display: block; }
body.embed .spec-head,
body.embed .caption { display: none; }
body.embed .stage,
body.embed.embed .stage {
  border-radius: 0 !important; border: 0 !important; min-height: 0 !important;
  width: 100vw !important; height: 100vh !important; aspect-ratio: auto !important;
  grid-template-rows: 1fr !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
body.embed, body.embed html { overflow: hidden !important; }
/* Break grid min-content sizing so canvases can't push their row taller than 100vh. */
body.embed .stage > *,
body.embed canvas,
body.embed .right,
body.embed .panel,
body.embed .col,
body.embed .big { min-width: 0; min-height: 0; }
body.embed canvas { max-width: 100%; max-height: 100%; display: block; }