/* ═══════════════════════════════════════════════════════════
   MAESTRO (ambient layer) — soundstage finale effects only.
   The robot animation lives in maestro3d.js; this file is for
   curtain rise, confetti, and a state-driven backdrop tint.
   ═══════════════════════════════════════════════════════════ */

/* ───────── BACKDROP TINT BY STATE ───────── */
/* Subtle ambient color the soundstage takes on per state.
   Applied as a fixed full-screen overlay below the vignette. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 1.2s var(--ease-theatre), background 1.2s var(--ease-theatre);
  background: radial-gradient(ellipse at center, rgba(251, 191, 36, 0.05), transparent 65%);
}
body[data-state="listening"]::after  { opacity: 1; background: radial-gradient(ellipse at center, rgba(196, 184, 255, 0.07), transparent 65%); }
body[data-state="thinking"]::after   { opacity: 1; background: radial-gradient(ellipse at center, rgba(80, 100, 150, 0.08), transparent 70%); }
body[data-state="composing"]::after  { opacity: 1; background: radial-gradient(ellipse at center top, rgba(251, 191, 36, 0.12), transparent 70%); }
body[data-state="speaking"]::after   { opacity: 1; background: radial-gradient(ellipse at center, rgba(251, 191, 36, 0.07), transparent 65%); }
body[data-state="triumphant"]::after { opacity: 1; background: radial-gradient(ellipse at center, rgba(251, 191, 36, 0.22), transparent 75%); }
body[data-state="error"]::after      { opacity: 1; background: radial-gradient(ellipse at center, rgba(220, 38, 38, 0.08), transparent 65%); }

/* ───────── FINALE CONFETTI (gold glyphs raining on triumph) ───────── */
.finale-confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  overflow: hidden;
}
.finale-confetti span {
  position: absolute;
  top: -40px;
  font-family: var(--font-display);
  color: var(--c-rim);
  text-shadow: 0 0 14px rgba(251, 191, 36, 0.7);
  font-size: 22px;
  opacity: 0;
  animation: confetti-fall 3.2s ease-in forwards;
}
@keyframes confetti-fall {
  0%   { opacity: 0; transform: translateY(0) rotate(0deg) scale(0.6); }
  10%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(105vh) rotate(540deg) scale(1.1); }
}

/* ───────── CURTAIN RISE (chamber entrance) ───────── */
.curtain-rise {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  background: #000;
  animation: curtain-up 1.6s var(--ease-in-soft) forwards;
}
@keyframes curtain-up {
  0%   { opacity: 1; transform: translateY(0); }
  85%  { opacity: 1; transform: translateY(-95%); }
  100% { opacity: 0; transform: translateY(-100%); pointer-events: none; }
}