Fullscreen Menu with Staggered Links

### EFFECT: Fullscreen Menu with Staggered Links
**What it does (visual):** A dark page with a fixed header: a small serif wordmark ("Atelier/Nord", the slash at 45% opacity) on the left and a 44px burger (two 22px hairlines, 8px apart) on the right. The hero copy drifts up on load. When the burger is pressed, the two bars slide together and rotate ±45° into a cross (0.5s) while, at the same moment, a light curtain (the inverse of the page colour) drops from the top edge to fill the whole viewport in 0.9s — revealed by `clip-path: inset()`, so the edge is a crisp horizontal line travelling downward, not a fade. 0.45s before the curtain lands, five giant light-serif words (Studio, Work, Services, Journal, Contact) rise out of invisible horizontal masks one after another, 70ms apart, each decelerating hard into place (1s). A right-hand column of small mono labels and contact/social links fades up 12px, 40ms apart. A huge, 7%-opacity index number ("01") sits in the bottom-right corner behind everything; hovering a link makes it flick up and out and the new number ("03") rise in. Hovered links turn lime and italic. Pressing the cross, Escape or a link plays the whole sequence backwards — words sink into their masks, the curtain lifts, the cross unfolds into a burger. The page cannot scroll while the menu is open. In the demo the menu opens by itself 0.7s after load so the sequence is visible without a click.

**Tech stack:**
- GSAP 3.13+ core (no plugins).
- CDN: `<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>`
- npm: `npm i gsap` → `import gsap from "gsap";`
- `clip-path: inset()` is animated directly by GSAP (string interpolation).

**HTML structure:**
```html
<div class="fsm">
  <header class="fsm__header">
    <a class="fsm__logo" href="#top">Atelier<span class="fsm__logo-sep">/</span>Nord</a>
    <button class="fsm__burger" type="button" aria-expanded="false" aria-controls="fsm-menu" aria-label="Open menu">
      <span class="fsm__bar"></span><span class="fsm__bar"></span>
    </button>
  </header>
  <nav class="fsm__overlay" id="fsm-menu" aria-label="Main menu" aria-hidden="true">
    <span class="fsm__bgnum" aria-hidden="true">01</span>
    <ul class="fsm__links">
      <li class="fsm__item"><a class="fsm__link" href="#studio" data-index="01"><span class="fsm__mask"><span class="fsm__text">Studio</span></span></a></li>
      <!-- Work 02, Services 03, Journal 04, Contact 05 -->
    </ul>
    <div class="fsm__aside">
      <div class="fsm__group"><p class="fsm__label">New business</p><a class="fsm__small" href="#">hello@ateliernord.studio</a><a class="fsm__small" href="#">+47 22 00 10 10</a></div>
      <div class="fsm__group"><p class="fsm__label">Elsewhere</p><a class="fsm__small" href="#">Instagram</a><a class="fsm__small" href="#">Are.na</a><a class="fsm__small" href="#">LinkedIn</a></div>
      <div class="fsm__group"><p class="fsm__label">Studios</p><p class="fsm__small">Oslo · Copenhagen</p></div>
    </div>
  </nav>
  <main class="fsm__page" id="top"> …hero + a tall filler section so there is scroll to lock… </main>
</div>
```

**CSS requirements:**
- `.fsm__header`: `position: fixed; inset: 0 0 auto 0; z-index: 60; display: flex; justify-content: space-between; align-items: center; padding: clamp(1rem, 2.5vw, 1.75rem) clamp(1rem, 4vw, 3rem); mix-blend-mode: difference; color: #fff;` — difference blending keeps logo + cross legible on both the dark page and the light curtain. The header MUST be above the overlay (z 60 > 50).
- `.fsm__burger`: `position: relative; width: 44px; height: 44px;` `.fsm__bar`: `position: absolute; left: 11px; width: 22px; height: 1.5px; background: #fff; will-change: transform;` first bar `top: calc(50% - 4.75px)`, second `top: calc(50% + 3.25px)` (8px apart → each travels 4px to meet).
- `.fsm__overlay`: `position: fixed; inset: 0; z-index: 50; visibility: hidden; overflow: hidden; background: var(--text); color: var(--bg); clip-path: inset(0 0 100% 0); will-change: clip-path; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: end; gap: 3rem; padding: clamp(5rem, 14vh, 8rem) clamp(1rem, 4vw, 3rem) clamp(2rem, 6vh, 4rem);`
- `.fsm__bgnum`: `position: absolute; right: -0.05em; bottom: -0.18em; font-family: var(--font-display); font-weight: 300; font-size: clamp(14rem, 42vw, 40rem); line-height: 1; letter-spacing: -0.06em; color: var(--bg); opacity: .07; pointer-events: none;`
- `.fsm__mask { display: block; overflow: hidden; padding: 0 .08em; margin: 0 -.08em; }` (padding stops italic overhangs clipping).
- `.fsm__text`: `display: block; font-family: var(--font-display); font-weight: 300; font-size: clamp(2.5rem, min(9vw, 11.5vh), 7.5rem); line-height: .95; letter-spacing: -0.04em; will-change: transform; transition: color .3s;` — `.fsm__link:hover .fsm__text, .fsm__link:focus-visible .fsm__text { color: var(--accent); font-style: italic; }`
- `.fsm__aside { display: grid; gap: 1.75rem; }` `.fsm__label`: mono 10.5px uppercase, `letter-spacing: .14em; opacity: .55`. `.fsm__small`: `display: block; font-size: .95rem; line-height: 1.5;` hover → `var(--accent)`.
- Hero: `.fsm__title` display serif 300, `font-size: clamp(2.75rem, 7.5vw, 7.5rem); letter-spacing: -0.04em; line-height: .92;` `.fsm__copy` muted, `max-width: 52ch`. A `.fsm__filler` section of `min-height: 60vh` follows so scroll-lock is observable.

**Animation spec (exact values):**
1. Intro: `gsap.from('.fsm__hero > *', { y: 24, opacity: 0, duration: 1, ease: 'power3.out', stagger: 0.08, delay: 0.1 })`.
2. One paused master timeline, `defaults: { ease: 'power4.inOut' }`, `onReverseComplete: () => gsap.set(overlay, { visibility: 'hidden' })`:
   ```js
   tl.set(overlay, { visibility: 'visible' }, 0)
     .to(bars[0], { y: 4,  rotate: 45,  duration: 0.5 }, 0)
     .to(bars[1], { y: -4, rotate: -45, duration: 0.5 }, 0)
     .fromTo(overlay, { clipPath: 'inset(0 0 100% 0)' }, { clipPath: 'inset(0 0 0% 0)', duration: 0.9 }, 0)
     .fromTo(texts, { yPercent: 110 }, { yPercent: 0, duration: 1, ease: 'power4.out', stagger: 0.07 }, '-=0.45')
     .fromTo(asideEls, { y: 12, opacity: 0 }, { y: 0, opacity: 1, duration: 0.6, ease: 'power3.out', stagger: 0.04 }, '<0.1');
   ```
   - Burger: top bar `y 0 → 4, rotate 0 → 45°`; bottom bar `y 0 → -4, rotate 0 → -45°`; 0.5s `power4.inOut`, at 0.
   - Curtain: `.fsm__overlay` `clip-path inset(0 0 100% 0) → inset(0 0 0% 0)`, 0.9s `power4.inOut`, at 0.
   - Links: every `.fsm__text` `yPercent 110 → 0`, 1s `power4.out`, stagger 0.07, starting 0.45s before the curtain ends (t = 0.45).
   - Aside: labels + small links `y 12 → 0, opacity 0 → 1`, 0.6s `power3.out`, stagger 0.04, starting 0.1s after the first link starts.
3. `open()`: set `aria-expanded="true"`, `aria-label="Close menu"`, `overlay aria-hidden="false"`, `document.documentElement.style.overflow = 'hidden'`, `tl.play()`, focus the first link, and `gsap.fromTo(bgnum, { yPercent: 12, opacity: 0 }, { yPercent: 0, opacity: 0.07, duration: 1.1, ease: 'power3.out', delay: 0.55, overwrite: 'auto' })` (kept outside the master timeline so hover swaps never fight it).
4. `close()`: reset the attributes, clear the overflow lock, `tl.timeScale(1.5).reverse()` (the close is the exact mirror, played 1.5× faster — `open()` resets `timeScale(1)` before `play()`), focus the burger.
5. Index swap on link `mouseenter`/`focus` (`setIndex(n)`, skipped if `n === current`):
   `gsap.timeline().to(bgnum, { yPercent: -12, opacity: 0, duration: 0.18, ease: 'power2.in', overwrite: 'auto' }).add(() => bgnum.textContent = n).fromTo(bgnum, { yPercent: 12 }, { yPercent: 0, opacity: 0.07, duration: 0.45, ease: 'power3.out' })`.
6. Demo auto-open: `setTimeout(open, 700)` unless reduced motion; cleared on first manual open.

**Interaction:** Burger click toggles open/close. Escape closes. Clicking any menu link closes (demo links are `#` anchors with `preventDefault`). While open, Tab/Shift+Tab cycle only through the burger and the overlay's links (focus trap). Hovering a big link: lime + italic, and the background index swaps (0.18s out, 0.45s in).

**Responsive behavior:** Under 768px the overlay becomes one column (`grid-template-columns: 1fr; align-content: space-between; overflow-y: auto; padding-top: 5.5rem`), links use `font-size: clamp(2.5rem, 13vw, 4rem)`, the aside becomes a 2-column grid of small groups and the index number is `60vw`. The timeline is identical on touch; no `gsap.matchMedia()` branch is needed because every value is relative (`yPercent`, `clip-path` percentages).

**Accessibility:** `aria-expanded` + `aria-controls` on the burger, `aria-hidden` toggled on the `<nav>`, focus moved to the first link on open and back to the burger on close, Tab trapped while open, Escape closes, `<html>` scroll locked while open. With `prefers-reduced-motion: reduce`: no intro, no auto-open, `open()` does `tl.progress(1)` and `close()` does `tl.progress(0)` (instant), index text swaps without motion, and hover transitions are disabled.

**Performance rules:** Only `transform`, `opacity` and `clip-path` are animated (all compositor-friendly in current browsers). `will-change: transform` on the bars and link texts, `will-change: clip-path` on the overlay. One timeline is built once and reused — no tweens are created per open. Everything is created inside `gsap.context()`; the context's cleanup removes the keydown listener and the scroll lock, and `ctx.revert()` runs on unmount.

**Customization knobs:**
- Curtain duration (0.9) and ease (`power4.inOut`); try `expo.inOut`.
- Link `stagger` (0.07) and `duration` (1); `yPercent` (110).
- Curtain overlap (`'-=0.45'`) — larger = links start earlier.
- Burger travel (`±4px`) must equal half the bar gap.
- Overlay colours: `background: var(--text); color: var(--bg)` → swap for `var(--accent)` for a lime curtain.
- Index opacity (0.07).

**Acceptance criteria:**
- [ ] Closed state: only header + page visible; overlay is `visibility: hidden` and not focusable.
- [ ] Opening: bars form a cross in 0.5s, curtain fully covers the viewport at 0.9s, links start rising at 0.45s with 70ms between them, aside fades in after.
- [ ] Closing (cross, Escape or link) is the exact reverse; interrupting mid-way reverses from the current position without a jump.
- [ ] Page cannot scroll while open; focus is trapped; focus returns to the burger on close.
- [ ] Hovering links updates the background index with the flick animation.
- [ ] Reduced motion: instant open/close; no console errors; works at 375px.

Add this effect to my existing site/section: **Fullscreen Menu with Staggered Links**. Keep my header, logo and nav links; give the burger two `.fsm__bar` spans and `aria-expanded`/`aria-controls`, and move the nav into a fixed `.fsm__overlay` (`clip-path: inset(0 0 100% 0); visibility: hidden; z-index` below the header) with each link's text wrapped in an `overflow: hidden` `.fsm__mask` → `.fsm__text`. Build one paused GSAP timeline: bars `y ±4, rotate ±45°` (0.5s `power4.inOut`), overlay `clip-path → inset(0 0 0% 0)` (0.9s `power4.inOut`), link texts `yPercent 110 → 0` (1s `power4.out`, stagger 0.07, position `'-=0.45'`), secondary links `y 12 → 0, opacity 0 → 1` (0.6s `power3.out`, stagger 0.04, `'<0.1'`). Open = `tl.timeScale(1).play()`, close = `tl.timeScale(1.5).reverse()`; toggle aria attributes, lock `<html>` overflow, trap Tab, close on Escape, return focus to the burger. Respect `prefers-reduced-motion` with `tl.progress(1|0)`. Wrap in `gsap.context()` and revert on unmount. Do not change my fonts or colours outside the overlay.