/* ==========================================================================
   THE LICENCE-TO-CODE SHIFT — a three-step narrative. The ground tint and
   the scene change with the active step; the lead and the scene stay put on
   wide screens while the steps scroll past.
   ========================================================================== */

.story {
  --story-bg: #E9EDE4; --story-ink: var(--ink-primary); --story-body: var(--ink-secondary); --story-soft: var(--ink-muted);
  --story-accent: var(--brand-green-accent); --story-rail: rgba(21, 24, 21, 0.14); --story-plate: rgba(255, 255, 255, 0.72);
  position: relative; overflow: clip;
  background: var(--story-bg); color: var(--story-ink);
  padding: var(--space-section-lg) 0 var(--space-section);
  transition: background-color var(--motion-ambient) var(--ease);
}
.story[data-active="0"] { --story-bg: #DCE4D2; }
.story[data-active="1"] { --story-bg: #D2DDD6; }
.story[data-active="2"] { --story-bg: #E4DECF; }

.story-head { max-width: 56rem; margin-bottom: var(--space-block); }
.story-lead { max-width: 36rem; font-family: var(--font-serif); font-size: var(--type-section); line-height: var(--leading-heading); letter-spacing: var(--tracking-title); color: var(--story-ink); }

.story-track { display: grid; grid-template-columns: 1fr; gap: var(--space-3xl); }
@media (min-width: 900px) { .story-track { grid-template-columns: 5fr 7fr; gap: var(--space-block); align-items: start; } }

.story-sticky { display: grid; grid-template-columns: 1fr auto; gap: var(--space-xl); align-items: center; }
@media (min-width: 900px) { .story-sticky { position: sticky; top: calc(var(--nav-height) + 3rem); } }

.story-stage { position: relative; width: 100%; aspect-ratio: 1; max-width: 440px; }
.story-stage svg { width: 100%; height: 100%; display: block; overflow: visible; }
.story-stage text { font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; fill: var(--story-soft); }
.story-stage .sc-grid line { stroke: rgba(21, 24, 21, 0.10); stroke-width: 1; }
.story-stage .sc-box { fill: var(--story-plate); stroke: var(--story-ink); stroke-width: 1.4; }
.story-stage .sc-line { fill: none; stroke: var(--story-ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.story-stage .sc-accent { stroke: var(--story-accent); }
.story-stage .sc-fill { fill: var(--story-accent); stroke: none; }
.story-stage .sc-cut { stroke-dasharray: 4 5; opacity: 0.55; }
.story-stage .sc-layer { transition: opacity var(--motion-enter) var(--ease), transform var(--motion-enter) var(--ease-enter); transform-box: fill-box; transform-origin: center; }
.story-stage .sc-draw { stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 900ms var(--ease) 120ms, opacity var(--motion-enter) var(--ease); }
.story[data-active="0"] .sc-l1, .story[data-active="1"] .sc-l1 { opacity: 1; }
.story .sc-l1, .story .sc-l2, .story .sc-l3 { opacity: 0; }
.story[data-active="0"] .sc-l1 { opacity: 1; }
.story[data-active="1"] .sc-l1 { opacity: 0.25; }
.story[data-active="1"] .sc-l2 { opacity: 1; }
.story[data-active="1"] .sc-l2 .sc-draw { stroke-dashoffset: 0; }
.story[data-active="2"] .sc-l2 { opacity: 0.25; }
.story[data-active="2"] .sc-l2 .sc-draw { stroke-dashoffset: 0; }
.story[data-active="2"] .sc-l3 { opacity: 1; }
.story[data-active="2"] .sc-l3 .sc-draw { stroke-dashoffset: 0; }

.story-progress { list-style: none; display: flex; flex-direction: column; justify-content: center; padding: var(--space-md) var(--space-xs); background: var(--story-plate); border-radius: var(--radius-pill); box-shadow: var(--shadow-resting); }
.story-progress li { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); }
.story-progress-num { position: relative; padding: var(--space-2xs) var(--space-xs); font-size: var(--text-xs); font-variant-numeric: tabular-nums; color: var(--story-soft); transition: color var(--motion-enter) var(--ease); }
.story-progress-num::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.story-progress-track { position: relative; width: 2px; height: 3.5rem; border-radius: 2px; background: var(--story-rail); overflow: hidden; }
.story-progress li:last-child .story-progress-track { display: none; }
.story-progress-track::after { content: ""; position: absolute; inset: 0 0 100% 0; background: var(--story-accent); transition: bottom var(--motion-enter) var(--ease); }
.story-progress li.is-active .story-progress-num { color: var(--story-accent); font-weight: 600; }
.story-progress li.is-done .story-progress-num { color: var(--story-accent); }
.story-progress li.is-done .story-progress-track::after { inset: 0; }
@media (max-width: 899.98px) { .story-progress { display: none; } .story-sticky { grid-template-columns: 1fr; } }

.story-steps { display: flex; flex-direction: column; gap: var(--space-block); }
@media (min-width: 900px) { .story-steps { padding-top: var(--space-2xl); } .story-step { min-height: 46vh; } }
.story-step { opacity: 0.45; transition: opacity var(--motion-enter) var(--ease); }
.story-step.is-active, .story-step.is-done { opacity: 1; }
.story-num { display: block; font-family: var(--font-serif); font-size: var(--text-2xl); color: var(--story-accent); margin-bottom: var(--space-md); }
.story-step h3 { margin-bottom: var(--space-md); color: var(--story-ink); }
.story-step p { max-width: 30rem; font-size: var(--text-lg); line-height: var(--leading-reading); color: var(--story-body); }
.story-lead-in { display: block; font-weight: 600; color: var(--story-ink); margin-bottom: var(--space-xs); }
@media (prefers-reduced-motion: reduce) { .story, .story-step, .sc-layer, .sc-draw { transition: none !important; } .story .sc-l1, .story .sc-l2, .story .sc-l3 { opacity: 1; } .story .sc-draw { stroke-dashoffset: 0; } }