/* ---------------------------------------------------------------
   Dark frames — Hero, Story, Scenario, Challenge, Interlude
   Every frame here is authored to fit the fixed 1600x900 canvas
   with zero internal scrolling — content is intentionally terse.
--------------------------------------------------------------- */

/* ============ HERO ============ */
.frame--hero { align-items: center; text-align: center; background: radial-gradient(ellipse at 50% 30%, #0b1220 0%, #05070c 70%); }
#heroCanvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.75; }
.hero__stage { display: flex; flex-direction: column; align-items: center; }
.hero__badge { margin-bottom: var(--space-md); border-color: hsla(var(--hue-blue), 70%, 60%, 0.35); color: var(--blue); }
.hero__title {
  font-size: var(--fs-h1);
  max-width: 15ch;
  background: linear-gradient(120deg, #fff 20%, hsl(var(--hue-blue) 90% 78%) 60%, hsl(var(--hue-amber) 85% 68%) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__lead { max-width: 640px; margin-top: var(--space-md); font-size: var(--fs-lead); }

/* ============ ACT I — STORY ============ */
.frame--story { justify-content: center; }
.story__photo {
  position: absolute; inset: -4%;
  background-image: url('../assets/images/nashville-skyline.jpg');
  background-size: cover; background-position: center 60%;
  filter: saturate(0.9) brightness(0.5);
}
.story__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,7,12,0.65) 0%, rgba(5,7,12,0.55) 40%, rgba(5,7,12,0.85) 100%);
}
.story__quote {
  max-width: 1100px;
  border-left: 4px solid var(--amber);
  padding-left: var(--space-lg);
}
.story__quote p {
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 500;
  line-height: 1.25;
}
.story__quote footer {
  margin-top: var(--space-md);
  font-size: var(--fs-lead);
  color: var(--text-dim);
  font-style: normal;
}

/* ============ ACT II — SCENARIO ============ */
.frame--scenario .frame__stage { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: center; }
.scenario__quote { font-size: var(--fs-h2); line-height: 1.12; }
.scenario__by { margin-top: var(--space-sm); font-size: var(--fs-lead); color: var(--text-dim); }
.notify-stack { display: flex; flex-direction: column; gap: 16px; }
.notify-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md) var(--radius-md) 4px var(--radius-md);
  padding: 16px 20px;
  font-size: 17px;
  color: var(--text);
  box-shadow: var(--shadow-card);
  opacity: 0;
  transform: translateX(40px) scale(0.95);
}
.notify-card__tag {
  display: block;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
  font-weight: 700;
  margin-bottom: 4px;
}

/* ============ ACT III — CHALLENGE ============ */
.frame--challenge .frame__stage { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-xl); align-items: center; }
.challenge__closing { margin-top: var(--space-lg); font-size: var(--fs-lead); color: var(--text); font-weight: 500; }
.balance { position: relative; display: flex; flex-direction: column; align-items: center; color: var(--text-faint); }
.balance__svg { width: 100%; max-width: 420px; height: auto; }
#balanceBeam { transform-origin: 210px 95px; }
.balance__weights { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: -10px; max-width: 400px; }
.weight {
  font-size: 15px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-dim);
  opacity: 0;
  transform: translateY(-16px);
}

/* ============ INTERLUDE ============ */
.frame--interlude { align-items: center; justify-content: center; text-align: center; }
.interlude__kicker { font-size: 16px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); margin-bottom: var(--space-md); }
.interlude__line { display: flex; flex-direction: column; gap: 8px; }
.interlude__part { font-size: 84px; font-weight: 600; color: var(--text-dim); font-family: var(--font-display); }
.interlude__part--punch { color: var(--amber); opacity: 0; transform: scale(0.9); }
.interlude__pivot { margin-top: var(--space-lg); font-size: var(--fs-lead); color: var(--text); opacity: 0; }