How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- Cards: full width minus 32px each side, at least 500px tall, 32px padding, 32px corners, in a solid colour. The title takes three quarters of the width (80px heavy condensed italic uppercase, line-height 0.95). The image takes the last quarter at 4:5 with 32px corners, and there is a 64px gap between them.
- Catch: every card except the last stops when its top reaches 45% of the screen height and holds there until the section's bottom reaches 90% of the screen.
- Drift: while it is held, card *i* (counting from 0, out of *n*) slides up inside its slot by (n − i) × 14vh, tied directly to the scroll position. Earlier cards rise further, so the pile fans out into a row of tabs.
- Release: after the hold, the cards scroll off with the page, keeping their drift.
- Under 1000px: no catching. The cards simply stack with 32px gaps. Each card is centred, with a 3px ink border and 16px corners, a 40px title above a 5:3 image (also bordered).
- Fallbacks: reduced motion and no JavaScript give the plain stacked list.