How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- Grid: 32px padding, rows 64px apart, two equal cards per row 32px apart, with 128px of space below the grid.
- Card: a 5:3 image with 16px corners, then 16px below it the title (32px heavy condensed italic uppercase, line-height 0.95) and an 8px gap before the 14px mono uppercase tag.
- Waiting: before a row arrives, its cards are invisible, scaled to 0.75, and pushed 1000px sideways and rotated 50°. The first card goes to the left (-1000px, -50°) and the second to the right (1000px, 50°).
- Fly in: when the row's top reaches 75% of the screen height, both cards move to their place, straighten, grow to full size and fade in together (1s, strong ease-out). Each row plays once.
- Under 1000px: the cards in a row stack. They still fly in from alternating sides when their row arrives.
- Fallbacks: reduced motion and no JavaScript show the grid in place.