/* Step 5 — reveal ceremony. 4 beats:
   1. compute  — full-panel pulse + sequenced messages (~2.4s)
   2. name     — motif + name + tagline fade in
   3. detail   — descriptor + bullets + stat
   4. board    — starter board card + CTAs
   Each beat fades in via .beat .is-on. */

#reveal-panel { background:var(--bg); }
#reveal-panel .panel-inner {
  display:flex; flex-direction:column; align-items:center;
  text-align:center; max-width:520px;
}

.beat {
  opacity:0; transform:translateY(12px);
  transition:opacity 0.55s ease, transform 0.55s var(--ease-out);
}
.beat.is-on { opacity:1; transform:translateY(0); }

/* ── BEAT 1: COMPUTE ─────────────────────────────────────────────────── */
#reveal-panel .reveal-compute {
  min-height:60vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:18px; width:100%;
}
#reveal-panel .reveal-compute-pulse {
  width:48px; height:48px; border-radius:50%;
  border:2px solid var(--coral-soft);
  border-top-color:var(--coral);
  animation:spin 1s linear infinite;
}
#reveal-panel .reveal-compute-msg {
  font-family:var(--font-mono); font-size:13px;
  color:var(--muted); letter-spacing:0.06em;
  text-transform:uppercase;
  min-height:1.4em;
  transition:opacity 0.3s ease;
}

/* ── BEAT 2: NAME ────────────────────────────────────────────────────── */
#reveal-panel .reveal-name-block {
  display:flex; flex-direction:column; align-items:center;
  padding:32px 0 24px;
}
#reveal-panel .reveal-motif {
  width:96px; height:96px; border-radius:var(--radius-lg);
  background:var(--coral-soft);
  border:1px solid var(--coral-border);
  display:flex; align-items:center; justify-content:center;
  font-size:48px;
  margin-bottom:24px;
  box-shadow:0 0 40px rgba(124, 92, 255,0.18);
  position:relative;
}
#reveal-panel .reveal-motif::before {
  content:''; position:absolute; inset:-8px;
  border-radius:calc(var(--radius-lg) + 4px);
  border:1px solid rgba(124, 92, 255,0.15);
  pointer-events:none;
}
#reveal-panel .reveal-eyebrow {
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:0.16em; text-transform:uppercase;
  color:var(--muted2); margin-bottom:8px;
}
#reveal-panel .reveal-name {
  font-family:var(--font-display); font-weight:700;
  font-size:38px; letter-spacing:-0.6px;
  color:var(--white); line-height:1.1;
  max-width:9em; margin:0 auto 8px;
}
#reveal-panel .reveal-name .period { color:var(--coral); }
#reveal-panel .reveal-tagline {
  font-family:var(--font-display); font-style:italic;
  font-size:15px; color:var(--muted);
  line-height:1.4;
  max-width:320px; margin:0 auto;
}

/* ── BEAT 3: DETAIL ──────────────────────────────────────────────────── */
#reveal-panel .reveal-detail {
  width:100%; padding:0 4px 4px;
}
#reveal-panel .reveal-descriptor {
  font-size:15px; color:var(--muted); line-height:1.55;
  max-width:340px; margin:0 auto 20px;
}
#reveal-panel .reveal-bullets {
  background:var(--card); border:1px solid var(--subtle-border);
  border-radius:var(--radius-md); padding:18px;
  text-align:left; margin:0 auto 14px;
  max-width:380px;
}
#reveal-panel .bullet-row {
  display:flex; gap:10px; align-items:flex-start;
  margin-bottom:10px;
}
#reveal-panel .bullet-row:last-child { margin-bottom:0; }
#reveal-panel .bullet-dot { color:var(--coral); font-size:10px; margin-top:5px; flex-shrink:0; }
#reveal-panel .bullet-text { font-size:13px; color:var(--white); line-height:1.5; }

#reveal-panel .reveal-stat {
  font-family:var(--font-mono); font-size:11px;
  color:var(--muted2); letter-spacing:0.04em;
  text-transform:uppercase;
  margin-bottom:24px;
}

/* ── BEAT 4: BOARD ───────────────────────────────────────────────────── */
#reveal-panel .reveal-board-block {
  width:100%; padding:24px 0 0;
  border-top:1px solid var(--subtle-border);
}
#reveal-panel .reveal-board-intro {
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:0.16em; text-transform:uppercase;
  color:var(--muted2); margin-bottom:14px;
}
#reveal-panel .reveal-board-card {
  display:block; text-decoration:none; color:inherit;
  background:var(--card); border:1px solid var(--subtle-border);
  border-radius:var(--radius-md); overflow:hidden;
  margin-bottom:18px;
  text-align:left;
  transition:border-color 0.15s, transform 0.1s;
}
#reveal-panel .reveal-board-card:hover { border-color:var(--coral-border); }
#reveal-panel .reveal-board-card:active { transform:scale(0.99); }
#reveal-panel .reveal-board-mosaic {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  aspect-ratio:4/1; gap:2px;
  background:var(--bg3);
}
#reveal-panel .reveal-board-mosaic-cell {
  background:center/cover no-repeat;
  background-color:linear-gradient(135deg, var(--bg2), var(--bg3));
}
#reveal-panel .reveal-board-body {
  padding:12px 14px;
  display:flex; justify-content:space-between; align-items:center;
  gap:10px;
}
#reveal-panel .reveal-board-name {
  font-family:var(--font-display); font-weight:600; font-size:14px;
  color:var(--white);
}
#reveal-panel .reveal-board-meta {
  font-family:var(--font-mono); font-size:10px;
  color:var(--muted2); letter-spacing:0.06em;
  text-transform:uppercase;
}

/* Forward value bridge + taste-twin promise */
#reveal-panel .reveal-value-bridge {
  display:flex; flex-direction:column; gap:6px;
  max-width:380px; margin:0 auto 18px;
  text-align:center;
}
#reveal-panel .reveal-value-line {
  font-size:14px; color:var(--white); line-height:1.5;
}
#reveal-panel .reveal-twin-line {
  font-family:var(--font-display); font-style:italic;
  font-size:13px; color:var(--muted); line-height:1.45;
}

/* CTAs */
#reveal-panel .reveal-ctas {
  display:flex; flex-direction:column; gap:10px;
  width:100%; max-width:440px; margin:0 auto;
}
#reveal-panel .reveal-cta-primary {
  width:100%; padding:16px;
  background:var(--coral); border:none; border-radius:var(--radius-md);
  color:#fff; font-family:var(--font-body); font-size:15px; font-weight:600;
  cursor:pointer; transition:opacity 0.15s;
}
#reveal-panel .reveal-cta-primary:hover { opacity:0.88; }
#reveal-panel .reveal-cta-secondary {
  width:100%; padding:14px;
  background:none; border:1px solid var(--subtle-border);
  border-radius:var(--radius-md);
  color:var(--white); font-family:var(--font-body); font-size:14px; font-weight:500;
  cursor:pointer; transition:border-color 0.15s, color 0.15s;
}
#reveal-panel .reveal-cta-secondary:hover { border-color:var(--coral); color:var(--coral); }
#reveal-panel .reveal-cta-tertiary {
  background:none; border:0;
  color:var(--muted); font-family:var(--font-body); font-size:13px;
  cursor:pointer; padding:8px;
  margin-top:4px;
}
#reveal-panel .reveal-cta-tertiary:hover { color:var(--white); }

#reveal-panel .reveal-error { margin-top:10px; text-align:center; }