合成模式

构建一个纯白、极简、未来主义的时尚落地页，标题为 **"LGPSM — Future Forward Fashion"**。技术栈：React 19 + Vite + TypeScript + Tailwind CSS v4 + lucide-react。页面标题：`LGPSM — Future Forward Fashion`。描述氛围：纯白极简的未来主义时尚网站界面。全视口单一构图，白底黑字，无紫色、无米白色、不使用卡片作为装饰、无发光效果。

---

## 字体（指定的 Google Fonts）

通过 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
```

用途：
- **Orbitron** (600/700/800/900)：logo `LGPSM`、主标题 `FUTURE FORWARD FASHION`、抽屉标题、系列标题
- **Plus Jakarta Sans** (400/500/600/700)：正文 UI、导航链接、标语、按钮、抽屉内容（页面默认字体）
- Michroma 和 Chakra Petch 可以加载，但不在主 UI 中使用

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

Body：`bg-white text-black antialiased`，选中文本：`selection:bg-black selection:text-white`。

---

## 流式尺寸系统（指定的 CSS 变量）

所有尺寸均通过 `clamp()` 随视口缩放——字体和间距不使用固定 px 断点：

```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);
}
```

---

## 指定的背景图片 URL

**基础图片 (BG_IMAGE_1)**——始终作为全出血桌面背景显示；也用作移动端静态图片：

```
https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260802_074534_f0d9d476-3f86-4c67-9b12-dfc63d99da41.png&w=1920&q=85
```

**显露图片 (BG_IMAGE_2)**——仅在鼠标聚光灯遮罩内显露的第二张图片：

```
https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260802_075145_1b557479-775b-43af-8270-f45d79d97d5a.png&w=1920&q=85
```

两个图层：`absolute inset-0`、`background-size: cover`、`background-position: center`、`background-repeat: no-repeat`。

---

## 桌面端交互式图片显露效果（指定行为）

组件：`ImageRevealBackground`。仅桌面端：`hidden lg:block fixed inset-0 pointer-events-none z-0 overflow-hidden`。

### 图层（底部 → 顶部）
1. 基础层：BG_IMAGE_1 全出血
2. 显露层：BG_IMAGE_2 全出血，由离屏 canvas 生成的 CSS/WebKit 遮罩裁剪
3. 精细 SVG 网格覆盖层，`opacity: 0.10`、stroke `#64748b`、strokeWidth `0.6`

### 聚光灯 / 遮罩算法（指定实现）
- 通过 `window` 上的 `mousemove` 将原始鼠标位置追踪至 `mouseRef`
- 每一动画帧都以系数 **0.1** 缓动 `smoothRef`，使其趋近鼠标位置：
  - `smooth.x += (mouse.x - smooth.x) * 0.1`
  - `smooth.y += (mouse.y - smooth.y) * 0.1`
- 聚光灯半径（流式）：`Math.round(Math.min(420, Math.max(160, window.innerWidth * 0.16)))`
- 在离屏 canvas 上，以平滑后的光标位置为中心绘制柔和的径向渐变圆：
  - `createRadialGradient(cx, cy, 0, cx, cy, radius)`
  - 精确色标：
    - 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)`
- 每帧使用 `toDataURL()` 导出 canvas，并按以下方式应用到 BG_IMAGE_2：
  - `mask-image: url(dataUrl)` / `-webkit-mask-image: url(dataUrl)`
  - `mask-size: 100% 100%`
- 效果：移动光标时，会在柔和的圆形聚光灯内平滑显露 BG_IMAGE_2，其他所有区域仍显示 BG_IMAGE_1

### 视差网格
- 网格单元尺寸（流式）：`Math.round(Math.min(64, Math.max(36, window.innerWidth * 0.028)))`，在 resize 时更新
- SVG `<pattern>` 使用 path `M {cell} 0 L 0 0 0 {cell}`
- 使用缓动视差偏移网格：将平滑后的光标相对容器进行归一化（`cx`、`cy` 从 −0.5 到 0.5），以系数 **0.06** 将偏移缓动至 `cx*16` / `cy*16`
- Pattern `x`/`y` = 该缓动偏移值

在低于 `lg` 的视口中隐藏此交互式背景，改为在 hero 下方的 section 中显示 BG_IMAGE_1 静态带边框图片（移动端 `aspect-[4/5]`、`sm:aspect-[16/9]`，边框 `border-gray-200`）。

---

## 页面结构与指定文案

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 两端对齐。

**Logo（左侧）：** Orbitron 黑色/900，letter-spacing `0.15em`，尺寸 `var(--logo)`。文本：`LGPSM` + 小号角度符号 `˚`（尺寸 `var(--logo-deg)`，略微上移 `-mt-0.5 ml-0.5`）。点击时关闭任何已打开的抽屉。Hover 时不透明度 80%。

**Nav（右侧）：** Plus Jakarta Sans，中等字重，大写，tracking `0.2em`，尺寸 `var(--nav)`，间距 `var(--gap-nav)`。
链接（按钮）：`SHOP` | `COLLECTIONS` | `JOURNAL`，然后是灰色 `|` 分隔符，再接 lucide `ShoppingBag` icon（stroke 1.5，尺寸 `var(--icon)`）。
Hover：不透明度 50%。购物车内有商品时显示带商品数量的黑色圆形徽标。

### 2. Main hero (flex-1)
Padding：`paddingInline: var(--pad-x)`、`paddingBlock: var(--main-py)`。布局：移动端为 column，`lg:flex-row` 两端对齐。

**左侧区块**（垂直居中）：
1. 左上角小型 L 形边角括号 SVG（stroke 1.5，尺寸 `var(--corner)`）
2. 标题——Orbitron 超粗体，大写，tracking `0.08em`，leading `1.05`，尺寸 `var(--headline)`，共三行：
   - `FUTURE`
   - `FORWARD`
   - `FASHION` + 行内 **棋盘格 SVG**（viewBox `0 0 36 18`，4 行 3.8×3.8 的黑色方块；偶数行偏移 2.25；尺寸 `var(--checker-w)` × `var(--checker-h)`，略微向下平移 2px）
3. 左下角 L 形边角括号
4. CTA 按钮：边框 `border-gray-400`、rounded-md、大写 `SHOP NOW` + lucide `ArrowUpRight`。Tracking `0.18em`，尺寸 `var(--body)`，padding `var(--btn-px)` / `var(--btn-py)`。Hover：填充黑色、文字白色、边框黑色；icon 略微向右上方移动。

**右下方功能区块**（`self-end`，桌面端底部对齐）：
带有四个边角括号 SVG（TL/TR/BL/BR）的框体，绝对定位于四个角——无填充卡片背景。内部：
- 线框地球 SVG（viewBox `0 0 64 64`，stroke 1.2：外圆 r=28、赤道线、2 个水平椭圆、子午线、2 个垂直椭圆），尺寸 `var(--globe)`
- 标语使用 Plus Jakarta Sans 半粗体、大写、tracking `0.18em`，尺寸 `var(--body)`：
  - `BEYOND TRENDS.`
  - `BUILT FOR TOMORROW.`
min-width `var(--feature-min)`，padding `var(--feature-pad)`。

### 3. 侧边抽屉（指定内容）
点击 SHOP / COLLECTIONS / JOURNAL / cart 时，在变暗背景层（`bg-black/20 backdrop-blur-xs`）上打开右侧白色抽屉。最大宽度 `var(--drawer-max)`，padding `var(--drawer-pad)`，左侧灰色边框。Header：Orbitron 粗体大写标题 + lucide `X` close。点击背景层关闭。

**SHOP → 标题 `Catalog`**
副标题：`Featured Garments`
商品（指定内容）：
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  
每行：tag（微型灰色文字）、标题、价格、`ADD` 按钮。点击 ADD 将商品加入购物车并显示 toast：`Added "{title}" to your shopping bag.`（3s，右上角黑色 toast，带 lucide Check emerald）。

**COLLECTIONS → 标题 `Archive 2026`**
副标题：`Season Lineup`
1. SERIES 01 — SYNTHETIC HORIZONS — 采用超耐用、全天候密封面料，搭配极简廓形架构。
2. SERIES 02 — KINETIC FORM — 为实现最大活动自由度和温度平衡而设计的人体工学街头服饰。
3. SERIES 03 — MONOCHROME ZERO — 使用 100% 再生聚合物打造的纯黑白结构剪裁。

**JOURNAL → 标题 `Editorial`**
副标题：`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 → 标题 `Shopping Bag`**
空状态：ShoppingBag icon + `Your shopping bag is empty.`
有商品时：列出标题/价格 + Remove。Footer：全宽黑色 `CHECKOUT NOW` + ChevronRight → toast `Order submitted successfully!`，清空购物车并关闭抽屉。
非购物车 Footer：`LGPSM © 2026 — FUTURE FORWARD FASHION`（微型、灰色、居中大写）。

---

## ICONS

仅使用 lucide-react：`ShoppingBag`、`ArrowUpRight`、`X`、`ChevronRight`、`Check`。以下内容使用自定义 SVG：棋盘格、线框地球、四个 L 形边角括号（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`）。

---

## 视觉规则

- 白色页面、黑色墨迹、仅使用灰色点缀（`gray-200` / `gray-300` / `gray-400` / `gray-500` / `gray-600` / slate 网格 `#64748b`）
- 无紫色、无米白色、无发光效果、hero media 上无浮动徽标、无内嵌 hero cards
- Brand `LGPSM` 和标题 `FUTURE FORWARD FASHION` 主导首屏
- 首屏仅包含：logo/nav、标题 + 棋盘格、SHOP NOW、地球标语，以及全出血双图片显露背景
- UI 文字位于背景上方的 z-10/z-20；背景为 z-0 且不可交互（`pointer-events-none`）

使用上述指定 URL、指定显露计算方式（ease 0.1、radius `clamp(160, 16vw, 420)`、列出的 gradient stops）、指定文案、字体、流式 clamps 和抽屉内容，以像素级精度重建此页面。

---