How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- The section title is position: sticky; top: 0; height: 100svh, centered. Its letters rise and fade in one after another (0.7s each, 45ms apart, cubic-bezier(.22,1,.36,1)) the first time 60% of it is visible.
- The cards sit above the title (higher z-index, solid background) and are each position: sticky with top: calc(6vh + index × 24px), so every new card covers the previous one and the pile grows downward by 24px per card.
- Each card: an image area (aspect 1129:577) on a diagonal gradient, a meta row (year · industry · service), then the project name and a diagonal arrow.
- Photos rest in black and white. Hovering a card zooms its image to 1.03 and brings back its colour (both 700ms), turns the name red (#D71212) and nudges the arrow up-right.
- After the pile: a numbered list of more projects with hairlines that draw in from the left as they enter; names slide 8px right on hover.
- Reduced motion: title letters appear without animation; stacking (pure CSS) still works.