/* The journey arc is the first child of .case-body, acting as a visual
   TL;DR right under the hero figure. Drop the case-body top hairline +
   pad so the arc reads as a continuation of the hero, not a separate
   section. case-studies.css adds these globally; we suppress only here. */
.case-body {
  border-top: 0;
  padding-top: 24px;
}

/* =========================================================================
   Fast Track — Journey Arc diagram (§07 / V2, the recovery)

   A single continuous outcome curve that reads as the case in one image:
   V1 launched → dove to a 5-week loss → diagnosis pivot → V2 sprint →
   recovery to a sustained monthly win.

   Y-axis is conceptual outcome rate (loss / baseline / win).
   X-axis is process time, not strict calendar time.
   Numbers in the case study are anchored as overlay labels, not derived
   from the path geometry — the curve is illustrative, the data is honest.

   Phase semantics (matching Scenra's working-pattern principle):
   - I  · V1 (running, losing): solid, full opacity   — production, real loss
   - II · DIAGNOSE (paused, learning): dashed, lighter — no production, knowledge phase
   - III · V2 (running, winning): solid, full opacity — production, real win
   ========================================================================= */

.case-body > .ft-arc {
  grid-column: content-start / full-end;
  margin: 32px 0 8px;
}

.ft-arc-diagram {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
}

.ft-arc-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Forward path segments — three semantic phases of the recovery. */
.ft-arc-path {
  fill: none;
  stroke: var(--ink);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;          /* combined with pathLength=100 → solid at rest */
  transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ft-arc-path--I    { stroke-width: 1.5; opacity: 1;   }
.ft-arc-path--II   { stroke-width: 1;   opacity: 0.55; stroke-dasharray: 3 4; }
.ft-arc-path--III  { stroke-width: 1.5; opacity: 1;   }

/* Outcome rails — three faint horizontal hairlines to anchor the eye:
   top (success), mid (baseline), bottom (failure). */
.ft-arc-rail {
  stroke: var(--ink);
  stroke-width: 0.5;
  stroke-dasharray: 1 5;
  opacity: 0.18;
}

.ft-arc-rail-label {
  font-family: inherit;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  fill: var(--ink);
  opacity: 0.4;
  font-feature-settings: "tnum";
}

/* Milestone dots. Solid = active production point, hollow = transition. */
.ft-arc-dot {
  fill: var(--ink);
  transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ft-arc-dot--hollow {
  fill: var(--bg);
  stroke: var(--ink);
  stroke-width: 1;
}

/* Phase tags — three groups across the top, each interactive
   (hover/focus reveals secondary text and dims the rest of the diagram). */
.ft-arc-phase-group {
  cursor: pointer;
  outline: none;
}

.ft-arc-phase-hit {
  fill: transparent;
  pointer-events: all;
}

.ft-arc-phase-focus {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ft-arc-phase-group:focus-visible .ft-arc-phase-focus {
  opacity: 0.45;
}

.ft-arc-phase {
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  fill: var(--ink);
  opacity: 0.55;
  font-feature-settings: "tnum";
  pointer-events: none;
  transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ft-arc-phase-group:hover .ft-arc-phase,
.ft-arc-phase-group:focus-within .ft-arc-phase {
  opacity: 1;
}

.ft-arc-phase-pri {
  font-family: inherit;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  fill: var(--ink);
  opacity: 0;
  font-feature-settings: "tnum";
  pointer-events: none;
  transition: opacity 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ft-arc-phase-group:hover .ft-arc-phase-pri,
.ft-arc-phase-group:focus-within .ft-arc-phase-pri {
  opacity: 0.7;
}

/* Phase-hover dimming. When any phase is active, dim everything,
   then bring back the active phase's path + dots. */
.ft-arc-diagram:has(.ft-arc-phase-group:hover) .ft-arc-path,
.ft-arc-diagram:has(.ft-arc-phase-group:focus-within) .ft-arc-path,
.ft-arc-diagram:has(.ft-arc-phase-group:hover) .ft-arc-dot,
.ft-arc-diagram:has(.ft-arc-phase-group:focus-within) .ft-arc-dot {
  opacity: 0.25;
}

.ft-arc-diagram:has(.ft-arc-phase-group--I:hover) .ft-arc-path--I,
.ft-arc-diagram:has(.ft-arc-phase-group--I:focus-within) .ft-arc-path--I,
.ft-arc-diagram:has(.ft-arc-phase-group--I:hover) .ft-arc-dot[data-phase="I"],
.ft-arc-diagram:has(.ft-arc-phase-group--I:focus-within) .ft-arc-dot[data-phase="I"],

.ft-arc-diagram:has(.ft-arc-phase-group--II:hover) .ft-arc-path--II,
.ft-arc-diagram:has(.ft-arc-phase-group--II:focus-within) .ft-arc-path--II,
.ft-arc-diagram:has(.ft-arc-phase-group--II:hover) .ft-arc-dot[data-phase="II"],
.ft-arc-diagram:has(.ft-arc-phase-group--II:focus-within) .ft-arc-dot[data-phase="II"],

.ft-arc-diagram:has(.ft-arc-phase-group--III:hover) .ft-arc-path--III,
.ft-arc-diagram:has(.ft-arc-phase-group--III:focus-within) .ft-arc-path--III,
.ft-arc-diagram:has(.ft-arc-phase-group--III:hover) .ft-arc-dot[data-phase="III"],
.ft-arc-diagram:has(.ft-arc-phase-group--III:focus-within) .ft-arc-dot[data-phase="III"] {
  opacity: 1;
}

/* Milestone labels (HTML overlay positioned at viewBox x %).
   Selectors are scoped to `.case-body` to outrank case-studies.css
   rules `.case-body ul { display: flex; flex-direction: column; gap }`
   and `.case-body ul li { position: relative; padding-left }` which
   would otherwise turn the milestone overlay into a vertical flex list. */
.case-body .ft-arc-milestones {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  inset: 0;
  display: block;          /* defeat .case-body ul flex */
  gap: 0;                  /* defeat .case-body ul gap */
  pointer-events: none;
}

.case-body .ft-arc-milestones > .ft-arc-milestone {
  position: absolute;      /* defeat .case-body ul li position: relative */
  left: var(--x);
  top: var(--y);
  width: 168px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-left: 0;
  pointer-events: auto;    /* parent ul is pointer-events: none; re-enable here */
  cursor: default;
  transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.case-body .ft-arc-milestones > .ft-arc-milestone::before {
  content: none;
}

.ft-arc-milestone-num {
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--g500);
  font-feature-settings: "tnum";
}

.ft-arc-milestone-title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: -0.005em;
}

/* Description container — hidden at rest, slides open on milestone
   hover/focus. Uses the grid-template-rows: 0fr → 1fr trick so the
   reveal animates smoothly to the natural content height with no JS.
   Mirrors Scenra's stage-description pattern. */
.ft-arc-milestone-desc {
  display: grid;
  grid-template-rows: 0fr;
  margin: 0;
  transition: grid-template-rows 220ms cubic-bezier(0.4, 0, 0.2, 1),
              margin-top 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ft-arc-milestone-desc-inner {
  overflow: hidden;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--g500);
  letter-spacing: 0.005em;
  opacity: 0;
  transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Tabular number emphasis for impact figures inside descriptions. */
.ft-arc-milestone-desc-inner strong {
  font-weight: 600;
  color: var(--ink);
  font-feature-settings: "tnum";
}

/* Hover/focus on a milestone reveals its description. */
.case-body .ft-arc-milestones > .ft-arc-milestone:hover .ft-arc-milestone-desc,
.case-body .ft-arc-milestones > .ft-arc-milestone:focus-within .ft-arc-milestone-desc {
  grid-template-rows: 1fr;
  margin-top: 4px;
}

.case-body .ft-arc-milestones > .ft-arc-milestone:hover .ft-arc-milestone-desc-inner,
.case-body .ft-arc-milestones > .ft-arc-milestone:focus-within .ft-arc-milestone-desc-inner {
  opacity: 1;
}

/* Mutual exclusion with phase hovers. While ANY phase tag is hovered/
   focused, force milestone descriptions closed — phase principle and
   milestone description are two reveal modes; whichever the cursor is
   on wins, the other gets out of the way. */
.ft-arc-diagram:has(.ft-arc-phase-group:hover) .ft-arc-milestone-desc,
.ft-arc-diagram:has(.ft-arc-phase-group:focus-within) .ft-arc-milestone-desc {
  grid-template-rows: 0fr;
  margin-top: 0;
}

.ft-arc-diagram:has(.ft-arc-phase-group:hover) .ft-arc-milestone-desc-inner,
.ft-arc-diagram:has(.ft-arc-phase-group:focus-within) .ft-arc-milestone-desc-inner {
  opacity: 0;
}

/* Note: unlike Scenra, we deliberately do NOT fade the phase row when a
   milestone is hovered. On Fast Track the phase tags (I/II/III) and the
   milestone descriptions live in opposite halves of the figure (top vs.
   bottom), so they don't visually compete. Keeping phases visible keeps
   the reader anchored to which phase the active milestone belongs to. */

/* Mobile — collapse to a vertical list of milestones, hide the SVG.
   Selectors mirror the .case-body specificity used above so the
   media-query overrides actually win. */
@media (max-width: 880px), (prefers-reduced-motion: reduce) {
  .ft-arc-svg {
    display: none;
  }
  .case-body .ft-arc-milestones {
    position: static;
    display: grid;
    gap: 24px;
    border-top: var(--hairline);
    padding: 24px 0 0;
  }
  .case-body .ft-arc-milestones > .ft-arc-milestone {
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    transform: none;
    padding-left: 16px;
    border-left: 1px solid rgba(0, 0, 0, 0.08);
  }

  /* No hover state on touch / reduced-motion — show descriptions by default. */
  .ft-arc-milestone-desc {
    grid-template-rows: 1fr;
    margin-top: 4px;
  }
  .ft-arc-milestone-desc-inner {
    overflow: visible;
    opacity: 1;
  }
}

/* Connector line from each milestone dot down to the milestone-label row.
   Anchors the label visually to the curve. Reuses the rail style. */
.ft-arc-connector {
  stroke: var(--ink);
  stroke-width: 0.5;
  stroke-dasharray: 1 4;
  opacity: 0.18;
}

/* =========================================================================
   Page-load reveal — JS adds .is-pre-reveal on load, swaps to .is-revealed
   when the diagram enters the viewport (IntersectionObserver). The cascade
   below draws the path, then dots, then labels in sequence. Total ~2.4s.
   ========================================================================= */

.ft-arc-diagram.is-pre-reveal .ft-arc-path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
.ft-arc-diagram.is-pre-reveal .ft-arc-path--II {
  /* Phase II is dashed at rest (3-4); pre-reveal needs the same draw-in
     trick but with a continuous dash to slide. We override it briefly. */
  stroke-dasharray: 100;
}

.ft-arc-diagram.is-pre-reveal .ft-arc-rail,
.ft-arc-diagram.is-pre-reveal .ft-arc-rail-label,
.ft-arc-diagram.is-pre-reveal .ft-arc-connector,
.ft-arc-diagram.is-pre-reveal .ft-arc-dot,
.ft-arc-diagram.is-pre-reveal .ft-arc-milestone,
.ft-arc-diagram.is-pre-reveal .ft-arc-phase {
  opacity: 0;
}

@keyframes ft-arc-draw {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}

@keyframes ft-arc-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes ft-arc-fade-in-phase {
  from { opacity: 0; }
  to   { opacity: 0.55; }
}

@keyframes ft-arc-fade-in-rail {
  from { opacity: 0; }
  to   { opacity: 0.18; }
}

@keyframes ft-arc-fade-in-rail-label {
  from { opacity: 0; }
  to   { opacity: 0.4; }
}

/* Rails fade in first — they anchor the y-axis. */
.ft-arc-diagram.is-revealed .ft-arc-rail,
.ft-arc-diagram.is-revealed .ft-arc-connector {
  animation: ft-arc-fade-in-rail 400ms ease-out 0ms;
}
.ft-arc-diagram.is-revealed .ft-arc-rail-label {
  animation: ft-arc-fade-in-rail-label 400ms ease-out 100ms;
}

/* Path segments draw sequentially. Phase II returns to its dashed
   stroke-dasharray after the draw-in (handled by the cascade resetting). */
.ft-arc-diagram.is-revealed .ft-arc-path--I {
  animation: ft-arc-draw 700ms linear 200ms;
}
.ft-arc-diagram.is-revealed .ft-arc-path--II {
  animation: ft-arc-draw 800ms linear 800ms;
}
.ft-arc-diagram.is-revealed .ft-arc-path--III {
  animation: ft-arc-draw 700ms linear 1500ms;
}

/* Dots light up as the line reaches them. data-stage targets each one explicitly. */
.ft-arc-diagram.is-revealed .ft-arc-dot[data-stage="1"] { animation: ft-arc-fade-in 300ms ease-out 250ms;  }
.ft-arc-diagram.is-revealed .ft-arc-dot[data-stage="2"] { animation: ft-arc-fade-in 300ms ease-out 800ms;  }
.ft-arc-diagram.is-revealed .ft-arc-dot[data-stage="3"] { animation: ft-arc-fade-in 300ms ease-out 1500ms; }
.ft-arc-diagram.is-revealed .ft-arc-dot[data-stage="4"] { animation: ft-arc-fade-in 300ms ease-out 2200ms; }

/* Phase tags fade in just after their phase line completes. */
.ft-arc-diagram.is-revealed .ft-arc-phase-group--I .ft-arc-phase {
  animation: ft-arc-fade-in-phase 360ms ease-out 700ms;
}
.ft-arc-diagram.is-revealed .ft-arc-phase-group--II .ft-arc-phase {
  animation: ft-arc-fade-in-phase 360ms ease-out 1400ms;
}
.ft-arc-diagram.is-revealed .ft-arc-phase-group--III .ft-arc-phase {
  animation: ft-arc-fade-in-phase 360ms ease-out 2100ms;
}

/* Milestone labels fade in just after their dot. */
.ft-arc-diagram.is-revealed .ft-arc-milestone[data-stage="1"] { animation: ft-arc-fade-in 400ms ease-out 350ms;  }
.ft-arc-diagram.is-revealed .ft-arc-milestone[data-stage="2"] { animation: ft-arc-fade-in 400ms ease-out 900ms;  }
.ft-arc-diagram.is-revealed .ft-arc-milestone[data-stage="3"] { animation: ft-arc-fade-in 400ms ease-out 1600ms; }
.ft-arc-diagram.is-revealed .ft-arc-milestone[data-stage="4"] { animation: ft-arc-fade-in 400ms ease-out 2300ms; }

@media (prefers-reduced-motion: reduce) {
  .ft-arc-path,
  .ft-arc-dot,
  .ft-arc-phase,
  .ft-arc-phase-pri,
  .ft-arc-phase-focus {
    transition: none !important;
  }

  /* No reveal cascade for reduced-motion users — they see everything at rest. */
  .ft-arc-diagram.is-pre-reveal .ft-arc-path,
  .ft-arc-diagram.is-pre-reveal .ft-arc-rail,
  .ft-arc-diagram.is-pre-reveal .ft-arc-rail-label,
  .ft-arc-diagram.is-pre-reveal .ft-arc-connector,
  .ft-arc-diagram.is-pre-reveal .ft-arc-dot,
  .ft-arc-diagram.is-pre-reveal .ft-arc-milestone,
  .ft-arc-diagram.is-pre-reveal .ft-arc-phase {
    stroke-dashoffset: 0;
    opacity: revert;
  }
  .ft-arc-diagram.is-revealed * {
    animation: none !important;
  }
}