/* ============================================================
   Scenra — case-study-specific patterns.
   Inherits everything from /case-studies.css and /styles.css.

   Currently: relaxed paragraph spacing for narrative sections
   (e.g. the Cheddar Gorge hallucination story in §05).
   ============================================================ */

/* -------------------------------------------------------------
   Narrative wrapper — gives paragraphs more breathing room than
   the system default of 24px. Used in §05 Field Notes for the
   storytelling sections where each paragraph carries emotional
   weight that benefits from a clearer visual pause.
   ------------------------------------------------------------- */
.scenra-story {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.scenra-story > p {
  margin: 0;
}

/* -------------------------------------------------------------
   Build-flow diagram (§02) — 8-stage workflow with PRD as the
   top band that anchors every stage. Layered ABOVE the four
   working-pattern decision-log block as the macro view; the
   decisions block beneath is the principle-by-principle deep-dive.
   ------------------------------------------------------------- */
.case-body > .scenra-flow {
  grid-column: content-start / full-end;
  margin: 48px 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Build-flow diagram (§02) — system rewrite, commits 1 + 2 of 3.

   Reframed: the workflow is 4 PHASES, each with its own line semantic.
   Stages are nodes within phases. Annotations emerge from phase tags
   on hover/focus (commit 2). Motion lands in commit 3.

       PHASE        STAGES   PRINCIPLE                             LINE
   I   Intent       1–2      01 PRD-first                          1px, lighter
   II  Structure    3–4      03 Architecture, then implementation  1.5px solid
   III Execution    5–6      02 Worktree-per-feature               1.5px solid
   IV  Feedback     7–8 + ↺  04 Documentation discipline           1px solid + dashed loop

   Layout grid (viewBox 0 0 1100 440):
     Y=22       phase tags row (always visible, low contrast)
     Y=40       phase principle row (revealed on phase hover)
     Y=120      Me row (stages 1, 2, 4, 7, 8)
     Y=280      Claude row (stages 3, 5, 6)
     Y=435      loop arc nadir (control points pull down to Y=540)
     Stage X: 60, 200, 340, 480, 620, 760, 900, 1040
     Phase tag X: 130, 410, 690, 970 (stage-pair midpoints)

   The two reveal modes are mutually exclusive (see :has() rules below):
     - Phase hovered  → phase principle visible, stage descriptions closed
     - Stage hovered  → stage description visible, phase row faded out

   This guarantees no vertical collision in either direction without
   needing to cap description height or constrain text content.

   Visual language:
   - Solid dot = Me (lead). Hollow ring = Claude (executor).
   - Loop arc = different edge type (dashed, low opacity, return path).
   - Variable stroke per phase = the line BEHAVES like the principle.
   ------------------------------------------------------------- */
.scenra-flow-diagram {
  position: relative;
  width: 100%;
  margin: 24px 0 8px;
}

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

/* Phase paths — each carries its phase's stroke semantic.
   Phase II + III are foundational (1.5px solid) — the work that
   compounds. Phase I + IV are 1px lighter — the bookends, where
   intent forms and feedback metabolizes.

   stroke-dasharray: 100 (combined with pathLength="100" on each
   path) means the path is treated as one full-length dash with no
   gap — visually identical to a solid line at rest. We keep it
   always-set so the page-load draw-in animation (which animates
   stroke-dashoffset 100 → 0) actually has dashes to slide, instead
   of the offset being a no-op against a non-dashed line. */
.scenra-flow-path {
  fill: none;
  stroke: var(--ink);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.scenra-flow-path--I    { stroke-width: 1;   opacity: 0.7; }
.scenra-flow-path--II   { stroke-width: 1.5; opacity: 1;   }
.scenra-flow-path--III  { stroke-width: 1.5; opacity: 1;   }
.scenra-flow-path--IV   { stroke-width: 1;   opacity: 0.7; }

/* Loop arc — the return edge. Dashed + low opacity signal that
   it's a different KIND of edge than the forward path. */
.scenra-flow-loop {
  fill: none;
  stroke: var(--ink);
  stroke-width: 0.75;
  stroke-dasharray: 2 4;
  opacity: 0.4;
  transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Stage dots. Solid = Me (lead). Hollow ring = Claude (executor). */
.scenra-flow-dot {
  fill: var(--ink);
  transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.scenra-flow-dot--claude {
  fill: var(--bg);
  stroke: var(--ink);
  stroke-width: 1;
}

/* Phase groups — wrap each phase tag + its principle text + an
   invisible hit rect (for a generous hover/focus target). The
   group is the interactive primitive: hover or focus reveals the
   principle and dims unrelated phases. */
.scenra-flow-phase-group {
  cursor: pointer;
  outline: none;
}

.scenra-flow-phase-hit {
  fill: transparent;
  pointer-events: all;
}

.scenra-flow-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);
}

.scenra-flow-phase-group:focus-visible .scenra-flow-phase-focus {
  opacity: 0.45;
}

/* Phase tag (always visible). Subdued at rest, full opacity on
   hover/focus. */
.scenra-flow-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);
}

.scenra-flow-phase-group:hover .scenra-flow-phase,
.scenra-flow-phase-group:focus-within .scenra-flow-phase {
  opacity: 1;
}

/* Principle text — hidden at rest, fades in on phase hover/focus.
   Lighter weight than the phase tag (it's a sub-label). */
.scenra-flow-phase-pri {
  font-family: inherit;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.18em;
  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);
}

.scenra-flow-phase-group:hover .scenra-flow-phase-pri,
.scenra-flow-phase-group:focus-within .scenra-flow-phase-pri {
  opacity: 0.7;
}

/* Phase-hover dimming. When ANY phase is hovered/focused, dim the
   line elements (paths, loop arc, dots) — then bring back the
   active phase's path + dots only. Stage labels stay at full
   opacity at all times so the diagram never looks "broken" or
   half-readable. The :has() selector reaches across SVG → HTML. */
.scenra-flow-diagram:has(.scenra-flow-phase-group:hover) .scenra-flow-path,
.scenra-flow-diagram:has(.scenra-flow-phase-group:focus-within) .scenra-flow-path,
.scenra-flow-diagram:has(.scenra-flow-phase-group:hover) .scenra-flow-dot,
.scenra-flow-diagram:has(.scenra-flow-phase-group:focus-within) .scenra-flow-dot {
  opacity: 0.25;
}

.scenra-flow-diagram:has(.scenra-flow-phase-group:hover) .scenra-flow-loop,
.scenra-flow-diagram:has(.scenra-flow-phase-group:focus-within) .scenra-flow-loop {
  opacity: 0.12;
}

/* Brighten the active phase's path + dots. */
.scenra-flow-diagram:has(.scenra-flow-phase-group--I:hover) .scenra-flow-path--I,
.scenra-flow-diagram:has(.scenra-flow-phase-group--I:focus-within) .scenra-flow-path--I,
.scenra-flow-diagram:has(.scenra-flow-phase-group--I:hover) .scenra-flow-dot[data-phase="I"],
.scenra-flow-diagram:has(.scenra-flow-phase-group--I:focus-within) .scenra-flow-dot[data-phase="I"],

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

.scenra-flow-diagram:has(.scenra-flow-phase-group--III:hover) .scenra-flow-path--III,
.scenra-flow-diagram:has(.scenra-flow-phase-group--III:focus-within) .scenra-flow-path--III,
.scenra-flow-diagram:has(.scenra-flow-phase-group--III:hover) .scenra-flow-dot[data-phase="III"],
.scenra-flow-diagram:has(.scenra-flow-phase-group--III:focus-within) .scenra-flow-dot[data-phase="III"],

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

/* Phase IV is the loop's home — when hovered, the loop arc lifts. */
.scenra-flow-diagram:has(.scenra-flow-phase-group--IV:hover) .scenra-flow-loop,
.scenra-flow-diagram:has(.scenra-flow-phase-group--IV:focus-within) .scenra-flow-loop {
  opacity: 0.7;
}

/* Stage labels (HTML overlay). SVG aspect 1100:440 ≈ 2.5:1 drives
   container height; percentages track viewBox Y. */
.scenra-flow-nodes {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.case-body .scenra-flow-nodes > .scenra-flow-node {
  padding-left: 0;
}
.case-body .scenra-flow-nodes > .scenra-flow-node::before {
  content: none;
}

.scenra-flow-node {
  position: absolute;
  left: var(--x);
  width: 144px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
  pointer-events: auto;
  cursor: default;
  transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Me dots at Y=120 of 440 ≈ 27.3% from top.
   bottom: 76% → label bottom at 24% from top, sits just above dot. */
.scenra-flow-node--me {
  bottom: 76%;
}

/* Claude dots at Y=280 of 440 ≈ 63.6% from top.
   top: 67% → label top sits below dot with breathing room. */
.scenra-flow-node--claude {
  top: 67%;
}

.scenra-flow-node-role {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.45;
  font-feature-settings: "tnum";
}

.scenra-flow-node-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  line-height: 1.25;
}

/* Description — hidden by default, slides open on stage hover/focus.
   Uses the grid-template-rows: 0fr → 1fr trick for smooth height
   animation without JavaScript. The inner span fades opacity
   independently for a soft reveal. */
.scenra-flow-node-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);
}

.scenra-flow-node-desc-inner {
  overflow: hidden;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--g500);
  opacity: 0;
  transition: opacity 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.scenra-flow-node:hover .scenra-flow-node-desc,
.scenra-flow-node:focus-within .scenra-flow-node-desc {
  grid-template-rows: 1fr;
  margin-top: 4px;
}

.scenra-flow-node:hover .scenra-flow-node-desc-inner,
.scenra-flow-node:focus-within .scenra-flow-node-desc-inner {
  opacity: 1;
}

/* While ANY phase is hovered/focused, force stage descriptions
   closed. The two reveal modes (phase principle vs. stage
   description) are mutually exclusive — whichever the cursor is on
   wins, the other gets out of the way. */
.scenra-flow-diagram:has(.scenra-flow-phase-group:hover) .scenra-flow-node-desc,
.scenra-flow-diagram:has(.scenra-flow-phase-group:focus-within) .scenra-flow-node-desc {
  grid-template-rows: 0fr;
  margin-top: 0;
}

.scenra-flow-diagram:has(.scenra-flow-phase-group:hover) .scenra-flow-node-desc-inner,
.scenra-flow-diagram:has(.scenra-flow-phase-group:focus-within) .scenra-flow-node-desc-inner {
  opacity: 0;
}

/* The inverse: while ANY stage is hovered/focused, fade the phase
   row out and disable its hit area. This prevents the expanding
   stage description from colliding with the phase tag above (which
   was the visible bug on Sim+review and Real-world trip — both top
   row, both directly under "IV — Feedback"). */
.scenra-flow-diagram:has(.scenra-flow-node:hover) .scenra-flow-phase,
.scenra-flow-diagram:has(.scenra-flow-node:focus-within) .scenra-flow-phase,
.scenra-flow-diagram:has(.scenra-flow-node:hover) .scenra-flow-phase-pri,
.scenra-flow-diagram:has(.scenra-flow-node:focus-within) .scenra-flow-phase-pri {
  opacity: 0;
}

.scenra-flow-diagram:has(.scenra-flow-node:hover) .scenra-flow-phase-group,
.scenra-flow-diagram:has(.scenra-flow-node:focus-within) .scenra-flow-phase-group {
  pointer-events: none;
}

/* Mobile — hide the SVG; stages stack as a vertical timeline rail.
   No hover state to discover; everything is shown by default. */
@media (max-width: 880px) {
  .scenra-flow-diagram {
    margin: 16px 0 0;
  }

  .scenra-flow-svg {
    display: none;
  }

  .scenra-flow-nodes {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-left: 1px solid rgba(0, 0, 0, 0.12);
    padding-left: 20px;
    margin-top: 8px;
  }

  .scenra-flow-node {
    position: static;
    transform: none;
    width: 100%;
    text-align: left;
    bottom: auto;
    top: auto;
    padding: 4px 0 4px 14px;
    border-left: 2px solid var(--ink);
    margin-left: -1px;
    cursor: default;
  }

  .scenra-flow-node--claude {
    border-left-color: rgba(0, 0, 0, 0.4);
  }

  /* Mobile: descriptions always visible, no grid trick. */
  .scenra-flow-node-desc {
    display: block;
    grid-template-rows: none;
    margin-top: 4px;
  }

  .scenra-flow-node-desc-inner {
    display: block;
    overflow: visible;
    opacity: 1;
    font-size: 12px;
    line-height: 1.5;
  }
}

/* Reduced motion — kill all transitions; states still apply but instant. */
@media (prefers-reduced-motion: reduce) {
  .scenra-flow-path,
  .scenra-flow-loop,
  .scenra-flow-dot,
  .scenra-flow-node,
  .scenra-flow-node-desc,
  .scenra-flow-node-desc-inner,
  .scenra-flow-phase,
  .scenra-flow-phase-pri,
  .scenra-flow-phase-focus {
    transition: none !important;
  }
}

/* === Commit 3 — page-load reveal animation =================== */

/* JS adds .is-pre-reveal to the diagram on load (so users with JS
   disabled or with prefers-reduced-motion never see the hidden
   state — they get the diagram immediately). When the figure
   enters the viewport, JS swaps to .is-revealed and the cascade
   below runs once. */

.scenra-flow-diagram.is-pre-reveal .scenra-flow-path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

.scenra-flow-diagram.is-pre-reveal .scenra-flow-loop,
.scenra-flow-diagram.is-pre-reveal .scenra-flow-dot,
.scenra-flow-diagram.is-pre-reveal .scenra-flow-node,
.scenra-flow-diagram.is-pre-reveal .scenra-flow-phase {
  opacity: 0;
}

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

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

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

@keyframes scenra-fade-in-loop {
  from { opacity: 0; }
  to   { opacity: 0.4; }
}

/* Phase paths — drawn sequentially with linear easing so the line
   reads as constant-speed current flowing through the circuit
   (cubic easing made it feel jumpy / flash-y). Slight overlaps
   between phases for visual continuity. Total sequence ≈ 2.9s. */
.scenra-flow-diagram.is-revealed .scenra-flow-path--I {
  animation: scenra-draw 600ms linear 0ms;
}
.scenra-flow-diagram.is-revealed .scenra-flow-path--II {
  animation: scenra-draw 800ms linear 400ms;
}
.scenra-flow-diagram.is-revealed .scenra-flow-path--III {
  animation: scenra-draw 600ms linear 1100ms;
}
.scenra-flow-diagram.is-revealed .scenra-flow-path--IV {
  animation: scenra-draw 700ms linear 1600ms;
}

/* Loop arc — fades in once the forward sweep is done. */
.scenra-flow-diagram.is-revealed .scenra-flow-loop {
  animation: scenra-fade-in-loop 700ms cubic-bezier(0.4, 0, 0.2, 1) 2200ms;
}

/* Stage dots — light up just after the line reaches them. */
.scenra-flow-diagram.is-revealed .scenra-flow-dot[data-stage="1"] { animation: scenra-fade-in 280ms ease-out 200ms;  }
.scenra-flow-diagram.is-revealed .scenra-flow-dot[data-stage="2"] { animation: scenra-fade-in 280ms ease-out 500ms;  }
.scenra-flow-diagram.is-revealed .scenra-flow-dot[data-stage="3"] { animation: scenra-fade-in 280ms ease-out 800ms;  }
.scenra-flow-diagram.is-revealed .scenra-flow-dot[data-stage="4"] { animation: scenra-fade-in 280ms ease-out 1100ms; }
.scenra-flow-diagram.is-revealed .scenra-flow-dot[data-stage="5"] { animation: scenra-fade-in 280ms ease-out 1350ms; }
.scenra-flow-diagram.is-revealed .scenra-flow-dot[data-stage="6"] { animation: scenra-fade-in 280ms ease-out 1650ms; }
.scenra-flow-diagram.is-revealed .scenra-flow-dot[data-stage="7"] { animation: scenra-fade-in 280ms ease-out 1850ms; }
.scenra-flow-diagram.is-revealed .scenra-flow-dot[data-stage="8"] { animation: scenra-fade-in 280ms ease-out 2150ms; }

/* Stage labels — fade in shortly after their dot for a layered feel. */
.scenra-flow-diagram.is-revealed .scenra-flow-node[data-stage="1"] { animation: scenra-fade-in 360ms ease-out 250ms;  }
.scenra-flow-diagram.is-revealed .scenra-flow-node[data-stage="2"] { animation: scenra-fade-in 360ms ease-out 550ms;  }
.scenra-flow-diagram.is-revealed .scenra-flow-node[data-stage="3"] { animation: scenra-fade-in 360ms ease-out 850ms;  }
.scenra-flow-diagram.is-revealed .scenra-flow-node[data-stage="4"] { animation: scenra-fade-in 360ms ease-out 1150ms; }
.scenra-flow-diagram.is-revealed .scenra-flow-node[data-stage="5"] { animation: scenra-fade-in 360ms ease-out 1400ms; }
.scenra-flow-diagram.is-revealed .scenra-flow-node[data-stage="6"] { animation: scenra-fade-in 360ms ease-out 1700ms; }
.scenra-flow-diagram.is-revealed .scenra-flow-node[data-stage="7"] { animation: scenra-fade-in 360ms ease-out 1900ms; }
.scenra-flow-diagram.is-revealed .scenra-flow-node[data-stage="8"] { animation: scenra-fade-in 360ms ease-out 2200ms; }

/* Phase tags ("pillars") — fade in at their rest opacity (0.55)
   just as their phase's line completes. */
.scenra-flow-diagram.is-revealed .scenra-flow-phase-group--I   .scenra-flow-phase {
  animation: scenra-fade-in-phase 360ms ease-out 600ms;
}
.scenra-flow-diagram.is-revealed .scenra-flow-phase-group--II  .scenra-flow-phase {
  animation: scenra-fade-in-phase 360ms ease-out 1200ms;
}
.scenra-flow-diagram.is-revealed .scenra-flow-phase-group--III .scenra-flow-phase {
  animation: scenra-fade-in-phase 360ms ease-out 1700ms;
}
.scenra-flow-diagram.is-revealed .scenra-flow-phase-group--IV  .scenra-flow-phase {
  animation: scenra-fade-in-phase 360ms ease-out 2300ms;
}

/* === Wow #3 — Phase IV hover: loop arc flows ================
   When Phase IV (Feedback) is hovered, the loop arc's dashed
   pattern slides forward along the path — communicates that the
   loop is alive, closing back from stage 8 → stage 1 (PRD). One
   period (-6 in normalized 0–100 path space) per second, infinite
   while hovered. Wraps cleanly because the dasharray is exactly
   2/4 (period 6). */
@keyframes scenra-loop-flow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -6; }
}

.scenra-flow-diagram:has(.scenra-flow-phase-group--IV:hover) .scenra-flow-loop,
.scenra-flow-diagram:has(.scenra-flow-phase-group--IV:focus-within) .scenra-flow-loop {
  animation: scenra-loop-flow 1s linear infinite;
}

/* === Wow #4 — Stage 8 hover: line tightens, then settles =====
   Stage 8 is "Real-world trip" — the moment of validation. When
   hovered, the entire forward path + loop arc briefly thickens,
   then settles back. Two keyframes are needed because Phase II/III
   sit at 1.5px stroke-width (foundation/execution) while Phase I/IV
   sit at 1px (intent/feedback) — each has its own pulse range. */
@keyframes scenra-line-tense-thin {
  0%, 100% { stroke-width: 1; }
  40%      { stroke-width: 1.6; }
}

@keyframes scenra-line-tense-thick {
  0%, 100% { stroke-width: 1.5; }
  40%      { stroke-width: 2.1; }
}

@keyframes scenra-loop-tense {
  0%, 100% { stroke-width: 0.75; }
  40%      { stroke-width: 1.25; }
}

.scenra-flow-diagram:has(.scenra-flow-node[data-stage="8"]:hover) .scenra-flow-path--I,
.scenra-flow-diagram:has(.scenra-flow-node[data-stage="8"]:focus-within) .scenra-flow-path--I,
.scenra-flow-diagram:has(.scenra-flow-node[data-stage="8"]:hover) .scenra-flow-path--IV,
.scenra-flow-diagram:has(.scenra-flow-node[data-stage="8"]:focus-within) .scenra-flow-path--IV {
  animation: scenra-line-tense-thin 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.scenra-flow-diagram:has(.scenra-flow-node[data-stage="8"]:hover) .scenra-flow-path--II,
.scenra-flow-diagram:has(.scenra-flow-node[data-stage="8"]:focus-within) .scenra-flow-path--II,
.scenra-flow-diagram:has(.scenra-flow-node[data-stage="8"]:hover) .scenra-flow-path--III,
.scenra-flow-diagram:has(.scenra-flow-node[data-stage="8"]:focus-within) .scenra-flow-path--III {
  animation: scenra-line-tense-thick 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.scenra-flow-diagram:has(.scenra-flow-node[data-stage="8"]:hover) .scenra-flow-loop,
.scenra-flow-diagram:has(.scenra-flow-node[data-stage="8"]:focus-within) .scenra-flow-loop {
  animation: scenra-loop-tense 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reduced motion — collapse the reveal sequence to instant; kill
   the wow animations too. */
@media (prefers-reduced-motion: reduce) {
  .scenra-flow-diagram.is-pre-reveal .scenra-flow-path {
    stroke-dashoffset: 0;
  }
  .scenra-flow-diagram.is-pre-reveal .scenra-flow-loop,
  .scenra-flow-diagram.is-pre-reveal .scenra-flow-dot,
  .scenra-flow-diagram.is-pre-reveal .scenra-flow-node,
  .scenra-flow-diagram.is-pre-reveal .scenra-flow-phase {
    opacity: revert;
  }
  .scenra-flow-diagram .scenra-flow-loop,
  .scenra-flow-diagram .scenra-flow-path,
  .scenra-flow-diagram.is-revealed * {
    animation: none !important;
  }
}

/* -------------------------------------------------------------
   §03 — How the app works.
   Scroll-pinned vertical carousel. The section pins to the
   viewport for 5 viewport-heights of scroll; each card occupies
   one viewport-height of progress; after the 5th card the section
   unpins and normal scroll resumes.

   Card dimensions match harin.design's pattern:
     - Outer card:    380 × 737
     - Media panel:   380 × 676 (rounded, holds the phone capture)
     - Info strip:    380 × 62  (number + title + caption)

   Mobile (≤880px) and prefers-reduced-motion: pin disengages and
   the cards become a normal vertical stack.
   ------------------------------------------------------------- */
.case-body > .scenra-flow-pin {
  grid-column: content-start / full-end;
  margin: 32px 0;
}

.scenra-flow-pin {
  position: relative;
  /* numCards × 100vh of pin scroll + 100vh for the sticky element
     itself = (n+1) × 100vh outer height. 4 cards: 500vh. */
  height: 500vh;
}

.scenra-flow-pin-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* The track is a horizontal row of all 5 cards, wider than the
   viewport. As the user scrolls vertically through the pinned
   section, JS translates the track LEFT so each card's center
   aligns with the viewport center in turn — vertical scroll drives
   horizontal carousel motion.

   No CSS transition on transform: the JS updates translateX every
   animation frame as scroll moves, so the track tracks the scroll
   position 1:1. A CSS transition would chase the JS updates and
   feel laggy. */
.scenra-flow-pin-track {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 80px;
  /* Initial position: card 1 centered. Offset = (numCards − 1) × step / 2.
     With card width 380, gap 80, step 460, num 4: 690px. */
  transform: translateX(690px);
  will-change: transform;
}

.scenra-flow-pin-card {
  width: 380px;
  height: 737px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

.case-body .scenra-flow-pin-track > .scenra-flow-pin-card {
  padding-left: 0;
}
.case-body .scenra-flow-pin-track > .scenra-flow-pin-card::before {
  content: none;
}

/* Media panel: rounded, holds the phone capture or its placeholder. */
.scenra-flow-pin-card-media {
  width: 380px;
  height: 676px;
  background: var(--g50);
  border: var(--hairline);
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.scenra-flow-pin-card-media .case-figure-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--g500);
  letter-spacing: -0.005em;
  background: transparent;
  border: none;
  margin: 0;
}

.scenra-flow-pin-card-media .case-figure-placeholder .ph-spec {
  font-size: 10px;
  font-weight: 400;
  margin-top: 10px;
  color: var(--g400);
  line-height: 1.45;
  letter-spacing: 0;
  max-width: 280px;
}

/* Info strip: number on the left, title + caption on the right.
   align-items: start so the number aligns to the top of the strip
   instead of being vertically centered (which made it sit between
   the title and caption baselines). */
.scenra-flow-pin-card-info {
  width: 380px;
  height: 61px;
  display: grid;
  grid-template-columns: 38px 1fr;
  column-gap: 14px;
  align-items: start;
  padding: 14px 0 0;
  flex-shrink: 0;
}

.scenra-flow-pin-card-num {
  font-size: 22px;
  font-weight: 200;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-feature-settings: "tnum";
  line-height: 1;
}

.scenra-flow-pin-card-text-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.scenra-flow-pin-card-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
}

.scenra-flow-pin-card-text {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--g500);
  margin: 0;
}

/* Mobile + reduced-motion: disengage the pin entirely. The track
   becomes a normal vertical stack, all cards visible, no sticky
   container, no transform. */
@media (max-width: 880px), (prefers-reduced-motion: reduce) {
  .scenra-flow-pin {
    height: auto;
  }
  .scenra-flow-pin-stage {
    position: static;
    height: auto;
    display: block;
    overflow: visible;
  }
  .scenra-flow-pin-track {
    flex-direction: column;
    transform: none !important;
    transition: none;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    gap: 40px;
  }
  .scenra-flow-pin-card {
    width: 100%;
    height: auto;
  }
  .scenra-flow-pin-card-media {
    width: 100%;
    aspect-ratio: 380 / 676;
    height: auto;
  }
  .scenra-flow-pin-card-info {
    width: 100%;
  }
}