How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- Panels (each position: absolute at the top, full width): photo 100% tall on #1E1510, terracotta band #C2743A 55% tall, parchment ground #F1E7D8 (with a paper texture) 55% tall. Closed: translateY(-100.5%).
- Open: each panel moves to translateY(0) over 900ms cubic-bezier(0.16, 1, 0.3, 1). Delays: photo 0ms, band 100ms, ground 200ms.
- Close: in reverse order and faster: 600ms cubic-bezier(0.76, 0, 0.24, 1), delays ground 0ms, band 100ms, photo 200ms. The whole menu becomes visibility: hidden 900ms after closing starts, so nothing can be tabbed to while it's shut.
- Links: Marcellus 56px, line-height 1.1, letter-spacing -0.025em, uppercase, starting at the horizontal middle of a 1344px column, 40px from the top. Each sits in its own overflow: hidden line box and rises from translateY(110%) to 0 over 800ms (expo out) with a delay of 380ms + index × 70ms. Hover or focus: terracotta color (250ms) and padding-left: 16px (350ms).
- Peek photo (200 × 250, 32px from the top at the column's left edge): opens with clip-path: inset(0 0 100% 0) to inset(0) and rises from translateY(-40px), 900ms expo with a 450ms delay. Each link has its own 4:5 image; hovering or focusing a link cross-fades to it over 500ms.
- Secondary row ("Sign in", a 4px terracotta square, "Bag") 40px under the links, the Close button (top right, 48px down) and the footer row on the photo (mark on the left, a tagline centered, place and year on the right in muted text) fade in over 400–600ms, 800ms after opening.
- The photo has a vertical scrim: linear-gradient(rgba(30,21,16,.55) 0%, rgba(30,21,16,.15) 60%, rgba(30,21,16,.55) 100%).
- Behavior: page scroll is locked while open. Escape closes. Focus moves to Close after 900ms and returns to the Menu button on close. The overlay is role="dialog" aria-modal="true".
- Under 1200px: the peek photo hides, links start at the left 96px down and are 40px, the footer row stacks on the left. Phones: band and ground cover 60%, links 30px starting 88px down, Close 24px from the top.
- Reduced motion: no transitions at all, the menu simply appears and disappears.