/* Scroll story. Default (no JS, narrow, reduced motion): every step is a card with its own screenshot.
   With JS on a wide screen the section gets .is-pinned: the app window sticks while the steps scroll past. */
.story { padding-block: var(--space-8); border-top: 1px solid var(--line); }
@media (min-width: 900px) { .story { padding-block: var(--space-9); } }

.story__head { max-width: 760px; margin-bottom: var(--space-7); }
.story__eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: var(--space-5);
  font-family: var(--mono); font-size: var(--fs-mono); font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}
.story__eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.story__head h2 { text-wrap: balance; }

.story__steps { display: grid; gap: var(--space-7); }
.story__step { display: grid; gap: var(--space-3); max-width: 720px; }
.story__no { font-family: var(--mono); font-size: var(--fs-mono); font-weight: 500; letter-spacing: 0.14em; color: var(--accent); }
.story__step h3 { font-family: var(--serif); font-weight: 700; font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: -0.03em; line-height: 1.12; }
.story__step p { color: var(--text-2); max-width: 44ch; text-wrap: pretty; }

.story__card {
  width: 100%; height: auto; margin-top: var(--space-3);
  border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: #000;
}

/* The pinned window only exists when pinning is on. */
.story__window { display: none; }
.story__screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #000; border: 1px solid var(--line-strong); border-radius: var(--radius-md); }
.story__screen img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.3s ease; }
.story__screen img[data-active="true"] { opacity: 1; }

.story__cursor {
  position: absolute; left: var(--cx, 6%); top: var(--cy, 26%); z-index: 2;
  width: 26px; height: 26px; margin: -2px 0 0 -2px; pointer-events: none;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
  transition: left 0.6s var(--ease), top 0.6s var(--ease);
}

/* Pinned: the heading, then the app window right below it, side by side with the steps. The window starts at the top of
   the layout (no empty band above it), sticks a little below the header while the steps scroll past, and lets go at the end. */
.story.is-pinned { padding-block-start: var(--space-8); }
.story.is-pinned .story__head { margin-bottom: var(--space-6); }
.story.is-pinned .story__layout { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-7); align-items: start; }
.story.is-pinned .story__steps { gap: 0; }

/* Each step is an even band; the active one is full strength and gets an accent mark on a thin rail. */
.story.is-pinned .story__step {
  min-height: 52vh; align-content: center; padding-left: var(--space-5);
  border-left: 2px solid var(--line); opacity: 0.3;
  transition: opacity 0.35s ease, border-color 0.35s ease;
}
.story.is-pinned .story__step:first-child { min-height: 40vh; align-content: start; padding-top: var(--space-2); }
.story.is-pinned .story__step:last-child { min-height: 40vh; align-content: start; padding-top: var(--space-6); }
.story.is-pinned .story__step.is-active { opacity: 1; border-left-color: var(--accent); }
.story.is-pinned .story__card { display: none; }

.story.is-pinned .story__window { display: block; position: sticky; top: calc(var(--header-h) + 5vh); }
.story.is-pinned .story__screen {
  border-radius: var(--radius-lg, 18px);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.04), 0 0 120px -50px var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .story__screen img, .story__cursor, .story.is-pinned .story__step { transition: none; }
}