Act as a senior front-end engineer and motion designer. Build a scroll-linked story section on {{page_or_feature}} for {{business_name}}, in my {{tech_stack}} project. The story, in steps: {{existing_copy}}. Read the page's components and styles first. What moves and why: a sticky visual changes as each step of text scrolls past, so the picture always shows what the words describe. Movement follows scroll position, never a timer. Layout: - 3 to 6 steps. From 1024px up, text steps on the left (about 40%) scroll normally while the visual on the right uses position sticky - Below 1024px, no sticky: each step stacks its own visual above its text - Steps are real text in the DOM, in reading order, each with a heading Motion: - Progress uses CSS scroll-driven animations with a view timeline where supported; elsewhere an IntersectionObserver switches the active step - Visual changes are crossfades or small transforms: opacity, translate up to 24px, scale between 0.96 and 1 - Discrete step switches take 300ms, ease-in-out cubic-bezier(0.65, 0, 0.35, 1) Rules: - Never hijack scrolling: no changed scroll speed, no forced snapping, no blocked wheel - Only transform and opacity; the sticky column reserves its height, so nothing shifts - Under prefers-reduced-motion: reduce, no scrubbing: the visual swaps to the active step instantly - Without JavaScript or browser support, it reads as a normal stacked section - Every visual state has a text description for screen reader users Performance budget: no scroll event listeners, 60fps on a mid-range phone with 4x CPU throttling, and visuals under 200KB each, lazy-loaded after the first. Avoid: pinned sections that eat several screens of scrolling, flying text, and 3D for its own sake. Finish with the step structure, how it behaves at 360, 768 and 1280px, and the files changed.