How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- Bar: fixed 24px from the top, centred, 50% of the screen wide (at most 600px), 60px tall, with 8px corners and 16px 24px 16px 28px padding. The logo is 20px and the burger is two 20 × 2px lines 4px apart. The whole bar is the toggle.
- Open (about 1.3s): 1. The panel (same colour, joined to the bar) grows down from 0 to full height (0.5s, ease-out). 2. From 0.2s, each word of the links slides up out of its own mask, from 120% below (0.75s, strong ease-out, 50ms apart across all links). 3. At about 0.35s the footer rises 20px into place (0.3s). Then every character of the social links and the clock appears 30ms after the one before, flickering through 3 to 8 random characters (every 25ms, at most 0.4s) before settling. 4. The logo rotates 180° (0.5s) and the burger lines cross into an X.
- Close (0.8s): the footer hides and drops (0.3s), the words drop back into their masks in reverse order (0.25s, 25ms apart), then the panel folds up (0.5s ease-in-out).
- Links: 80px heavy condensed uppercase (line-height 0.85) in the light colour, 8px × 28px padding, rows overlapping by 8px. The panel has 32px above the links and 48px below.
- Footer: 13.6px mono uppercase with 16px 28px 24px padding. On the left, two social links 16px apart, each with a small ▶. On the right, the local time HH:MM:SS LOCAL in the muted colour, ticking every second.
- Scroll: scrolling down past 100px hides the bar (it slides up by twice its height, 0.4s) and closes the menu. Scrolling up brings it back.
- Under 1000px: the bar is 90% wide, the links are 48px with 12px × 24px padding, and the footer stacks with the socials wrapping 8px apart.
- Fallbacks: reduced motion opens and closes instantly with no scramble. Escape closes the menu.