arctic lab

Build a single-page "IGLOO" concept site using Vite + React 18 + TypeScript + Tailwind CSS 3 + framer-motion + lucide-react. Recreate it EXACTLY as specified below.

## 1. FONTS (load in index.html <head>, in this exact order)

```html
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet" />
<link href="https://db.onlinewebfonts.com/c/6464eb173643efcc64e904b96201d0cc?family=Dimensions+W03+300R" rel="stylesheet" />
```

Font usage rules:
- Display headlines ("IGLOO" hero text and "WITH A VIEW"): `font-family: 'Dimensions W03 300R', 'Anton', sans-serif` — Dimensions W03 300R is the primary display face (a tall condensed stencil-style font loaded from onlinewebfonts.com); **Anton (Google Fonts) is the explicit fallback for headlines only**, so if the onlinewebfonts stylesheet fails or is blocked in any browser, headlines render in Anton, never in a default sans.
- Body/UI text: `font-family: 'Inter', sans-serif` (weights 300/400/500/600), set globally on `body`.
- Hero description paragraph: `font-family: 'Courier New', monospace`.
- Page `<title>`: IGLOO.

Global CSS (index.css); body has Inter, `-webkit-font-smoothing: antialiased`, `-moz-osx-font-smoothing: grayscale`, `overflow-x: hidden`.

## 2. ASSETS (exact URLs)

Page background (shared, spans both sections):
`https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260723_224514_a4f5778c-5a68-4e60-b9f8-74aeec2ef48b.png&w=1920&q=85`

Overlay image (iceberg cutout, sits in front of background but behind ALL UI, spans both sections, pointer-events-none):
`https://soft-zoom-63098134.figma.site/_assets/v11/7e3b4feb333e9a78d12d5afc7d48730615390ec2.png`

Left-side thumbnails (top to bottom, 4 images):
1. `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260718_094505_c14a7566-ec38-46cf-b298-b641815acbdc.png&w=1280&q=85`
2. `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260718_094527_33af18d8-e52c-49a6-8b9b-4706b0c0a85a.png&w=1280&q=85`
3. `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260718_094546_3f85bc04-8e66-4d82-aa27-fcf40742a384.png&w=1280&q=85`
4. `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260718_094606_79a7fc4d-cf64-48bc-a2d3-52dd5ad6ffe3.png&w=1280&q=85`

"With A View" cards (3 cards, in order, with titles):
1. "Cliffside Retreat" — `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260718_101354_a5a857b7-b9ce-4e3f-9cc1-27424c9e4c8d.png&w=1280&q=85`
2. "Island Escape" — `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260718_101420_1c0cbb04-a7b5-41f1-9d21-fcf3976f6be6.png&w=1280&q=85`
3. "Coastal Haven" — `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260718_101434_83163d4d-1639-4812-8753-e679652939ff.png&w=1280&q=85`

## 3. PAGE STRUCTURE

Root `<div style="background-color:#D6D7DD">` containing:
(a) a MobileMenu overlay component, and (b) a `relative overflow-hidden` wrapper that spans BOTH full-screen sections and holds two absolutely-positioned full-bleed images:
- Background `<img>`: `absolute inset-0 w-full h-full object-cover`, dynamic `objectPosition: center {focalY}%` and `transform: scale({scrollScale})` with `transformOrigin: top center` (see animation #2).
- Overlay `<img>`: identical positioning/animation, plus `z-[10] pointer-events-none`.

### SECTION 1 — Hero (`relative w-full h-screen overflow-hidden`)

1. **Giant "IGLOO" headline**: absolutely centered container `inset-0 flex items-start justify-center pt-[13vh] pointer-events-none z-[2]`. Text rendered with a per-letter animation component (see animation #1). Classes: `text-[36vw] md:text-[35vw] leading-[0.85] text-white/80 tracking-[0.01em] select-none`, font: Dimensions W03 300R → Anton fallback. It sits BEHIND the iceberg overlay (z-2 < z-10) so the iceberg visually cuts through the wordmark.

2. **Fixed navbar** (`fixed top-0 z-[40] flex items-center justify-between px-5 md:px-8 py-4 md:py-5`):
   - Left (desktop only, `hidden md:flex gap-10`): links PORTFOLIO, ABOUT, LAB — `text-xs font-semibold tracking-widest uppercase text-neutral-700 hover:text-neutral-900 transition-colors`, href="#".
   - Left (mobile only): hamburger Menu icon (lucide, size 22, strokeWidth 1.5) that opens the mobile menu.
   - Center: wordmark "IGLOO" — `text-sm tracking-[0.35em] text-neutral-600 uppercase`, font Inter.
   - Right (`flex gap-4 md:gap-5`): Instagram icon (desktop only) and Search icon, lucide size 18, strokeWidth 1.5, `text-neutral-700 hover:text-neutral-900`.

3. **Left thumbnail rail** (desktop only): `absolute left-4 md:left-6 top-1/2 -translate-y-1/2 z-[30] flex-col gap-3`; each thumb `w-12 md:w-16 h-12 md:h-16 rounded-lg overflow-hidden cursor-pointer hover:scale-105 transition-transform shadow-md` with object-cover image.

4. **Right scroll line** (desktop only): `absolute right-8 top-1/2 z-[30]`, a `w-px h-32 bg-neutral-500/60` vertical rule, vertically centered via translateY(-50%).

5. **Bottom caption**: `absolute bottom-8 md:bottom-12 left-1/2 -translate-x-1/2 z-[30] flex flex-col items-center gap-3 text-center px-6`:
   - Paragraph in 'Courier New', monospace: `text-[10px] md:text-xs tracking-widest text-white max-w-xs md:max-w-sm leading-relaxed`, text: "A conceptual vision of an igloo, afloat in the Arctic. Where minimalism, nature, and imagination converge."
   - Below it a lucide ChevronDown (size 16, white) with Tailwind `animate-bounce`.

### SECTION 2 — "With A View" (`relative z-[20] w-full h-screen overflow-hidden -mt-[20px]`)

Inner column `relative z-10 h-screen flex flex-col justify-between p-6 md:p-10 lg:p-16`:

1. Top block (`flex flex-col gap-4 pt-16`):
   - Heading row (`flex items-start`): per-letter animated text "With A View" rendered uppercase — `text-[18vw] md:text-[16vw] leading-[0.85] text-white tracking-[0.01em] uppercase`, font Dimensions W03 300R → Anton fallback, left-aligned; to its right (desktop only) a horizontal rule `flex-1 mt-[0.42em] ml-4` containing `w-full h-px bg-white/70`.
   - Subtext row (`flex md:justify-end`): paragraph `text-white text-sm md:text-base max-w-xs leading-relaxed md:text-right`: "Elevated sanctuaries perched above the clouds, where architecture meets the infinite horizon."

2. Bottom card grid: `grid grid-cols-2 md:grid-cols-3 gap-3 md:gap-4 pb-4 max-w-4xl mx-auto mt-8 md:mt-0`. Each card: `group relative rounded-xl overflow-hidden aspect-[3/4] cursor-pointer max-h-[28vh]`; the 3rd card additionally `col-span-2 md:col-span-1 max-w-[50%] md:max-w-full mx-auto md:mx-0` (so on mobile it spans both columns but is half-width and centered). Image: `w-full h-full object-cover transition-transform duration-500 group-hover:scale-110`. Title overlaid `absolute bottom-3 left-3 right-3` as `text-white text-xs md:text-sm font-medium tracking-wide`.

### Mobile menu (z-[100] fixed overlay)
- Backdrop: `bg-black/60 backdrop-blur-sm`, fades opacity over 500ms, click closes.
- Panel: right-anchored drawer `w-[75vw] max-w-xs h-full bg-white/95 backdrop-blur-xl shadow-2xl`, slides in from `translate-x-full` over 500ms with easing `cubic-bezier(0.16,1,0.3,1)`. Contains an X close button (top-right, lucide size 24), the three nav links stacked (`text-lg font-semibold tracking-widest uppercase`, each fading/sliding in from `translate-x-8` with delays 150ms/230ms/310ms when open), and bottom-left Instagram + Search icons (size 20) fading up with 400ms delay. Opening sets `document.body.style.overflow = 'hidden'`; closing restores it.

## 4. ANIMATIONS (implement exactly)

1. **LettersPullUp** (framer-motion, used for both big headlines): split text into characters; each char is a `motion.span` with variants `initial: { y: 20, opacity: 0 }` → `animate: { y: 0, opacity: 1, transition: { delay: i * 0.05 } }` (i = char index), triggered once when the element scrolls into view (`useInView(ref, { once: true })`). Spaces render as `&nbsp;`. Wrapper is `flex flex-wrap` with justify-center by default, justify-start for the "With A View" heading.

2. **Scroll-driven background zoom/pan** (custom hook, applied to BOTH the background and overlay images): on scroll (rAF-throttled, passive listener), compute `progress = min(scrollY / window.innerHeight, 1)`; set `scale = 1 + progress * 0.12` (i.e. 1 → 1.12) and `focalY = progress * 100` (objectPosition drifts from `center 0%` to `center 100%`). Transform origin `top center`.

3. **Staggered reveal on scroll** (custom hook, IntersectionObserver, fires once): container observed at threshold 0.1 (hero) / 0.15 (view section); when intersecting, each indexed child transitions from `opacity: 0; translateY(24px)` to visible over `0.7s cubic-bezier(0.16,1,0.3,1)` with per-index delay — hero uses 150ms steps (headline=index 0, nav=2, thumbnails=3–6, right line=7, bottom caption=8), view section uses 200ms steps (heading=0, subtext=1, cards=2–4). For elements that also carry a centering transform (right line, bottom caption), compose it: e.g. hidden state `translateX(-50%) translateY(24px)` → visible `translateX(-50%)`.

4. **Micro-interactions**: thumbnail `hover:scale-105`; card image `group-hover:scale-110` (500ms); chevron `animate-bounce`; all link color transitions via `transition-colors`.

## 5. DEPENDENCIES

package.json deps: react ^18.3.1, react-dom ^18.3.1, framer-motion ^12, lucide-react ^0.344.0, @vitejs/plugin-react, tailwindcss ^3.4, typescript ^5.5, vite ^5.4. Tailwind config: default, content `./index.html` + `./src/**/*.{js,ts,jsx,tsx}`. Vite config: react plugin, `optimizeDeps.exclude: ['lucide-react']`.