有机奥德赛

使用 React、Tailwind CSS 和 Framer Motion 创建一个全屏电影感 Hero 区域。使用搭配 TypeScript 的 Vite。所需依赖项为：`react`、`react-dom`、`framer-motion`、`lucide-react` 和 `tailwindcss`。

**视频背景：**
- 全屏循环背景视频，使用绝对定位填满 viewport
- 视频 URL：`https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260619_191346_9d19d66e-86a4-47f7-8dc6-712c1788c3b2.mp4`
- 属性：autoPlay、muted、loop、playsInline、object-cover、object-center
- 页面背景：`#010101`，占满 viewport 高度，隐藏溢出内容

**字体（通过 index.html link 标签加载）：**
- Garamond，来源：`https://db.onlinewebfonts.com/c/2bf40ab72ea4897a3fd9b6e48b233a19?family=Garamond`
- Google Fonts 的 Geist：字重 300、400、500
- 正文字体：`'Geist', -apple-system, BlinkMacSystemFont, sans-serif`
- 标题字体类 `.font-garamond`：`'Garamond', 'Times New Roman', serif`

**导航栏：**
- 使用相对定位、z-20，桌面端通过 flexbox 居中，移动端两端对齐
- 品牌名称“Organic Visions”——白色、大写、字间距 0.25em（移动端）/ 0.3em（桌面端）、font-light
- 桌面端导航链接：“Wander”“Archive”“Story”“Connect”——white/80、大写、0.2em 字间距，hover 时变为白色，300ms 过渡
- 移动端：使用 lucide-react 的 `Menu` 和 `X` 图标（size 22）实现汉堡菜单切换

**移动端菜单（汉堡下拉菜单）：**
- 固定定位，top-16、left-4、right-4、z-50，在 md+ 隐藏
- 使用 framer-motion 的 `AnimatePresence` 实现挂载/卸载动画
- 动画：从 y:-10 到 y:0 淡入，时长 0.3s，ease 'easeOut'；退出时反向播放
- 每个链接依次进入：opacity 从 0 到 1，y 从 -8 到 0，delay 为 0.05 + index*0.06
- 链接：white/90、0.25em 字间距、大写、font-light，hover 时变为白色
- 自定义玻璃类 `.mobile-menu-glass`：
  ```css
  background: rgba(10, 10, 10, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  ```
- rounded-2xl、py-8、gap-5、flex-col 居中

**HERO 内容：**
- 相对定位、z-10、flex-col 居中、文本居中
- 内边距：px-5（sm:px-8）、pt-12（sm:pt-16、md:pt-24）
- 标题：两行——“WITNESS THE”和“HIDDEN REALM”
- 字体：Garamond，响应式字号 4xl/6xl/8xl/9xl，font-normal、白色、行高 1.08、tracking-tight、mb-6（sm:mb-8）
- 每一行都使用 `StaggeredFade` 组件，将文本拆分为单个字符，并以 0.07s 的交错延迟逐个显示（opacity 从 0 到 1），进入可视区域时触发一次

**STAGGERED FADE 组件：**
- 接收 `text` 字符串 prop
- 拆分为单个 `<motion.span>` 字符
- 使用 `useInView` hook（once: true）触发动画
- Variants：hidden = opacity 0；show = opacity 1、y:0，每个字符的 delay 为 `i * 0.07`

**副标题：**
- Framer Motion 动画段落，initial opacity:0 y:20，animate opacity:1 y:0，时长 0.8s，delay 1.6s
- 文本：“一场穿越精巧生命形态的奥德赛，”（移动端隐藏换行，sm+ 显示）“由镜头与好奇心揭示。”
- white/70、font-light、leading-relaxed、max-w-xs（sm:max-w-md）、mb-8（sm:mb-10）
- 响应式字号：text-sm / text-base / text-lg

**CTA 按钮：**
- Framer Motion 动画，initial opacity:0 y:20，animate opacity:1 y:0，时长 0.8s，delay 2.0s
- 文本：“开始体验”
- 使用 `.liquid-glass` 类、rounded-full、响应式内边距 px-7/px-10 py-3.5/py-4
- white/90、大写、响应式字间距 0.18em/0.2em

**LIQUID GLASS 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;
}

.liquid-glass:hover {
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.15);
}

.liquid-glass:active {
  transform: scale(0.98);
}
```

**全局 CSS：**
- 重置：所有元素的 margin 设为 0、padding 设为 0、box-sizing 设为 border-box
- Body：启用抗锯齿字体平滑、白色文本、#010101 背景
- 使用 Tailwind 指令：@tailwind base/components/utilities

**页面标题：**“Synthetic Nature”