/* ══════════════════════════════════════════════════════════════ scene ══
   The hero's explainer, drawn by home.js: sources stream into one product's
   tag, and its adverts drop onto a pile as parcels, one per shop. Its own
   sheet so home.css stays the page's layout.                               */
.stage { margin: 0; min-width: 0; }
.stage-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.stage-title { font-size: 1rem; }
.stage-title b { font-weight: 650; }

/* Pause while it plays, Play while it is paused: the word always says what a press does. */
.scene-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 2px;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--t-small);
  color: var(--ink-soft);
  cursor: pointer;
}
.scene-toggle[hidden] { display: none; }
.scene-toggle:hover { color: var(--ink); }
.scene-toggle .i-play,
.scene-toggle.is-paused .i-pause { display: none; }
.scene-toggle.is-paused .i-play { display: block; }

/* A fixed shape before the script draws in it, so nothing below moves when it does. */
.scene-box { position: relative; width: 100%; aspect-ratio: 10 / 7; max-height: 540px; }
/* Capped so a wide stacked scene (a small tablet) does not open an empty band mid-way. */
.stage.is-portrait .scene-box { aspect-ratio: 5 / 7; max-height: 580px; }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

#scene text { font-family: var(--font); }
.t-name { font-size: 15px; font-weight: 650; fill: var(--ink); }
.t-count { font-size: 13px; fill: var(--ink-soft); font-variant-numeric: tabular-nums; }
.t-tag { font-size: 18px; font-weight: 650; fill: var(--ink); }
.t-note { font-size: 13.5px; font-weight: 600; fill: var(--ink); }
.t-note2 { font-size: 13px; fill: var(--ink-soft); }
.rail { fill: none; stroke: var(--line-hi); stroke-width: 1.5; }
.gate { fill: none; stroke: var(--ink-soft); stroke-width: 1.25; stroke-dasharray: 2 3; }
.tag-body { fill: var(--card); stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.tag-perf { stroke: var(--line-hi); stroke-width: 1; stroke-dasharray: 2 3; }
/* A metal ring round the hole, so it reads as an eyelet and never as a letter "o". */
.tag-eyelet { fill: var(--line-hi); stroke: var(--ink); stroke-width: .75; }
.tag-hole { fill: var(--panel); stroke: var(--ink); stroke-width: .75; }
.floor { stroke: var(--line-hi); stroke-width: 1.5; }
/* Shape tells the sources apart, so colour is left for meaning: kraft is a shop, and only
   the advert squares carry it. */
.d-ad { fill: var(--parcel); }
.d-yt { fill: var(--ink); }
.d-ws { fill: none; stroke: var(--ink); stroke-width: 1.5; }
/* Last month's shops: the same kraft, paler, so the pile shows the rise at a glance. The figure
   is always in words beside it. */
#scene .was { opacity: .5; }

/* The number sits on its pile; home.js places it. It is the finished figure in the markup. */
.tally { position: absolute; top: 0; left: 58%; pointer-events: none; }
.tally-top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 12px; }
.tally-num {
  display: inline-block;
  font-size: clamp(3.25rem, 2rem + 3vw, 5rem);
  font-weight: 650;
  line-height: .82;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
  transform-origin: 30% 90%;
}
.tally-unit { font-size: 1rem; line-height: 1.25; max-width: 15ch; }
.tally-grow { margin-top: 10px; font-size: 1rem; font-weight: 600; color: var(--ink-soft); }
.tally-grow.grew { color: var(--grow); }
.tally-grow > span { margin-inline-end: .25em; }
.tally-grow.pending { opacity: 0; transform: translateY(4px); }
.tally-grow { transition: opacity 420ms ease-out, transform 420ms cubic-bezier(.3, 1.4, .6, 1); }

/* Held back until the scene plays it in. If the script never arrives, a timer gives up and shows
   it — visible by default (docs/design/README.md). */
@media (prefers-reduced-motion: no-preference) {
  .js .tally:not(.live) { opacity: 0; animation: tally-show 0s 2.5s forwards; }
}
@keyframes tally-show { to { opacity: 1; } }

/* A real sequence, so numbered; home.js fills each bar as its phase plays. */
.steps { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.step { position: relative; padding-top: 16px; opacity: var(--o, 1); transition: opacity 280ms ease-out; }
.step-bar { position: absolute; inset: 0 0 auto 0; height: 2px; border-radius: 2px; background: var(--line-hi); overflow: hidden; }
.step-bar::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(var(--p, 1)); }
.step-t { margin-bottom: 4px; font-weight: 650; }
.step-t span { margin-inline-end: 6px; color: var(--ink-soft); font-weight: 600; font-variant-numeric: tabular-nums; }
.step p:last-child { font-size: var(--t-small); line-height: 1.45; color: var(--ink-soft); }
@media (max-width: 560px) { .steps { grid-template-columns: minmax(0, 1fr); gap: 14px; } }