/* =========================================================================
   BUILD HERO DEMO (#buildHeroDemo).
   See src/components/BuildHeroDemo.astro for the storyboard.
   Timeline: public/js/build-hero-demo.js toggles `is-*` classes.

   A single steady scene, no crossfade — six modeling-block tiles snap
   into a grid one at a time, then the AI co-builder lands a change on the
   Metrics tile. Same --xxx-* palette likeness rules as every other demo
   on the site.
   ========================================================================= */

.bhd {
  --bhd-canvas: #FAF9F5;
  --bhd-card: #FFFFFF;
  --bhd-border: #DBDBDE;
  --bhd-line: #EAEAEA;
  --bhd-ink: #2B2B2B;
  --bhd-ink2: #777777;
  --bhd-accent: #6A5BC6;
  --bhd-accent-soft: #ECECFF;
}

.bhd__stage {
  position: relative; overflow: hidden; width: 100%;
  aspect-ratio: 3 / 2; min-height: 380px; max-width: 640px; margin: 0 auto;
  background: var(--bhd-canvas);
  display: flex; flex-direction: column;
  transition: opacity .5s ease;
}
.bhd.is-out .bhd__stage { opacity: 0; }

.bhd__topBar {
  flex: none; font-size: 11px; font-weight: 600; color: var(--bhd-ink);
  padding: 12px 14px 9px; border-bottom: 1px solid var(--bhd-line);
  white-space: nowrap;
}
.bhd__pane { flex: 1; min-height: 0; min-width: 0; padding: 18px 20px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.bhdHead { margin: 0; font-size: 12px; font-weight: 600; color: var(--bhd-ink); }

.bhd__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.bhdBlock {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  text-align: center; padding: 16px 6px; border-radius: 9px;
  background: var(--bhd-accent-soft); color: var(--bhd-accent); font-size: 10px; font-weight: 700;
  opacity: 0; transform: scale(.7);
  transition: opacity .3s ease, transform .3s ease, box-shadow .3s ease;
}
.bhdBlock.is-shown { opacity: 1; transform: none; }
.bhdBlock.is-flash { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--bhd-accent); }
.bhdBlock__val {
  font-size: 9px; font-weight: 700; color: var(--bhd-ink);
  opacity: 0; transition: opacity .25s ease;
}
.bhdBlock__val.is-shown { opacity: 1; }

.bhdCaption {
  display: flex; align-items: center; gap: 6px; margin: 0; font-size: 10px; font-weight: 600; color: var(--bhd-ink2);
  opacity: 0; transition: opacity .4s ease;
}
.bhd.is-captioned .bhdCaption { opacity: 1; }
.bhdCaption__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--bhd-accent); flex: none; }

@media (max-width: 420px) {
  .bhd__stage { aspect-ratio: auto; min-height: 380px; }
}