/* ══════════════════════════════════════════════════════════════
   MMGY CHARTS — styling and motion for mmgy-charts.js
   Series colours are brand tints, never new hues. currentColor in
   slots 4–5 is what lets one chart sit on white, stone, ink or red.
   ══════════════════════════════════════════════════════════════ */

.slide {
  --ch-1: var(--mmgy-red);
  --ch-2: color-mix(in srgb, var(--mmgy-red) 58%, transparent);
  --ch-3: color-mix(in srgb, var(--mmgy-red) 28%, transparent);
  --ch-4: currentColor;
  --ch-5: color-mix(in srgb, currentColor 38%, transparent);
  --ch-track: color-mix(in srgb, currentColor 14%, transparent);
}
/* On a red slide the hero tint would vanish — flip the ramp to ink/white. */
.slide--red {
  --ch-1: var(--mmgy-ink);
  --ch-2: color-mix(in srgb, var(--mmgy-ink) 58%, transparent);
  --ch-3: color-mix(in srgb, var(--mmgy-ink) 28%, transparent);
  --ch-4: var(--mmgy-white);
  --ch-5: color-mix(in srgb, var(--mmgy-white) 45%, transparent);
  --ch-track: color-mix(in srgb, var(--mmgy-white) 22%, transparent);
}

.chart { position: relative; margin: 0; display: block; }
.chart__svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* Type inside charts follows the deck's type rules, one size down. */
.ch-label { font-family: var(--font-text); font-weight: 500; font-size: 24px; fill: currentColor; opacity: .6; }
.ch-cat   { font-family: var(--font-text); font-weight: 700; font-size: 26px; fill: currentColor; opacity: .85; }
.ch-value { font-family: var(--font-text); font-weight: 700; font-size: 30px; fill: currentColor; }
.ch-rate  { font-family: var(--font-text); font-weight: 700; font-size: 24px; fill: var(--mmgy-red); }
.ch-centre {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: 120px; fill: var(--mmgy-red);
}
.slide--red .ch-centre { fill: var(--mmgy-ink); }
.ch-grid { stroke: currentColor; stroke-width: 2; opacity: .12; }
.ch-axis { stroke: var(--mmgy-red); stroke-width: 3; }

/* ── Motion ───────────────────────────────────────────────────
   Charts re-render on every reveal, so these run fresh each time.  */
@keyframes ch-rise  { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes ch-grow  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ch-fade  { from { opacity: 0; } }
@keyframes ch-pop   { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes ch-draw  { from { stroke-dashoffset: var(--len, 2000); } to { stroke-dashoffset: 0; } }
@keyframes ch-sweep { from { stroke-dasharray: 0 var(--len, 2000); } }

.ch-rise  { animation: ch-rise  .75s cubic-bezier(.2,.7,.2,1) both; }
.ch-grow  { animation: ch-grow  .75s cubic-bezier(.2,.7,.2,1) both; }
.ch-fade  { animation: ch-fade  .6s ease both; }
.ch-pop   { animation: ch-pop   .45s cubic-bezier(.2,.7,.2,1) both; transform-box: fill-box; transform-origin: center; }
.ch-draw  { animation: ch-draw  1.4s cubic-bezier(.6,0,.4,1) both; }
.ch-sweep { animation: ch-sweep 1.2s cubic-bezier(.6,0,.4,1) both; }

@media (prefers-reduced-motion: reduce) {
  .ch-rise, .ch-grow, .ch-fade, .ch-pop, .ch-draw, .ch-sweep { animation: none !important; }
}
@media print {
  .ch-rise, .ch-grow, .ch-fade, .ch-pop, .ch-draw, .ch-sweep {
    animation: none !important; opacity: 1 !important; transform: none !important;
    stroke-dashoffset: 0 !important;
  }
}