Build a pure-white, minimal, futuristic fashion landing page titled **"LGPSM — Future Forward Fashion"**. Stack: React 19 + Vite + TypeScript + Tailwind CSS v4 + lucide-react. Page title: `LGPSM — Future Forward Fashion`. Description vibe: pure white minimal futuristic fashion website interface. Full-viewport single composition, black text on white, no purple, no cream, no cards-as-decoration, no glow effects.

---

## FONTS (exact Google Fonts)

Load via Google Fonts:

```
https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Michroma&family=Orbitron:wght@600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap
```

Usage:
- **Orbitron** (600/700/800/900): logo `LGPSM`, main headline `FUTURE FORWARD FASHION`, drawer titles, collection titles
- **Plus Jakarta Sans** (400/500/600/700): body UI, nav links, taglines, buttons, drawer content (default page font)
- Michroma and Chakra Petch may be loaded but are unused on the main UI

CSS utilities:
- `.font-orbitron { font-family: 'Orbitron', sans-serif; }`
- `.font-jakarta { font-family: 'Plus Jakarta Sans', sans-serif; }`

Body: `bg-white text-black antialiased`, selection: `selection:bg-black selection:text-white`.

---

## FLUID SIZE SYSTEM (exact CSS variables)

All sizes scale with viewport via `clamp()` — no hard fixed px breakpoints for type/spacing:

```css
:root {
  --pad-x: clamp(1.25rem, 4.5vw, 5rem);
  --pad-y: clamp(1rem, 3vh, 4rem);
  --header-pt: clamp(1.25rem, 2.5vh, 2.5rem);
  --gap-nav: clamp(1rem, 2.2vw, 2.25rem);
  --logo: clamp(1.35rem, 1.2vw + 0.9rem, 2.1rem);
  --logo-deg: clamp(0.65rem, 0.4vw + 0.45rem, 0.9rem);
  --nav: clamp(0.65rem, 0.35vw + 0.5rem, 0.875rem);
  --headline: clamp(2.15rem, 4.5vw + 0.75rem, 5.25rem);
  --body: clamp(0.7rem, 0.35vw + 0.55rem, 0.9rem);
  --micro: clamp(0.55rem, 0.25vw + 0.45rem, 0.7rem);
  --btn-px: clamp(1.15rem, 1.4vw, 1.75rem);
  --btn-py: clamp(0.6rem, 0.9vh, 0.85rem);
  --btn-gap: clamp(0.75rem, 1vw, 1.1rem);
  --feature-pad: clamp(1rem, 1.5vw, 1.75rem);
  --feature-min: clamp(13rem, 18vw, 20rem);
  --globe: clamp(2.25rem, 2.5vw + 1rem, 3.25rem);
  --checker-w: clamp(2.75rem, 4.5vw, 6.5rem);
  --checker-h: clamp(1.35rem, 2.2vw, 3rem);
  --corner: clamp(0.65rem, 0.4vw + 0.4rem, 0.95rem);
  --icon: clamp(1rem, 0.6vw + 0.7rem, 1.35rem);
  --drawer-pad: clamp(1.25rem, 2.5vw, 2.25rem);
  --drawer-max: clamp(18rem, 28vw, 28rem);
  --section-gap: clamp(0.75rem, 1.5vh, 1.5rem);
  --main-py: clamp(1.25rem, 4vh, 4rem);
}
```

---

## EXACT BACKGROUND IMAGE URLS

**Base image (BG_IMAGE_1)** — always visible full-bleed desktop background; also used as the mobile static image:

```
/Users/tobi/Desktop/youtube/video/prompts/tuts-1/image.jpeg
```

**Reveal image (BG_IMAGE_2)** — second image revealed only inside the mouse spotlight mask:

```
/Users/tobi/Desktop/youtube/video/prompts/tuts-1/image1.jpeg
```

Both layers: `absolute inset-0`, `background-repeat: no-repeat`.

- Base layer: `background-size: cover`, `background-position: center`.
- Reveal layer: first run the alignment gate below. Keep `cover center` when the images already match; otherwise use the required registration values.

### MANDATORY IMAGE-PAIR REGISTRATION

Run this step before implementing the reveal effect. Equal canvas dimensions do **not** mean the subjects are aligned. The base and reveal portraits must share the same facial geometry on screen; otherwise the spotlight produces doubled eyes, noses, mouths, and head outlines.

#### Alignment gate — do not adjust an already aligned pair

Start by rendering both images with the same `background-size: cover` and `background-position: center`, then compare them with a temporary 50% opacity overlay.

- Treat the pair as **already aligned** when the eye centers, nose tip, mouth center, chin, hairline, and head center overlap without a visible doubled outline; as a numeric guide, landmark displacement should stay within 1% of the shorter image dimension and relative subject-scale difference within 1%.
- If the pair is already aligned, stop the registration step. Keep both layers at `background-size: cover` and `background-position: center`. Do not add any custom scale, crop, offset, or transform.
- Only calculate and apply reveal registration when the initial overlay shows real subject-scale or landmark displacement beyond that tolerance.

For the exact supplied assets (`image.jpeg` and `image1.jpeg`, both 2912×1440), use this calibrated CSS:

```css
.base-image {
  background-image: url("/image.jpeg");
  background-position: center;
  background-size: cover;
}

.reveal-image {
  background-image: url("/image1.jpeg");
  background-position: center 16%;
  background-size: auto 117.5%;
  background-repeat: no-repeat;
}
```

These values enlarge the smaller reveal portrait and align its eye line, nose, mouth, chin, hairline, and head center with the base portrait.

If either source image changes and the alignment gate detects a mismatch, recalculate the reveal registration instead of reusing the values blindly:

1. Compare at least five corresponding landmarks: both eye centers, nose tip, mouth center, chin, and top of head.
2. Estimate one uniform reveal scale from the median ratio of landmark distances in the base image versus the reveal image.
3. Keep both image centers aligned horizontally unless the landmark centers prove otherwise.
4. Adjust the reveal background's vertical position until the eye line, nose, mouth, and chin overlap the base image.
5. Validate with a temporary 50% opacity overlay or a split/reveal preview at desktop `background-size: cover` proportions. Do not ship while any landmark appears doubled.

Apply registration only through the reveal layer's `background-size` and `background-position`. Do **not** scale or translate the reveal DOM element itself, because that also transforms the canvas mask and moves the spotlight away from the cursor.

Never “improve” or fine-tune an image pair that already passes the alignment gate. Unnecessary registration can create the mismatch it is intended to prevent.

---

## DESKTOP INTERACTIVE IMAGE REVEAL EFFECT (exact behavior)

Component: `ImageRevealBackground`. Desktop only: `hidden lg:block fixed inset-0 pointer-events-none z-0 overflow-hidden`.

### Layers (bottom → top)
1. Base layer: BG_IMAGE_1 full bleed
2. Reveal layer: BG_IMAGE_2 full bleed, clipped by a CSS/WebKit mask generated from an offscreen canvas
3. Subtle SVG grid overlay at `opacity: 0.10`, stroke `#64748b`, strokeWidth `0.6`

### Spotlight / mask algorithm (exact)
- Track raw mouse (`mousemove` on `window`) into `mouseRef`
- Every animation frame, ease `smoothRef` toward mouse with factor **0.1**:
  - `smooth.x += (mouse.x - smooth.x) * 0.1`
  - `smooth.y += (mouse.y - smooth.y) * 0.1`
- Spotlight radius (fluid): `Math.round(Math.min(420, Math.max(160, window.innerWidth * 0.16)))`
- Draw soft radial gradient circle on offscreen canvas at smoothed cursor:
  - `createRadialGradient(cx, cy, 0, cx, cy, radius)`
  - stops exactly:
    - 0 → `rgba(255,255,255,1)`
    - 0.4 → `rgba(255,255,255,1)`
    - 0.6 → `rgba(255,255,255,0.75)`
    - 0.75 → `rgba(255,255,255,0.4)`
    - 0.88 → `rgba(255,255,255,0.12)`
    - 1 → `rgba(255,255,255,0)`
- Export canvas each frame as `toDataURL()` and apply to BG_IMAGE_2 as:
  - `mask-image: url(dataUrl)` / `-webkit-mask-image: url(dataUrl)`
  - `mask-size: 100% 100%`
- Result: moving the cursor smoothly reveals BG_IMAGE_2 inside a soft circular spotlight while BG_IMAGE_1 remains everywhere else

### Parallax grid
- Grid cell size (fluid): `Math.round(Math.min(64, Math.max(36, window.innerWidth * 0.028)))`, update on resize
- SVG `<pattern>` with path `M {cell} 0 L 0 0 0 {cell}`
- Offset grid with eased parallax: normalize smoothed cursor to container (`cx`, `cy` from −0.5 to 0.5), ease offset toward `cx*16` / `cy*16` with factor **0.06**
- Pattern `x`/`y` = that eased offset

On viewports below `lg`, hide this interactive background and instead show a static bordered image of BG_IMAGE_1 in a section below the hero (`aspect-[4/5]` mobile, `sm:aspect-[16/9]`, border `border-gray-200`).

---

## PAGE STRUCTURE & EXACT COPY

Root: `min-h-screen bg-white text-black font-jakarta flex flex-col justify-between relative overflow-hidden`.

### 1. Header (z-20)
Padding: `paddingInline: var(--pad-x)`, `paddingTop: var(--header-pt)`, `paddingBottom: var(--section-gap)`. Flex space-between.

**Logo (left):** Orbitron black/900, letter-spacing `0.15em`, size `var(--logo)`. Text: `LGPSM` + small degree symbol `˚` (size `var(--logo-deg)`, slightly raised `-mt-0.5 ml-0.5`). Clicking closes any open drawer. Hover opacity 80%.

**Nav (right):** Plus Jakarta Sans, medium, uppercase, tracking `0.2em`, size `var(--nav)`, gap `var(--gap-nav)`.
Links (buttons): `SHOP` | `COLLECTIONS` | `JOURNAL` then gray `|` divider then lucide `ShoppingBag` icon (stroke 1.5, size `var(--icon)`).
Hover: opacity 50%. Cart shows black circular badge with item count when cart has items.

### 2. Main hero (flex-1)
Padding: `paddingInline: var(--pad-x)`, `paddingBlock: var(--main-py)`. Layout: column on mobile, `lg:flex-row` space-between.

**Left block** (vertically centered):
1. Small top-left L-corner bracket SVG (stroke 1.5, size `var(--corner)`)
2. Headline — Orbitron extrabold, uppercase, tracking `0.08em`, leading `1.05`, size `var(--headline)`, three lines:
   - `FUTURE`
   - `FORWARD`
   - `FASHION` + inline **checkerboard grid SVG** (viewBox `0 0 36 18`, 4 rows of 3.8×3.8 black squares; even rows shifted by 2.25; size `var(--checker-w)` × `var(--checker-h)`, slightly translated down 2px)
3. Bottom-left L-corner bracket
4. CTA button: border `border-gray-400`, rounded-md, uppercase `SHOP NOW` + lucide `ArrowUpRight`. Tracking `0.18em`, size `var(--body)`, padding `var(--btn-px)` / `var(--btn-py)`. Hover: fill black, text white, border black; icon nudges up-right.

**Right lower feature block** (`self-end`, bottom-aligned on desktop):
Framed box with four corner bracket SVGs (TL/TR/BL/BR) at absolute corners — no filled card background. Inside:
- Wireframe globe SVG (viewBox `0 0 64 64`, stroke 1.2: outer circle r=28, equator line, 2 horizontal ellipses, meridian line, 2 vertical ellipses), size `var(--globe)`
- Tagline in Plus Jakarta Sans semibold uppercase tracking `0.18em`, size `var(--body)`:
  - `BEYOND TRENDS.`
  - `BUILT FOR TOMORROW.`
min-width `var(--feature-min)`, padding `var(--feature-pad)`.

### 3. Side drawers (exact)
Clicking SHOP / COLLECTIONS / JOURNAL / cart opens a right-side white drawer over dimmed backdrop (`bg-black/20 backdrop-blur-xs`). Max width `var(--drawer-max)`, padding `var(--drawer-pad)`, border-left gray. Header: Orbitron bold uppercase title + lucide `X` close. Click backdrop to close.

**SHOP → title `Catalog`**
Subtitle: `Featured Garments`
Items (exact):
1. CYBER-TEX OVERCOAT — $850 — tag LIMITED EDITION
2. GEO-MESH TECH HOODIE — $320 — tag NEW DROP
3. ORBITAL TAPERED TROUSERS — $290 — tag IN STOCK
4. MODULAR ALL-WEATHER VEST — $410 — tag PRE-ORDER  
Each row: tag (micro gray), title, price, `ADD` button. ADD adds to cart and shows toast: `Added "{title}" to your shopping bag.` (3s, black toast top-right with lucide Check emerald).

**COLLECTIONS → title `Archive 2026`**
Subtitle: `Season Lineup`
1. SERIES 01 — SYNTHETIC HORIZONS — Ultra-durable weather-sealed fabrics with minimalist silhouette architecture.
2. SERIES 02 — KINETIC FORM — Ergonomic streetwear designed for maximum mobility and temperature equilibrium.
3. SERIES 03 — MONOCHROME ZERO — Pure black and white structural tailoring crafted from 100% recycled polymers.

**JOURNAL → title `Editorial`**
Subtitle: `Latest Dispatches`
1. AUG 2026 — THE ARCHITECTURE OF NEXT-GEN TEXTILES — 4 MIN READ
2. JUL 2026 — CIRCULAR DESIGN IN HIGH-END APPAREL — 6 MIN READ
3. JUN 2026 — MINIMALISM AS A FUNCTIONAL STATEMENT — 3 MIN READ

**CART → title `Shopping Bag`**
Empty: ShoppingBag icon + `Your shopping bag is empty.`
With items: list title/price + Remove. Footer: full-width black `CHECKOUT NOW` + ChevronRight → toast `Order submitted successfully!`, clear cart, close drawer.
Non-cart footer: `LGPSM © 2026 — FUTURE FORWARD FASHION` (micro, gray, centered uppercase).

---

## ICONS

lucide-react only: `ShoppingBag`, `ArrowUpRight`, `X`, `ChevronRight`, `Check`. Custom SVGs for: checkerboard, wireframe globe, four L-shaped corner brackets (paths: TL `M0 11.5V0.5H11.5`, TR `M0.5 0.5H11.5V11.5`, BL `M0 0.5V11.5H11.5`, BR `M0.5 11.5H11.5V0.5`, viewBox `0 0 12 12`).

---

## VISUAL RULES

- White page, black ink, gray accents only (`gray-200` / `gray-300` / `gray-400` / `gray-500` / `gray-600` / slate grid `#64748b`)
- No purple, no cream, no glow, no floating badges over hero media, no inset hero cards
- Brand `LGPSM` and headline `FUTURE FORWARD FASHION` dominate first viewport
- First viewport content only: logo/nav, headline + checker, SHOP NOW, globe tagline, and full-bleed dual-image reveal background
- UI text sits above background at z-10/z-20; background is z-0 and non-interactive (`pointer-events-none`)

Recreate this page pixel-faithfully with the exact URLs, exact reveal math (ease 0.1, radius `clamp(160, 16vw, 420)`, gradient stops listed), exact copy, fonts, fluid clamps, and drawer contents above.

---