/* ═══════════════════════════════════════════
   overture — beat 1 of graduation-glow-v2
   The quiet held breath before the film starts. No hold: the tap on the
   card, or its button, is the film's begin() (owned by the bridge).
   ═══════════════════════════════════════════ */

.overture-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* A near-black scrim over the shared ambient sky, so the card reads as the
   only thing in the frame -- the horizon aurora stays "barely lit". */
.overture-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(60% 45% at 50% 46%, var(--accent-warm-glow-soft), transparent 70%),
    var(--scrim);
}

/* ───── The ember: in screen space, on top of everything in this beat ───── */
.overture-ember {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  transform: translate3d(var(--overture-ex, 50vw), var(--overture-ey, 66vh), 0);
  transition: transform 1.9s var(--ease-stage), opacity 0.5s var(--ease-silk);
  pointer-events: none;
}
.overture-ember-core {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--text-primary) 0%, var(--accent-warm-bright) 45%, var(--accent-warm) 100%);
  box-shadow: 0 0 18px 6px var(--accent-warm-glow), 0 0 64px 20px var(--accent-warm-glow-soft);
  animation: overture-ember-breathe 2.8s var(--ease-breath) infinite;
  transition: transform 0.6s var(--ease-expo-out);
}
@keyframes overture-ember-breathe {
  50% { transform: scale(1.35); opacity: 0.72; }
}
.overture-ember.is-flare .overture-ember-core { transform: scale(1.9); }
.overture-ember.is-hidden { opacity: 0; }
/* A cross-fade instead of a travel, driven by JS toggling this class and
   listening for its own transitionend -- never a timer. */
.overture-ember.is-fading { opacity: 0; }

/* Looping ornaments are parked while not needed: an infinite animation
   still costs style work every frame even when invisible. */
.overture-ember.is-hidden .overture-ember-core { animation: none; }

/* ───── The overture prompt (the card) ───── */
.overture-prompt {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 16px;
  text-align: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--ease-silk), visibility 0s linear 0.45s;
}
.overture-prompt.is-on {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s var(--ease-silk);
}
.overture-prompt-inner {
  display: grid;
  justify-items: center;
  gap: 1.05rem;
  max-width: 26rem;
  cursor: auto;
  transition:
    opacity 1.1s var(--ease-expo-out),
    filter 1.1s var(--ease-expo-out),
    transform 1.1s var(--ease-expo-out),
    box-shadow 1.1s var(--ease-expo-out);
}
/* The tap payoff: brightens to warm gold light, lifts slightly and
   blurs/fades out -- CSS-only (no ReveelHero shot on this beat; the GPU/2.5D
   particle budget is spent on name-in-lights' nameAssemble instead). */
.overture-prompt-inner.is-dissolving {
  opacity: 0;
  filter: brightness(2.6) blur(10px);
  transform: translateY(-22px);
  box-shadow: 0 0 120px 60px var(--accent-warm-glow);
}
.overture-ember-slot {
  display: block;
  width: 16px;
  height: 16px;
  margin: 0 auto 0.6rem;
}
.overture-kicker {
  margin: 0;
  font: 500 0.72rem/1 var(--font-body);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent-warm-bright);
}
.overture-title {
  margin: 0;
  font: 600 clamp(1.8rem, 7.4vw, 2.5rem)/1.15 var(--font-display);
  color: var(--text-primary);
  text-wrap: balance;
}
.overture-note {
  margin: 0;
  color: var(--text-secondary);
  font: 400 0.98rem/1.55 var(--font-body);
  text-wrap: balance;
}
.overture-begin-btn {
  margin-top: 0.5rem;
  font: 600 1rem/1 var(--font-body);
  color: var(--btn-ink);
  cursor: pointer;
  background: var(--btn-fill);
  border: none;
  border-radius: 999px;
  padding: 1rem 2.3rem;
  box-shadow: var(--btn-shadow);
}
.overture-begin-btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

/* ─────────── Reduced motion: plays in full, calmer ───────────
   The lightDissolve shot takes its own calm variant inside ReveelHero.
   Here: the ember cross-fades to its new spot instead of travelling. */
@media (prefers-reduced-motion: reduce) {
  .overture-ember-core { animation: none; }
  .overture-ember {
    transition: opacity 0.4s var(--ease-silk);
  }
  .overture-prompt-inner {
    transition: opacity 0.9s var(--ease-silk);
  }
  .overture-prompt-inner.is-dissolving {
    filter: none;
    transform: none;
    box-shadow: none;
  }
}