/* Scrub step story: a pinned "how it works" section. Scroll plays a timeline: headline steps arrive and leave,
   then a drawing assembles from pieces flying in off the screen edges, more layers fade in one by one with a
   caption card following along, and when the story ends a side panel opens with the text.
   Numbers are Heron's home "map" story (§10.4); behaviour changes only through these knobs. */
.sss {
  --sss-length: 700svh;                      /* scroll length of the pinned story (desktop) */
  --sss-length-m: 500svh;                    /* ... on phones (panel sits below instead of beside) */
  --sss-panel-w: 32.2vw;                     /* side panel's open width (55.65rem of a 1728 design = 32.2vw) */
  --sss-panel-dur: .4s;                      /* panel opening */
  --sss-panel-ease: ease;
  --sss-caption-dur: .4s;                    /* caption card crossfade + height */
  --sss-reveal-dur: .8s;                     /* panel text rising out of its mask */
  --sss-reveal-ease: cubic-bezier(.33, 1, .68, 1);   /* GSAP power2.out (cubic) */
  --sss-reveal-stagger: .05s;
  --sss-icon-dur: 1.6s;                      /* panel icons settle from scale 1.25 */
  --sss-icon-ease: cubic-bezier(.16, 1, .3, 1);       /* expo.out */
  --sss-bg: #f2f0ea;
  --sss-ink: #232220;
  --sss-muted: #8d8a82;
  --sss-line: #d3d0c7;
  --sss-accent: #3b5bdb;
  --sss-card-shadow: 0 7px 0 -2px var(--sss-ink);   /* source: 0 .8rem 0 -.2rem #000 */
  position: relative; background: var(--sss-bg); color: var(--sss-ink);
}
.sss, .sss *, .sss *::before, .sss *::after { box-sizing: border-box; }

.sss__track { position: relative; height: var(--sss-length); }
.sss__pin { position: sticky; top: 0; height: 100svh; display: flex; }
.sss__stage { position: relative; flex: 1; min-width: 0; overflow: clip; }
.sss__view { position: relative; height: 100%; will-change: transform; }

/* every step and layer fills the view, stacked */
.sss__step, .sss__layer { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.sss__step { padding: 0 6vw; text-align: center; opacity: 0; visibility: hidden; will-change: transform, opacity; }
.sss__step > * { margin: 0; }
.sss__layer { opacity: 0; pointer-events: none; padding: clamp(56px, 9vh, 110px) clamp(16px, 4vw, 64px); }
.sss__layer svg { width: 100%; height: 100%; overflow: visible; }
.sss__layer--assemble path, .sss__layer--assemble line, .sss__layer--assemble rect, .sss__layer--assemble circle { transform-box: fill-box; transform-origin: center; opacity: 0; }

/* caption card, bottom left: appears with the first layer, follows the layer on show */
.sss__intro {
  position: absolute; left: clamp(16px, 1.85vw, 32px); bottom: clamp(16px, 1.85vw, 32px); z-index: 3;
  width: clamp(220px, 16.2vw, 300px); border: 1px solid var(--sss-ink); background: var(--sss-bg);
  opacity: 0; transition: opacity var(--sss-caption-dur);
}
.sss__intro.is-active { opacity: 1; box-shadow: var(--sss-card-shadow); }
.sss__intro-head { background: var(--sss-ink); color: var(--sss-bg); padding: 8px 8px 8px 12px; font: 12px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; text-transform: uppercase; }
.sss__intro-body { display: grid; overflow: hidden; transition: height var(--sss-caption-dur); }
.sss__caption { grid-area: 1 / 1; align-self: start; padding: 12px; opacity: 0; pointer-events: none; transition: opacity var(--sss-caption-dur) ease; }
.sss__caption.is-active { opacity: 1; pointer-events: auto; }
.sss__caption p { margin: 0 0 14px; font-size: 14px; line-height: 1.4; }
.sss__caption small { display: block; color: var(--sss-muted); font: 12px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; }

/* side panel: shut while the story plays, opens to --sss-panel-w when it ends */
.sss__panel { flex: none; width: 0; height: 100%; overflow: hidden; transition: width var(--sss-panel-dur) var(--sss-panel-ease); }
.sss.is-expanded .sss__panel { width: var(--sss-panel-w); }
.sss__panel-inner { width: var(--sss-panel-w); height: 100%; display: flex; flex-direction: column; border-left: 1px solid var(--sss-line); }

/* panel reveal (plays once, 200ms after the panel starts opening) */
.sss [data-sss-reveal] { display: block; overflow: hidden; }
.sss [data-sss-reveal] > * { display: block; transform: translateY(105%); opacity: 0; }
.sss.is-revealed [data-sss-reveal] > * {
  transform: none; opacity: 1;
  transition: transform var(--sss-reveal-dur) var(--sss-reveal-ease), opacity var(--sss-reveal-dur) var(--sss-reveal-ease);
  transition-delay: calc(var(--sss-i, 0) * var(--sss-reveal-stagger));
}
.sss [data-sss-icon] { transform: scale(1.25); opacity: 0; }
.sss.is-revealed [data-sss-icon] {
  transform: none; opacity: 1;
  transition: transform var(--sss-icon-dur) var(--sss-icon-ease), opacity var(--sss-icon-dur) var(--sss-icon-ease);
  transition-delay: calc(var(--sss-i, 0) * var(--sss-reveal-stagger));
}

/* phones: the story pins on its own, the panel follows below at full width */
@media (max-width: 767px) {
  .sss__track { height: auto; }
  .sss__pin { position: static; height: auto; display: block; }
  .sss__stage { height: var(--sss-length-m); overflow: visible; }
  .sss__view { position: sticky; top: 0; height: 100svh; overflow: clip; }
  .sss__panel, .sss.is-expanded .sss__panel { width: 100%; height: auto; }
  .sss__panel-inner { width: 100%; height: auto; border-left: 0; border-top: 1px solid var(--sss-line); }
  .sss__intro { width: auto; right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .sss__panel { transition: none; }
  .sss.is-revealed [data-sss-reveal] > *, .sss.is-revealed [data-sss-icon] { transition-duration: .01s; transition-delay: 0s; }
}
/* no JS: the finished picture (every layer up), no headline steps, panel open */
.sss:not(.is-ready) .sss__layer, .sss:not(.is-ready) .sss__layer--assemble * { opacity: 1; }
.sss:not(.is-ready) .sss__panel { width: var(--sss-panel-w); }
.sss:not(.is-ready) [data-sss-reveal] > *, .sss:not(.is-ready) [data-sss-icon] { transform: none; opacity: 1; }