/* Part 3 — startup brand reveal (pairs with board-reveal.js).
   An OVERLAY only: the persistent topbar lockup stays the official raster
   asset per BRAND-ASSETS.md (brand ships as rendered images, never code);
   the reveal composes the same elements at stage scale, converges onto the
   brand slot, and crossfades into the raster underneath. Colors and
   geometry mirror reference/startup-scene.jsx's C constants. */

#bm3 {
  position: fixed; inset: 0; z-index: 200;
  background: oklch(0.14 0.022 300);
  cursor: pointer; overflow: hidden;
}
#bm3 .bm3-neb {
  position: absolute; inset: 0; opacity: 0;
  background:
    radial-gradient(130% 140% at 10% -10%, oklch(0.42 0.19 295 / .55) 0%, transparent 55%),
    radial-gradient(110% 120% at 90% 10%, oklch(0.42 0.19 20 / .42) 0%, transparent 55%),
    radial-gradient(150% 160% at 50% 118%, oklch(0.36 0.14 262 / .38) 0%, transparent 60%);
}
#bm3 .bm3-stage {
  position: absolute; left: 50%; top: 47%;
  /* 640 holds the ring (600) and wordmark; the JS scales the stage down to
     fit a phone and retargets from 900px reference geometry (STAGE_REF_W) */
  width: 640px; height: 480px;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
}
#bm3 .bm3-aurora {
  position: absolute; width: 520px; height: 230px; border-radius: 50%;
  background: var(--grad-aurora);
  filter: blur(70px); opacity: 0;
}
#bm3 .bm3-bloom {
  position: absolute; left: calc(50% - 152px); top: calc(50% - 152px);
  width: 192px; height: 298px; opacity: 0;
  background: radial-gradient(closest-side at 44% 26%,
    oklch(1 0 0 / .98) 0%, oklch(0.96 0.05 300 / .84) 13%,
    oklch(0.82 0.17 298 / .52) 32%, oklch(0.70 0.24 305 / .25) 54%,
    oklch(0.64 0.24 4 / .075) 78%, transparent 100%);
}
#bm3 .bm3-ring, #bm3 .bm3-ring-soft {
  position: absolute; width: 600px; height: 600px; border-radius: 50%;
  opacity: 0;
  -webkit-mask: radial-gradient(closest-side, transparent 93.5%, black 94%);
  mask: radial-gradient(closest-side, transparent 93.5%, black 94%);
  background:
    repeating-radial-gradient(closest-side, rgba(255,255,255,.06) 0 1.2px,
      rgba(10,12,24,.07) 1.2px 3px, rgba(255,255,255,.025) 3px 4.5px),
    conic-gradient(from 40deg, #fdfeff 0%, #c7ccdd 5%, #6a7089 13%,
      #262a3e 21%, #9ba1b8 29%, #f4f6ff 37%, #ffffff 41%, #8a90a8 49%,
      #383d53 57%, #d4d9ea 65%, #ffffff 71%, #565c74 81%, #2c3044 87%,
      #cfd4e6 93%, #fdfeff 100%);
}
#bm3 .bm3-ring-soft { filter: blur(9px); }
#bm3 .bm3-flare {
  position: absolute; left: 50%; top: 50%;
  width: 300px; height: 300px; border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, oklch(0.9 0.06 320 / .9),
    oklch(0.7 0.2 330 / .4) 40%, transparent 70%);
  filter: blur(6px);
}
#bm3 .bm3-mark {
  position: absolute; width: 170px; opacity: 0;
  filter: drop-shadow(0 14px 30px oklch(0.66 0.24 295 / .5));
}
#bm3 .bm3-word {
  position: relative; white-space: nowrap;
  font: italic 900 68px/1.04 var(--font-display);
  transform: skewX(-8deg) scaleX(1.5);
  filter: drop-shadow(0 3px 6px oklch(0.08 0.03 295 / .85))
          drop-shadow(0 14px 32px oklch(0.08 0.03 295 / .6));
}
#bm3 .bm3-the { color: var(--fg-1); display: inline-block; opacity: 0; }
#bm3 .bm3-board {
  display: inline-block; opacity: 0;
  padding: 0 0.24em; margin: 0 -0.24em;   /* clip-guard for the italic overhang */
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}