Wanderful 首屏

使用 React + TypeScript + Vite + Tailwind CSS，为名为 "Wanderful" 的旅行品牌构建一个占满视口、具有电影感的首屏区域。使用 GSAP 制作动画，并使用 `lucide-react` 提供图标。

**字体（通过 `src/index.css` 中的 Google Fonts 加载）：**
```css
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Barlow:wght@300;400;500;600&family=Inter:wght@300;400;500;600;700&display=swap');
```
同时加载自定义展示字体：
```css
@font-face {
  font-family: 'Dirtyline';
  src: url('https://fonts.cdnfonts.com/s/15011/Dirtyline36DaysofType.woff') format('woff');
  font-weight: normal; font-style: normal; font-display: swap;
}
```
正文字体：`Barlow`。首屏标题：`Inter`。页面背景：`#000`。

**视频背景（固定、全屏、z-0）：**
- 使用以下确切的 CloudFront URL 作为 `<video>` 的 src：
  `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260510_060007_60275ce7-030c-4668-a160-8f364ec537d3.mp4`
- 属性：`autoPlay muted loop playsInline`、`object-cover`，容器使用 `scale-[1.08]` 缩放并设置 `origin-center`。
- 在 `onLoadedMetadata` 中设置 `playbackRate = 1.25`。
- 添加由 GSAP 驱动的鼠标视差效果：监听 `mousemove`，计算 `targetX/Y = ((clientX - cx)/cx) * 20`，在 `requestAnimationFrame` 内使用 `currentX/Y += (target - current) * 0.06` 进行 lerp，并通过 `gsap.set(videoBg, { x, y })` 应用。

**液态玻璃工具类（添加到 `index.css`）：**
```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;
}
```

**页眉（顶部固定、z-50、`px-10 py-8`、flex justify-between items-center）：**
- 左侧：文字标识 `Wanderful`，后接 `<sup>TM</sup>`，使用 `text-[17px] font-semibold tracking-tight`。
- 中间：使用 `.liquid-glass rounded-full px-2 py-2 flex items-center gap-1` 的 `<nav>`。链接：`JOURNEY`、`BENEFITS`、`JOURNAL`、`GUIDEBOOK`。每个链接使用：`text-[11px] font-medium tracking-[0.12em] text-white/90 hover:text-white px-4 py-1.5 rounded-full transition-colors duration-200`。
- 右侧："GET ROAMING" 锚点，使用相同的 `.liquid-glass rounded-full px-5 py-2.5 text-[11px] font-medium tracking-[0.12em] text-white/90 hover:text-white`。

**首屏标题（固定、`top: 120px`、居中、z-20）：**
两行均居中，使用 `Inter` 400、`font-size: clamp(40px, 5.4vw, 72px)`、`line-height: 1.1`、`letter-spacing: -0.02em`：
- 第 1 行（白色）：`无界探索。`
- 第 2 行（`rgba(255,255,255,0.55)`）：`凭敏锐直觉发现未知。`

挂载时淡入：`opacity 0 → 100`，并通过 `transition-all duration-1000` 实现 `translate-y-6 → 0`。

**底部区块（固定 `bottom-14`、z-20、flex-col items-center gap-6），使用 `delay-300` 淡入：**
1. 段落，`max-w-[620px] text-[15px] leading-relaxed`，居中：
   - 白色："我们的智能行程围绕你而定——你的节奏、你的风格，以及你对冒险的渴望。"
   - `text-white/55`：" 每次出游都为你量身打造，流畅无缝，完全属于你。"
2. 按钮：白色背景、黑色文字，使用 `text-[15px] font-medium rounded-full px-8 py-3.5`，hover 时使用 `scale-[1.03]` + `shadow-[0_0_32px_4px_rgba(255,255,255,0.2)]`，active 时使用 `scale-[0.97]`。标签：`立即规划我的旅程`。
3. 一行：来自 lucide-react 的 `Lock` 图标（`size={13} strokeWidth={1.5}`）+ `text-[11px] font-medium tracking-[0.14em] text-white/70`，文字：`安全源于设计。绝无数据泄露。`

**根容器：**使用 `min-h-screen bg-black text-white overflow-x-hidden`，并内联设置 `fontFamily: "'Inter', sans-serif"`。

依赖项：`gsap`、`lucide-react`、`react`、`react-dom`；tailwind 配置的内容 glob 为 `./index.html` 和 `./src/**/*.{js,ts,jsx,tsx}`。