# Full-Screen Overlay Menu with Clip-Path Wipe & Lerped Highlighter

## Goal
Build a fixed top navbar whose **Menu** toggle opens a full-screen dark overlay that **wipes open from the bottom edge upward via an animated `clip-path` polygon**. As it opens, two columns of meta text fade/slide in, a small centered image scales up, and a row of five oversized (Anton, 10rem) menu links **stagger up into view from a mask**. On desktop, each link does a **per-character vertical swap on hover** (SplitText), a lime **highlighter bar slides + resizes to track the hovered link** using a lerp loop, and the **entire link strip pans horizontally with the mouse X position** (also lerped). It is a click-to-open/close menu, not scroll-driven.

## Tech
Vanilla HTML/CSS/JS with ES module imports. Use `gsap` (npm), the GSAP plugins **`ScrollTrigger`** and **`SplitText`**, and **`lenis`** for smooth scroll. Import as:
```js
import { gsap } from "gsap";
import { ScrollTrigger, SplitText } from "gsap/all";
import Lenis from "lenis";
```
Register `gsap.registerPlugin(ScrollTrigger, SplitText)` inside `DOMContentLoaded`. (ScrollTrigger is only wired to Lenis for smooth scroll updates; there are no scroll-triggered animations in this component — everything is click/hover/mousemove driven.)

## Layout / HTML
```
nav                       (fixed top bar)
  .nav-toggle > p "Menu"        (left — click target that opens/closes)
  .nav-item   > p "Archive"     (right — decorative)

.menu-overlay             (fixed full-viewport dark panel, clipped closed)
  .menu-content                 (two meta-text columns, absolutely centered-ish)
    .menu-col   → stacked <p> lines separated by <br> (studio name, address, city, edition, contact email, phone)
    .menu-col   → stacked <p> lines separated by <br> (social links, language, credits/ref) — right-aligned
  .menu-img                     (single small centered image)
    img
  .menu-links-wrapper           (bottom-left horizontal row)
    .menu-link × 5              (each links to "#")
      a
        span  (visible copy)    ← duplicate text
        span  (hover copy)      ← same text, stacked absolutely on top
    .link-highlighter           (the lime tracking bar)

.container
  section.hero > h1 "Shaping Ideas"   (full-viewport light hero behind the overlay)
```
The five link labels are: **Index, Persona, Biography, Work, Journal**. Each `.menu-link a` contains the **same word twice** in two `<span>`s (span 1 = visible copy, span 2 = hover copy stacked directly on top).

Use a neutral fictional studio identity for the meta text (e.g. "Jam Area", a street/city, an edition/volume number, a contact email, a phone number, social platforms, a language, credits/imprint, a reference code). No real brands.

## Styling
Fonts (Google Fonts): **Anton** (display) and **DM Sans** (UI/body, variable, italic + optical size + weight axes).

Color tokens:
- `--dark: #1e1e1e`
- `--light: #fefff8`
- `--accent: #9dfc11` (lime green)
- `body { background: #000; }`

Type:
- `h1`: Anton, uppercase, `font-size: 10rem`, weight 500, `letter-spacing: -0.1rem`, `line-height: 0.9`. `.hero h1` width 70%.
- `p, a`: uppercase, `font-size: 0.8rem`, weight 600, `line-height: 1`, no underline, `user-select: none`.
- `.menu-link a`: **Anton, `font-size: 10rem`, weight 500, `letter-spacing: -0.2rem`, `display: inline-block`, `overflow: hidden`**, color `--light`.
- `img { width:100%; height:100%; object-fit: cover; }`

Key positioning / structural CSS (these are load-bearing for the effect):
- `nav`: `position: fixed; top:0; left:0; width:100vw; padding:1rem;` flex `space-between`, color `--light`, **`mix-blend-mode: difference`**, `z-index:2`. `nav p { padding:1rem; cursor:pointer; }`
- `.menu-overlay`: `position: fixed; inset:0 auto auto 0; width:100vw; height:100svh; overflow:hidden;` background `--dark`, color `--light`, `z-index:1`, `will-change: clip-path`. **Initial closed state: `clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)`** (a degenerate rectangle collapsed onto the bottom edge — overlay invisible).
- `.menu-content`: `position:absolute; top:45%; transform:translateY(-50%); width:100%; padding:2rem;` flex `space-between` / `align-items:center`. `.menu-col:nth-child(2){ text-align:right; }`
- `.menu-img`: `position:absolute; top:45%; left:50%; transform:translate(-50%,-50%); width:150px;`
- `.menu-links-wrapper`: `position:absolute; left:0; bottom:0; width:max-content; padding:2rem;` flex, `gap:2rem`, `will-change: transform`.
- `.menu-link`: `position:relative; overflow:hidden;` `will-change:transform`. (Overflow toggles to `visible` once open so the highlighter/hover chars aren't clipped — see GSAP section.)
- `.menu-link a span:nth-child(2)`: `position:absolute; top:0; left:0;` (hover copy stacked on the visible copy).
- `.link-highlighter`: `position:absolute; bottom:0; left:0; width:400px; height:0.75rem;` background `--accent`, `will-change: transform, width`. (JS overwrites width to the first link's measured width.)
- `.char` (created by SplitText): `position:relative; display:inline-block; will-change:transform;`
- `section`: `width:100vw; height:100svh;` flex-centered, background `--light`, color `--dark`, `padding:2rem`.
- `.container`: `position:relative; z-index:0; will-change:transform, opacity;`

## GSAP effect (exhaustive)

### 0. Smooth scroll bootstrap
`const lenis = new Lenis();` → `lenis.on("scroll", ScrollTrigger.update)`; drive it from the GSAP ticker: `gsap.ticker.add((time)=> lenis.raf(time*1000))`; `gsap.ticker.lagSmoothing(0)`.

### 1. SplitText per link + initial states
For each `.menu-link a`, grab its two `<span>`s. For **each** span run `new SplitText(span, { type: "chars" })` and add class `.char` to every resulting char. For the **second** span only (index 1, the hover copy), `gsap.set(split.chars, { y: "110%" })` so its characters sit one line-height below (hidden by the `a`'s `overflow:hidden`).

Then set the closed/pre-open states:
- `gsap.set(menuContent, { y: "50%", opacity: 0.25 })`
- `gsap.set(menuImage, { scale: 0.5, opacity: 0.25 })`
- `gsap.set(menuLinks, { y: "150%" })`  ← `menuLinks` = all `.menu-link a`
- `gsap.set(linkHighlighter, { y: "150%" })`

### 2. Measure highlighter to first link
Read the first link's first span `offsetWidth` → set `linkHighlighter.style.width` to that px and seed `currentHighlighterWidth = targetHighlighterWidth = linkWidth`. Compute `initialX = firstLink.getBoundingClientRect().left - menuLinksWrapper.getBoundingClientRect().left` → seed `currentHighlighterX = targetHighlighterX = initialX`.

### 3. Open sequence (click `.nav-toggle`, `isMenuOpen === false`)
Guard with `isMenuAnimating` (bail if already animating; set true at start). These are **independent `gsap.to` tweens fired simultaneously**, each with its own delay — not a single timeline. **All eases are `expo.out`.**
- `container` → `{ y: "-40%", opacity: 0.25, duration: 1.25 }` (pushes the hero back).
- `menuOverlay` → `{ clipPath: "polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%)", duration: 1.25 }` — this grows the top two corners up to `0%`, wiping the panel open **from the bottom edge upward to full-screen**. `onComplete`: `gsap.set(container, { y: "40%" })`, `gsap.set(".menu-link", { overflow: "visible" })`, then `isMenuOpen = true; isMenuAnimating = false`.
- `menuContent` → `{ y: "0%", opacity: 1, duration: 1.5 }`.
- `menuImage` → `{ scale: 1, opacity: 1, duration: 1.5 }`.
- `menuLinks` → `{ y: "0%", duration: 1.25, stagger: 0.1, delay: 0.25 }` — the five oversized links rise up out of the mask left-to-right.
- `linkHighlighter` → `{ y: "0%", duration: 1, delay: 1 }` — the lime bar drops in last.

### 4. Close sequence (click `.nav-toggle`, `isMenuOpen === true`)
Again independent simultaneous tweens, all `expo.out`, `duration: 1.25` unless noted:
- `container` → `{ y: "0%", opacity: 1 }` (hero returns).
- `menuLinks` → `{ y: "-200%" }` (links shoot up out of frame).
- `menuContent` → `{ y: "-100%", opacity: 0.25 }`.
- `menuImage` → `{ y: "-100%", opacity: 0.5 }`.
- `menuOverlay` → `{ clipPath: "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)" }` — collapses the panel **upward into the top edge**. `onComplete` resets everything to the closed state: overlay clip-path back to the bottom-collapsed polygon `polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)`, `menuLinks y:"150%"`, `linkHighlighter y:"150%"`, `menuContent {y:"50%", opacity:0.25}`, `menuImage {y:"0%", scale:0.5, opacity:0.25}`, `.menu-link { overflow: "hidden" }`, `menuLinksWrapper { x: 0 }` and reset `currentX = targetX = 0`; then `isMenuOpen = false; isMenuAnimating = false`.

### 5. Per-character hover swap (desktop only, `window.innerWidth >= 1000`)
On each `.menu-link` `mouseenter`: get the two spans' `.char` sets.
- visible copy chars → `gsap.to({ y: "-110%", stagger: 0.03, duration: 0.5, ease: "expo.inOut" })`
- hover copy chars → `gsap.to({ y: "0%", stagger: 0.03, duration: 0.5, ease: "expo.inOut" })`

On `mouseleave`:
- hover copy chars → `{ y: "110%", stagger: 0.03, duration: 0.5, ease: "expo.inOut" }`
- visible copy chars → `{ y: "0%", stagger: 0.03, duration: 0.5, ease: "expo.inOut" }`

Net effect: the word rolls upward, the visible copy exiting through the top while the duplicate copy rides in from below, character by character.

### 6. Mouse-driven horizontal pan of the link strip (desktop only)
Listen for `mousemove` on `.menu-overlay`. Compute:
- `maxMoveLeft = 0`, `maxMoveRight = viewportWidth - menuLinksWrapperWidth` (negative-space room to slide the strip fully right).
- `sensitivityRange = viewportWidth * 0.5`; `startX = (viewportWidth - sensitivityRange)/2`; `endX = startX + sensitivityRange`.
- `mousePercentage`: `0` if `mouseX <= startX`, `1` if `mouseX >= endX`, else `(mouseX - startX) / sensitivityRange`.
- `targetX = maxMoveLeft + mousePercentage * (maxMoveRight - maxMoveLeft)`.

So only the **central 50% of the screen width** is active: sweeping the cursor across it pans the whole `.menu-links-wrapper` from its left-docked position to fully right-docked.

### 7. Highlighter target on hover (desktop only)
On each `.menu-link` `mouseenter`: `targetHighlighterX = linkRect.left - menuWrapperRect.left` and `targetHighlighterWidth = (that link's first span).offsetWidth`. On `.menu-links-wrapper` `mouseleave`: reset both targets back to the **first** link's position/width.

### 8. Lerp rAF loop (`animate()`)
A `requestAnimationFrame` loop with **`lerpFactor = 0.05`** interpolates each `current` toward its `target`:
```
currentX               += (targetX               - currentX)               * 0.05
currentHighlighterX    += (targetHighlighterX    - currentHighlighterX)    * 0.05
currentHighlighterWidth+= (targetHighlighterWidth- currentHighlighterWidth)* 0.05
```
Then each frame apply:
- `gsap.to(menuLinksWrapper, { x: currentX, duration: 0.3, ease: "power4.out" })`
- `gsap.to(linkHighlighter, { x: currentHighlighterX, width: currentHighlighterWidth, duration: 0.3, ease: "power4.out" })`

This double-smooths (lerp + short `power4.out` tween) so the strip pan and the bar's slide/resize feel fluid and trailing.

## Assets / images
**1 image**, role = *small centered menu image*. A single portrait-oriented black-and-white editorial photograph displayed at ~150px wide (`object-fit: cover`), sitting dead-center of the open overlay between the two text columns. The real asset is a tightly-cropped monochrome studio headshot of a young person facing the camera, short hair, dark top, shot against a plain light-grey seamless backdrop — dominant tones are soft greys and near-blacks with bright highlights, no color. The high-contrast grayscale reads cleanly against the dark panel. Provide one image; aspect ratio ~3:4 portrait.

## Behavior notes
- **Desktop-only interactions:** the hover char-swap, mouse pan, and highlighter tracking all early-return when `window.innerWidth < 1000`.
- **Responsive (`max-width: 1000px`):** hero `h1` becomes `width:100%; font-size:4rem`; `.menu-content` `top:25%`; `.menu-img` and `.link-highlighter` are `display:none`; `.menu-links-wrapper` switches to `flex-direction: column; gap: 0`; `.menu-link a` shrinks to `font-size:4rem; letter-spacing:-0.05rem` (links stack vertically).
- **Re-entrancy guard:** `isMenuAnimating` blocks toggling mid-animation; `isMenuOpen` tracks state. The open tween's `onComplete` flips `container` to `y:"40%"` (so the hero peeks from below while open) and unhides link overflow.
- The `animate()` rAF loop runs continuously for the lifetime of the page.