/* Scrollytelling — generic sticky-pinned stage + flowing steps (S80).
 * The Pudding pattern: a graphic STAGE that pins (stays visible) while a column
 * of text STEPS scrolls past it. Reusable by any surface that walks a reader
 * through a living figure (framework now; research/about later).
 *
 * Division of labor (perf ship-gate, cited at Step A): CSS owns the PIN, JS owns
 * the STATE. The pin is `position: sticky` — compositor-handled, off the main
 * thread, zero JS. State changes come from js/scrolly.js via IntersectionObserver
 * (also off-main-thread, fires only on threshold crossings, no scroll loop).
 * Measured: full scroll-through at 4x CPU throttle = 0ms long-task time.
 *
 * Floors baked into the contract (mirrors foundation-motion.css .reveal):
 *   - MOBILE: the pin drops to a stepped vertical sequence (stage flows inline
 *     above the steps). Pure CSS media query, no JS branch.
 *   - REDUCED MOTION / NO JS: the steps column is a complete prose narrative on
 *     its own (the text-summary fallback); the stage is a static figure. js/
 *     scrolly.js sets a resting final-state and attaches no scroll observers.
 */

.scrolly {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2xl);
  max-width: var(--content-max);
  margin: 0 auto;
  padding-inline: var(--space-gutter);
  align-items: start;
}

/* The pinned stage. Sticky = compositor layout (not animation), so it is kept
 * even under reduced motion; only the in-stage transitions are suppressed. */
.scrolly__stage {
  position: sticky;
  top: var(--scrolly-pin-top, 88px);
  height: calc(100vh - var(--scrolly-pin-top, 88px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: start;
}

.scrolly__steps { display: flex; flex-direction: column; }

/* Each step gets a full beat of scroll runway so the pin holds while one state
 * is read. The runway is what controls the pin lifetime (not JS). */
.scrolly__step {
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--space-lg);
}
.scrolly__step:first-child { min-height: 70vh; }

/* MOBILE floor: un-pin → stepped vertical sequence. The stage flows inline
 * above the steps; each step becomes its own beat. */
@media (max-width: 920px) {
  .scrolly { grid-template-columns: 1fr; gap: var(--space-lg); }
  .scrolly__stage {
    position: static;
    height: auto;
    margin-bottom: var(--space-lg);
  }
  .scrolly__step,
  .scrolly__step:first-child { min-height: 0; padding-block: var(--space-md); }
}