/* ─────────────────────────────────────────────────────────────
   Kai — Transformation Overview (Insights Meeting)
   Presenter-led, two-column spread: caption left, timeline right.
   Design language mirrors experience.addkai.io.
   ───────────────────────────────────────────────────────────── */

:root {
  /* Kai brand palette */
  --blue-900:#05294D; --blue-800:#113F69; --blue-700:#1E5A8E; --blue-500:#558BB5; --blue-400:#7EABCE; --blue-300:#A8CBE6;
  --teal-700:#3A7580; --teal-600:#427E88; --teal-500:#5098A3; --teal-400:#7DBBC5; --teal-300:#A9D5DC;
  --coral-700:#A5442F; --coral-600:#C16753; --coral-500:#E08267; --coral-400:#F6A48E; --coral-300:#FBC4B4;
  --n-900:#161D26; --n-800:#28323B; --n-700:#4C555E; --n-600:#707880; --n-500:#A1A7AD; --n-400:#C7CDD4; --n-200:#E7EAEC; --n-100:#F7F9FA;
  --cream:#F4ECDF; --cream-elev:#FBF6EE;

  /* Workstream lines — lighter Kai palette */
  --stream-a: var(--teal-400);      /* software / deploy & amplify */
  --stream-a-dot: var(--teal-500);
  --stream-b: var(--coral-400);     /* rituals / surface & validate */
  --stream-b-dot: var(--coral-500);

  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Surface themes ─────────────────────────────────────────── */
body[data-surface="cream"] {
  --bg: var(--cream);
  --ink: var(--blue-900);
  --ink-soft: #4a5a63;
  --ink-faint: #8c9298;
  --rule: rgba(5, 41, 77, 0.14);
  --spine: #b9b0a1;
  --node: var(--blue-900);
  --ambient-a: rgba(125,187,197,0.16);
  --ambient-b: rgba(246,164,142,0.12);
}
body[data-surface="dark"] {
  --bg: #0F1B27;
  --ink: var(--n-100);
  --ink-soft: var(--n-400);
  --ink-faint: var(--n-600);
  --rule: rgba(255,255,255,0.10);
  --spine: #46525d;
  --node: var(--n-100);
  --stream-a: var(--teal-400);
  --stream-a-dot: var(--teal-300);
  --stream-b: var(--coral-400);
  --stream-b-dot: var(--coral-300);
  --ambient-a: rgba(125,187,197,0.22);
  --ambient-b: rgba(246,164,142,0.18);
}

* , *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: background 0.9s var(--ease-soft), color 0.9s var(--ease-soft);
}

/* Ambient depth + grain — the thing that keeps it from feeling flat */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1200px 720px at 16% 12%, var(--ambient-a), transparent 60%),
    radial-gradient(1000px 640px at 92% 96%, var(--ambient-b), transparent 62%);
  transition: background 0.9s var(--ease-soft);
}
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.masthead, .spread, .controls, .notes { position: relative; z-index: 1; }

/* ── Masthead ───────────────────────────────────────────────── */
.masthead {
  display: flex; align-items: center; gap: 18px;
  padding: 24px 46px 0;
}
.wordmark { display: inline-flex; align-items: center; }
.logo { height: 42px; width: auto; display: block; }
body[data-surface="cream"] .logo-dark  { display: none; }
body[data-surface="dark"]  .logo-light { display: none; }
.masthead-tag {
  margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--ink-faint);
  padding-left: 18px; border-left: 1px solid var(--rule);
}

/* ── Stage: caption band on top, full-width timeline below ───── */
.stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 26px;
  min-height: 0;
  padding: 0 52px;
}

/* Caption band (top) — chapter marker only (eyebrow + headline) */
.caption-zone { padding: 0; }
.caption-lead {
  max-width: 580px;
  min-height: 96px;
  transition: opacity 0.34s var(--ease-soft), transform 0.42s var(--ease);
}
.caption-lead.is-leaving { opacity: 0; transform: translateY(8px); }
.caption-lead.is-entering { opacity: 0; transform: translateY(-8px); }

.caption-rule {
  display: block; width: 46px; height: 3px; border-radius: 3px;
  background: var(--accent); margin-bottom: 16px;
  transition: background 0.45s var(--ease-soft);
}
body[data-accent="teal"]    { --accent: var(--stream-a-dot); }
body[data-accent="coral"]   { --accent: var(--stream-b-dot); }
body[data-accent="neutral"] { --accent: var(--blue-500); }
.eyebrow {
  margin: 0 0 12px; font-size: 12.5px; font-weight: 700;
  letter-spacing: 2.2px; text-transform: uppercase; color: var(--ink-faint);
}
.headline {
  margin: 0; font-weight: 700; font-size: clamp(26px, 2.7vw, 40px);
  line-height: 1.1; letter-spacing: -0.7px; color: var(--ink);
}
.lede {
  margin: 16px 0 0; max-width: 540px;
  font-size: clamp(15px, 1.35vw, 17px); line-height: 1.58;
  font-weight: 400; color: var(--ink-soft);
}

/* Full-width figure + overlays */
.figure-zone { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; padding-bottom: 12px; overflow: visible; }
#scene { width: 100%; height: auto; max-height: 60vh; overflow: visible;
  transition: opacity 0.55s var(--ease-soft); }

/* On the product glimpse the full timeline stays but recedes into the
   background; the callout stays lit in place and its threads reach the
   screenshots. Opacity only — never transform the SVG, or svgToLocal drifts. */
body[data-scene="product"] #scene { opacity: 0.16; }

/* ── Product glimpse (beat 4b): the claim sits centre, one screenshot
   flanks each side, so each thread runs a short outward path with no
   line ever crossing a screenshot. Cards are absolutely placed for
   precise, non-overlapping geometry. ── */
.product-scene[hidden] { display: none !important; }
.product-scene {
  position: absolute; inset: 0; z-index: 4;
  pointer-events: none;
  opacity: 0; visibility: hidden;
  transition: opacity 0.5s var(--ease-soft), visibility 0s linear 0.5s;
}
body[data-scene="product"] .product-scene {
  opacity: 1; visibility: visible;
  transition: opacity 0.6s var(--ease-soft) 0.1s, visibility 0s;
}
.pcard {
  margin: 0; position: absolute;
  border-radius: 14px; overflow: hidden;
  background: var(--cream-elev);
  border: 1px solid rgba(5,41,77,0.08);
  opacity: 0;
  transition: opacity 0.55s var(--ease-soft), transform 0.6s var(--ease);
}
.pcard img { display: block; width: 100%; height: auto; }

/* Both screenshots cluster on the right; the callout's threads reach their
   left edges. The nudge floats lower and slightly left, so its edge is clear
   of the queue and its thread never crosses the queue. */
/* Both screenshots sit fully on the page (no bleed off the right edge). */
.pcard-queue {
  right: clamp(2px, 0.8vw, 14px); top: 37%;
  width: min(43vw, 612px);
  transform: translateY(-50%) translateX(34px);
  box-shadow: 0 34px 84px rgba(5,41,77,0.22);
  z-index: 1;
}
/* Nudge sits lower AND ~30px further left than the queue so the two connectors
   read as a clean two-prong (queue: higher/right, nudge: lower/left) instead of
   collapsing onto one vertical track. It reads as the detail card popped off the
   lower-left of the list. */
.pcard-nudge {
  right: clamp(360px, 33vw, 470px); top: 64%;
  width: min(14.5vw, 208px);
  transform: translateY(-50%) translateX(34px);
  box-shadow: 0 38px 88px rgba(5,41,77,0.34);
  z-index: 2;
}

/* Staged entrance: cards settle in from the right, after the threads reach out */
body[data-scene="product"] .pcard-queue { opacity: 1; transform: translateY(-50%) translateX(0); transition-delay: 0.15s; }
body[data-scene="product"] .pcard-nudge { opacity: 1; transform: translateY(-50%) translateX(0); transition-delay: 0.3s; }

/* Bullet-tethered callout — quiet annotation on the track beats only (4 & 5) */
.callout {
  position: absolute; z-index: 3; left: 0; top: 0;
  width: 214px; padding: 11px 13px;
  background: var(--callout-bg);
  border: 1px solid var(--callout-border);
  border-radius: 10px;
  box-shadow: 0 4px 16px var(--callout-shadow);
  transition: left 0.5s var(--ease), top 0.5s var(--ease),
              opacity 0.3s var(--ease-soft), transform 0.4s var(--ease);
}
.callout.is-leaving { opacity: 0; transform: scale(0.97); }
.callout.is-entering { opacity: 0; transform: scale(0.97); }
.callout.is-hidden { display: none; }
.c-body { margin: 0; font-size: 13.5px; line-height: 1.5; font-weight: 400; color: var(--ink-soft); }
.c-body strong { color: var(--ink); font-weight: 700; }
/* Bolded claims that thread out to a screenshot on the product beat */
.c-body strong.tag { color: var(--teal-700); font-weight: 800; }

body[data-surface="cream"] { --callout-bg: rgba(251,246,238,0.88); --callout-border: rgba(5,41,77,0.08); --callout-shadow: rgba(5,41,77,0.06); }
body[data-surface="dark"]  { --callout-bg: rgba(26,38,50,0.88);   --callout-border: rgba(255,255,255,0.07); --callout-shadow: rgba(0,0,0,0.25); }

/* Leader — a short, quiet stem from the bullet to the card */
.leader {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 2; pointer-events: none; overflow: visible;
  opacity: 0; transition: opacity 0.3s var(--ease-soft);
}
.leader.on { opacity: 1; }
.leader line { stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; opacity: 0.55; }
.leader circle { fill: var(--accent); }

/* Scene links — two teal threads from the bolded claims into the screenshots */
.scene-links {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 6; pointer-events: none; overflow: visible;
  opacity: 0; transition: opacity 0.45s var(--ease-soft) 0.35s;
}
.scene-links.on { opacity: 1; }
.scene-links path.scene-path {
  fill: none; stroke: var(--teal-500); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round; opacity: 0.9;
  filter: drop-shadow(0 0 3px rgba(80,152,163,0.45));
}
.scene-links circle.scene-dot {
  fill: var(--teal-500);
  filter: drop-shadow(0 0 5px rgba(80,152,163,0.85));
}
.scene-links circle.scene-dot-lg { fill: var(--teal-600); }
.scene-links circle.scene-halo {
  fill: var(--teal-400); opacity: 0.4;
  transform-box: fill-box; transform-origin: center;
  animation: haloPulse 2.4s ease-in-out infinite;
}
@keyframes haloPulse {
  0%, 100% { transform: scale(0.7); opacity: 0.45; }
  50%      { transform: scale(1.5); opacity: 0.1; }
}

/* ── SVG primitives ─────────────────────────────────────────── */
.line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.trunk, .converged { stroke: var(--spine); stroke-width: 3.5; opacity: 0.85; }
.teal  { stroke: var(--stream-a); stroke-width: 3.5; }
.coral { stroke: var(--stream-b); stroke-width: 3.5; }

.node { fill: var(--node); }
.fork-node, .converge-node { fill: var(--bg); stroke: var(--spine); stroke-width: 3; opacity: 0.9; }

.dot.teal-fill  { fill: var(--stream-a-dot); }
.dot.coral-fill { fill: var(--stream-b-dot); }

.ring { fill: none; stroke-width: 5; stroke-linecap: round; }
.ring-outer { stroke: var(--blue-400); }
.ring-mid   { stroke: var(--teal-400); }
.ring-inner { stroke: var(--coral-400); }

/* Axis */
.pulse { fill: none; stroke: var(--ink-faint); stroke-width: 1.4; opacity: 0.6; stroke-linejoin: round; stroke-linecap: round; }
.ticks .tick circle { fill: var(--ink-faint); }
.ticks .tick text {
  fill: var(--ink-faint); font-size: 13px; font-weight: 600;
  text-anchor: middle; letter-spacing: 0.3px;
}
.guide { stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 2 5; opacity: 0.45; }

/* Labels with halo for readability over lines */
.lbl {
  fill: var(--ink-soft); font-size: 14.5px; font-weight: 600; letter-spacing: 0.2px;
  paint-order: stroke; stroke: var(--bg); stroke-width: 5px; stroke-linejoin: round;
}
.teal-ink  { fill: var(--teal-700); }
.coral-ink { fill: var(--coral-700); }
body[data-surface="dark"] .teal-ink  { fill: var(--teal-400); }
body[data-surface="dark"] .coral-ink { fill: var(--coral-400); }

/* ── Reveal + draw-on ───────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transition: opacity 0.6s var(--ease-soft);
}
[data-reveal].on { opacity: 1; }

.draw { stroke-dasharray: 100; stroke-dashoffset: 100; }
.line.draw.on { stroke-dashoffset: 0; transition: stroke-dashoffset 1.05s var(--ease), opacity 0.5s var(--ease-soft); }

/* Belonging mark — slow staged draw on the finale */
.ring.draw.on {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 2.8s var(--ease), opacity 0.6s var(--ease-soft);
}
.ring.draw.ring-mid.on {
  transition: stroke-dashoffset 2.8s var(--ease) 1s, opacity 0.6s var(--ease-soft);
}
.ring.draw.ring-inner.on {
  transition: stroke-dashoffset 2.8s var(--ease) 2s, opacity 0.6s var(--ease-soft);
}

/* Active-node emphasis (subtle pulse on the milestone in focus) */
[data-active-step].is-active { filter: drop-shadow(0 0 7px var(--accent)); }
[data-active-step].is-active .node,
.node.is-active { filter: drop-shadow(0 0 7px var(--accent)); }
.ring.is-active { animation: ringpulse 2.4s var(--ease-soft) infinite; }
@keyframes ringpulse {
  0%, 100% { filter: drop-shadow(0 0 3px transparent); }
  50%      { filter: drop-shadow(0 0 8px var(--blue-400)); }
}
.dot.is-active { animation: dotpulse 2.2s var(--ease-soft) infinite; filter: drop-shadow(0 0 5px var(--accent)); }
@keyframes dotpulse { 0%,100% { r: 6; } 50% { r: 7.5; } }

/* ── Controls ───────────────────────────────────────────────── */
.controls {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  padding: 12px 46px 30px;
}
.arrow {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 999px; border: 1px solid var(--rule); background: transparent;
  color: var(--ink-soft); cursor: pointer;
  transition: color 0.2s var(--ease-soft), border-color 0.2s var(--ease-soft), transform 0.2s var(--ease-soft);
}
.arrow:hover:not(:disabled) { color: var(--ink); border-color: var(--ink-faint); transform: translateY(-1px); }
.arrow:disabled { opacity: 0.3; cursor: default; }
.dots { display: flex; gap: 10px; align-items: center; }
.dots button {
  width: 8px; height: 8px; border-radius: 999px; padding: 0;
  border: none; background: var(--ink-faint); opacity: 0.4; cursor: pointer;
  transition: opacity 0.25s var(--ease-soft), transform 0.25s var(--ease-soft), background 0.25s var(--ease-soft);
}
.dots button.visited { opacity: 0.7; }
.dots button.current { opacity: 1; transform: scale(1.5); background: var(--blue-500); }
.restart {
  position: absolute; right: 46px;
  font-family: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: 0.3px;
  color: var(--ink-faint); background: transparent; border: none; cursor: pointer;
}
.restart:hover { color: var(--ink); }

/* ── Presenter notes ────────────────────────────────────────── */
.notes {
  position: fixed; left: 52px; bottom: 84px; z-index: 3;
  max-width: 520px; padding: 16px 20px;
  background: var(--cream-elev); color: var(--n-900);
  border: 1px solid rgba(5,41,77,0.12); border-radius: 12px;
  box-shadow: 0 12px 40px rgba(5,41,77,0.14);
}
body[data-surface="dark"] .notes {
  background: #1a2733; color: var(--n-100); border-color: rgba(255,255,255,0.1);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}
.notes-eyebrow {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: 1.8px;
  text-transform: uppercase; color: var(--coral-600); margin-bottom: 8px;
}
.notes p { margin: 0; font-size: 14.5px; line-height: 1.55; font-style: italic; }

@media (max-width: 900px) {
  .stage { padding: 0 24px; }
  .caption-lead { min-height: 0; }
  #scene { max-height: 46vh; }
  .callout { width: 210px; padding: 11px 13px; }
  .c-body { font-size: 13px; }
}