/* ─────────────────────────────────────────────────────────────
   Kai — Transformation Overview ("The Journey")
   NAMESPACED for the merged Partnership Overview site.
   All rules are scoped under `.journey` so the presenter deck can
   sit above the existing flywheel/deep-dive site without colliding
   with its global class names, tokens, or body theming.

   Transformations from the standalone Journey styles.css:
   - `:root` tokens moved onto `.journey` (no leak into the page).
   - `body[data-surface|scene|accent]` -> `.journey[data-...]`.
   - `body { overflow:hidden; display:flex; height:100% }` becomes a
     full-viewport `.journey` panel (the PAGE stays scrollable).
   - `body::before/after` ambient layers -> `.journey::before/after`
     with `position:absolute` so they're contained in the section.
   - Every remaining selector prefixed with `.journey`.
   ───────────────────────────────────────────────────────────── */

.journey {
  /* 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);

  /* Full-viewport panel (was `body`) — the page itself stays scrollable */
  position: relative;
  z-index: 0;
  min-height: 100vh;
  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);
}

.journey, .journey *, .journey *::before, .journey *::after { box-sizing: border-box; }

/* ── Surface themes ─────────────────────────────────────────── */
.journey[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);
}
.journey[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);
}

/* Ambient depth + grain — the thing that keeps it from feeling flat.
   `absolute` (was `fixed`) so it stays within the Journey section. */
.journey::before {
  content: "";
  position: absolute; 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);
}
.journey::after {
  content: "";
  position: absolute; 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>");
}

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

/* ── Masthead ───────────────────────────────────────────────── */
/* `justify-content` + `flex-direction` are explicit to neutralize the host
   site's global `.masthead`/`.controls` rules (styles.css) bleeding into the
   Journey subtree, since both sites reuse those class names. */
.journey .masthead {
  display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 18px;
  padding: 24px 46px 0;
}
.journey .wordmark { display: inline-flex; align-items: center; }
.journey .logo { height: 42px; width: auto; display: block; }
.journey[data-surface="cream"] .logo-dark  { display: none; }
.journey[data-surface="dark"]  .logo-light { display: none; }
.journey .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 ───── */
.journey .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) */
.journey .caption-zone { padding: 0; }
.journey .caption-lead {
  max-width: 580px;
  min-height: 96px;
  transition: opacity 0.34s var(--ease-soft), transform 0.42s var(--ease);
}
.journey .caption-lead.is-leaving { opacity: 0; transform: translateY(8px); }
.journey .caption-lead.is-entering { opacity: 0; transform: translateY(-8px); }

.journey .caption-rule {
  display: block; width: 46px; height: 3px; border-radius: 3px;
  background: var(--accent); margin-bottom: 16px;
  transition: background 0.45s var(--ease-soft);
}
.journey[data-accent="teal"]    { --accent: var(--stream-a-dot); }
.journey[data-accent="coral"]   { --accent: var(--stream-b-dot); }
.journey[data-accent="neutral"] { --accent: var(--blue-500); }
.journey .eyebrow {
  margin: 0 0 12px; font-size: 12.5px; font-weight: 700;
  letter-spacing: 2.2px; text-transform: uppercase; color: var(--ink-faint);
}
.journey .headline {
  margin: 0; font-weight: 700; font-size: clamp(26px, 2.7vw, 40px);
  line-height: 1.1; letter-spacing: -0.7px; color: var(--ink);
}
.journey .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 */
.journey .figure-zone { position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; padding-bottom: 12px; overflow: visible; }
.journey #scene { width: 100%; height: auto; max-height: 60vh; overflow: visible;
  transition: opacity 0.55s var(--ease-soft), transform 0.7s var(--ease); }

/* 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. */
.journey[data-scene="product"] #scene,
.journey[data-scene="ritual"]  #scene { opacity: 0.38; }
/* Beat 7: slide the receded timeline left so the converge circle clears the
   right side, giving the screenshot room to grow. */
.journey[data-scene="ritual"] #scene { transform: translateX(-11%); }

/* ── Product glimpse (beat 4b) ── */
.journey .product-scene[hidden] { display: none !important; }
.journey .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;
}
.journey[data-scene="product"] .product-scene {
  opacity: 1; visibility: visible;
  transition: opacity 0.6s var(--ease-soft) 0.1s, visibility 0s;
}
.journey .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);
}
.journey .pcard img { display: block; width: 100%; height: auto; }

.journey .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;
}
.journey .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 */
.journey[data-scene="product"] .pcard-queue { opacity: 1; transform: translateY(-50%) translateX(0); transition-delay: 0.15s; }
.journey[data-scene="product"] .pcard-nudge { opacity: 1; transform: translateY(-50%) translateX(0); transition-delay: 0.3s; }

/* ── Ritual glimpse (beat 7) ── */
.journey .ritual-scene[hidden] { display: none !important; }
.journey .ritual-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;
}
.journey[data-scene="ritual"] .ritual-scene {
  opacity: 1; visibility: visible;
  transition: opacity 0.6s var(--ease-soft) 0.1s, visibility 0s;
}
.journey .pcard-ritual {
  right: clamp(16px, 1.6vw, 28px); top: 50%;
  width: min(50vw, 690px);
  transform: translateY(-50%) translateX(34px);
  box-shadow: 0 34px 84px rgba(5,41,77,0.22);
  z-index: 1;
}
.journey[data-scene="ritual"] .pcard-ritual { opacity: 1; transform: translateY(-50%) translateX(0); transition-delay: 0.15s; }

/* The ritual thread is neutral blue — it emerges from the converged braid. */
.journey #ritualLinks path.scene-path {
  stroke: var(--blue-500);
  filter: drop-shadow(0 0 3px rgba(85,139,181,0.45));
}
.journey #ritualLinks circle.scene-dot {
  fill: var(--blue-500);
  filter: drop-shadow(0 0 5px rgba(85,139,181,0.85));
}
.journey #ritualLinks circle.scene-dot-lg { fill: var(--blue-700); }
.journey #ritualLinks circle.scene-halo   { fill: var(--blue-400); }

/* Bullet-tethered callout */
.journey .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);
}
.journey .callout.is-leaving { opacity: 0; transform: scale(0.97); }
.journey .callout.is-entering { opacity: 0; transform: scale(0.97); }
.journey .callout.is-hidden { display: none; }
.journey .c-body { margin: 0; font-size: 13.5px; line-height: 1.5; font-weight: 400; color: var(--ink-soft); }
.journey .c-body strong { color: var(--ink); font-weight: 700; }
.journey .c-body strong.tag { color: var(--teal-700); font-weight: 800; }

.journey[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); }
.journey[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 */
.journey .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);
}
.journey .leader.on { opacity: 1; }
.journey .leader line { stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; opacity: 0.55; }
.journey .leader circle { fill: var(--accent); }

/* Scene links — two teal threads from the bolded claims into the screenshots */
.journey .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;
}
.journey .scene-links.on { opacity: 1; }
.journey .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));
}
.journey .scene-links circle.scene-dot {
  fill: var(--teal-500);
  filter: drop-shadow(0 0 5px rgba(80,152,163,0.85));
}
.journey .scene-links circle.scene-dot-lg { fill: var(--teal-600); }
.journey .scene-links circle.scene-halo {
  fill: var(--teal-400); opacity: 0.4;
  transform-box: fill-box; transform-origin: center;
  animation: journeyHaloPulse 2.4s ease-in-out infinite;
}
@keyframes journeyHaloPulse {
  0%, 100% { transform: scale(0.7); opacity: 0.45; }
  50%      { transform: scale(1.5); opacity: 0.1; }
}

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

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

/* ── Convergence rope (teal + coral intertwined) ────────────── */
.journey .braid-casing {
  fill: none; stroke: var(--bg); stroke-width: 8;
  stroke-linecap: round; stroke-linejoin: round;
}
.journey .braid-over { stroke-width: 3.5; }
.journey .braid-weave { transition-delay: 0.75s; }

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

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

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

/* Labels with halo for readability over lines */
.journey .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;
}
.journey .teal-ink  { fill: var(--teal-700); }
.journey .coral-ink { fill: var(--coral-700); }
.journey[data-surface="dark"] .teal-ink  { fill: var(--teal-400); }
.journey[data-surface="dark"] .coral-ink { fill: var(--coral-400); }

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

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

/* Belonging mark — slow staged draw on the finale */
.journey .ring.draw.on {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 2.8s var(--ease), opacity 0.6s var(--ease-soft);
}
.journey .ring.draw.ring-mid.on {
  transition: stroke-dashoffset 2.8s var(--ease) 1s, opacity 0.6s var(--ease-soft);
}
.journey .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) */
.journey [data-active-step].is-active { filter: drop-shadow(0 0 7px var(--accent)); }
.journey [data-active-step].is-active .node,
.journey .node.is-active { filter: drop-shadow(0 0 7px var(--accent)); }
.journey .ring.is-active { animation: journeyRingpulse 2.4s var(--ease-soft) infinite; }
@keyframes journeyRingpulse {
  0%, 100% { filter: drop-shadow(0 0 3px transparent); }
  50%      { filter: drop-shadow(0 0 8px var(--blue-400)); }
}
.journey .dot.is-active { animation: journeyDotpulse 2.2s var(--ease-soft) infinite; filter: drop-shadow(0 0 5px var(--accent)); }
@keyframes journeyDotpulse { 0%,100% { r: 6; } 50% { r: 7.5; } }

/* ── Controls ───────────────────────────────────────────────── */
.journey .controls {
  display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 18px;
  padding: 12px 46px 30px;
}
.journey .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);
}
.journey .arrow:hover:not(:disabled) { color: var(--ink); border-color: var(--ink-faint); transform: translateY(-1px); }
.journey .arrow:disabled { opacity: 0.3; cursor: default; }
.journey .dots { display: flex; gap: 10px; align-items: center; }
.journey .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);
}
.journey .dots button.visited { opacity: 0.7; }
.journey .dots button.current { opacity: 1; transform: scale(1.5); background: var(--blue-500); }
.journey .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;
}
.journey .restart:hover { color: var(--ink); }

/* Final-beat CTA — hands off to the flywheel deck below. Overlaid on the
   compounding rings on the right of the figure (rings sit at svg cx=1080 of
   1280, cy=250, ~vertical centre) so it's the obvious next move once the
   finale lands. Appears only on the last beat (JS toggles [hidden]). */
.journey .to-flywheel {
  position: absolute; z-index: 10;
  right: 4%; top: 10%;
  display: inline-flex; align-items: center; gap: 9px;
  font-family: inherit; font-size: 14.5px; font-weight: 700; letter-spacing: 0.3px;
  color: var(--n-100);
  background: var(--blue-500);
  border: 1px solid var(--blue-400); border-radius: 999px;
  padding: 12px 22px; cursor: pointer;
  box-shadow: 0 12px 32px rgba(5, 41, 77, 0.45);
  transition: background 0.2s var(--ease-soft), border-color 0.2s var(--ease-soft), transform 0.2s var(--ease-soft), box-shadow 0.2s var(--ease-soft);
  animation: journeyCtaRise 0.55s var(--ease) both;
}
.journey .to-flywheel:hover { background: var(--blue-400); border-color: var(--blue-300); transform: translateY(-2px); box-shadow: 0 16px 40px rgba(5, 41, 77, 0.5); }
.journey .to-flywheel svg { display: block; }
.journey .to-flywheel[hidden] { display: none; }
@keyframes journeyCtaRise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Presenter notes ────────────────────────────────────────── */
.journey .notes {
  position: absolute; 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);
}
.journey[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);
}
.journey .notes[hidden] { display: none; }
.journey .notes-eyebrow {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: 1.8px;
  text-transform: uppercase; color: var(--coral-600); margin-bottom: 8px;
}
.journey .notes p { margin: 0; font-size: 14.5px; line-height: 1.55; font-style: italic; }

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