健康设备 X

为名为 "Measured" 的产品构建单页 hero section——一个健康/康养可穿戴设备 landing page。页面为 fullscreen（100vh），采用深色/氛围感美学，包含分层图像、跟随光标的 spotlight reveal effect 和 frosted-glass navigation。使用 React + Vite + Tailwind CSS + TypeScript。

---

## 字体

1. **Google Fonts — Inter**（字重 300-700）：用作所有元素的全局默认字体（`* { font-family: 'Inter', sans-serif; }`）
2. **Google Fonts — Instrument Serif**（常规体 + 斜体）：用于 hero heading "Measured"。通过 index.html 中的 `<link>` 加载：`https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap`
3. **Helvetica Neue Roman**（托管在 `/public/fonts/` 中的 woff2/woff）：通过 hero section wrapper 上的 `.font-helvetica-neue` class 应用。使用 `@font-face` 声明。

---

## 资源 URL（精确）

- **背景图（BG_IMAGE_1）：** `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260713_140344_79e1296a-86d7-43fd-9b5f-63ffe560f291.png&w=1280&q=85`
- **前景视频（FRONT_VIDEO）：** `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260713_162101_0d7498c5-29bb-47bf-a99f-2773c0a880a9.mp4`
- **叠加图像（OVERLAY_IMAGE）：** `https://soft-zoom-63098134.figma.site/_assets/v11/3f10f1876e118f72a396e05a6c2d099569478272.png`

---

## 页面结构与图层（z-index 顺序）

### Navigation（z-50，fixed）
- **Logo（左上角）：** 自定义 SVG 几何 logo（白色，28x28），形似互相咬合的棱角形状。精确 SVG path：`M 256 64 L 256 128 L 192.5 128 L 160 95 L 128 64 L 96 95 L 63.5 128 L 64 128 L 128 192 L 128 256 L 64.5 256 L 32 223 L 0 192 L 0 64 L 64 0 L 192 0 Z M 256 192 L 256 256 L 192.5 256 L 160 223 L 128 192 L 128 128 L 192 128 Z`（viewBox 0 0 256 256，fill white）
- **桌面端中央药丸 nav（移动端隐藏）：** 水平固定居中，包含按钮："设备"、"真实故事"、"科学"、"方案"、"联系我们"。使用 `.liquid-glass` 样式（frosted glass）。按钮为 `text-white/70`、`text-sm`、`font-medium`、rounded-full，hover 时变为白色。
- **桌面端 CTA（右上角，移动端隐藏）：** `.liquid-glass` 药丸按钮，带一个绿色小圆点（w-2 h-2 rounded-full bg-green-400）和文本 "立即预订"，白色 text-sm font-medium。
- **移动端 hamburger（右上角，md+ 时隐藏）：** `.liquid-glass` rounded-full 药丸，包含两条白线（w-5 h-[1.5px] 和 w-3.5 h-[1.5px]）。

### 移动端全屏菜单（z-55）
- 背景：`#0a0a0a` 纯色
- 关闭按钮：右上角，`.liquid-glass` rounded-full，X 由两条旋转的白线组成（+45deg、-45deg）
- Nav items 垂直堆叠、居中，`text-3xl sm:text-4xl`、white/90、中等字重
- 底部放置带绿色圆点的 "立即预订" CTA，采用 `.liquid-glass` 药丸样式
- 交错进入动画：每个项目从下方 24px 处向上滑入，opacity 从 0->1，延迟从 100ms 开始，每项递增 60ms。使用 `cubic-bezier(0.77, 0, 0.18, 1)` easing。关闭按钮从 -90deg 旋转进入，scale 0.8。

### Hero Section（100vh，overflow hidden）

**Layer 1 — 网格背景（z-0，opacity 0.1）：**
- 使用包含 48px 重复单元格图案的 SVG。图案绘制一条 L 形 path（`M 48 0 L 0 0 0 48`），stroke `#64748b`，strokeWidth 0.6，无 fill。
- 网格根据光标位置进行轻微的 parallax 偏移（偏移量按光标相对于 section 中心的位置 * 16 计算，并以 0.06 factor 缓动）。

**Layer 2 — 背景图（z-10）：**
- 将 `BG_IMAGE_1` 显示为 `background-image`，使用 `bg-center bg-cover bg-no-repeat`，绝对定位 inset-0。

**Layer 3 — Hero Text（z-20）：**
- 以超大写文本显示单词 "Measured"
- 字体：`'Instrument Serif', serif`
- 尺寸：默认 `text-[4.5rem]`、`xs:text-[5.5rem]`、`sm:text-[10rem]`、`md:text-[13rem]`、`lg:text-[16rem]`
- `leading-[0.9]`、白色、居中，定位为 `top-20 sm:top-28 md:top-32`

**Layer 4 — 叠加图像（z-25）：**
- 将 `OVERLAY_IMAGE` 用作 `<img>` tag，绝对定位 inset-0，`w-full h-full object-cover`，pointer-events-none。这是一张位于背景上方的半透明 PNG，用于增强深度/氛围感。

**Layer 5 — Spotlight Reveal（z-30）：**
- 一个跟随光标的 radial reveal mask，仅在光标悬停处显示下方的视频。
- **半径：** 260px
- **Mask gradient stops：** 中心为完全白色（0-40%），之后逐渐羽化：60% 处 alpha 为 0.75，75% 处为 0.4，88% 处为 0.12，100% 处为 0（完全透明）。
- **实现方式：** 一个隐藏的 `<canvas>` 在经过平滑处理的光标位置绘制 radial gradient。将 canvas 导出为 dataURL，并作为 CSS mask（`-webkit-mask-image` / `mask-image`）应用到包含视频的 div 上。
- **光标平滑：** 使用 lerp factor 0.1 的 `requestAnimationFrame` loop（`smooth += (target - smooth) * 0.1`）。
- **视频位置：** 使用 `clipPath: 'inset(40% 0 0 0)'` 将视频（`FRONT_VIDEO`）裁剪到 viewport 底部 60%。视频自动播放、循环、静音，并使用 playsInline。

---

## 液态玻璃 CSS 效果（`.liquid-glass`）

```css
.liquid-glass {
  background: rgba(255, 255, 255, 0.01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}
.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,
    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
    rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
```

这会创建一个近乎不可见的 frosted glass 背景，并使用 mask-composite 技巧添加细微的渐变边框（仅边框渐变）。

---

## 关键行为

1. 移动端菜单打开时锁定 **Body overflow**
2. **不可滚动**——仅显示单个 viewport hero
3. 根容器的**背景为白色**（`bg-white`），但 hero section 以深色图像填满整个 viewport
4. **Reveal effect 仅在屏幕底部 60% 显示视频**（顶部 40% 通过 clipPath 屏蔽），因此悬停在顶部区域不会显示额外内容——只能看到基础图层

---

## 视觉效果总结

用户会看到一张深色、富有氛围感的产品图（手腕上的可穿戴设备），上方叠加巨大的衬线体 "Measured" 文本。半透明叠加层增添朦胧感/深度。随着用户移动光标，一个柔和的 spotlight 圆形区域会显露下方循环播放的视频（展示动态产品）——但仅限于屏幕下部。网格背景会随 parallax 轻微移动。Navigation 采用优雅的 frosted-glass 药丸美学。