Stillmind

使用 React、Tailwind CSS 和 Lucide React icons，为一款名为“Lumora”的正念/专注应用创建一个全屏电影感 hero section。

## 字体

使用 **Instrument Serif**（Google Fonts，logo 使用 italic）。在 index.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=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
```

在 html/body 上设置 `font-family: 'Instrument Serif', serif`。正文文本（subtext、buttons、stats、video labels）通过 inline 使用 `system-ui, sans-serif`。

---

## 背景视频层

将 4 个全屏循环视频以绝对定位方式堆叠。只有当前激活的视频使用 `opacity-100`；其他视频使用 `opacity-0`。使用 1000ms ease-in-out 完成透明度过渡。视频设置 autoPlay、muted、loop、playsInline。

**视频 URL（按顺序）：**
1. `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260702_081127_0992a171-d3c6-4978-8213-0ec5df8b6d63.mp4`
2. `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260702_092026_dd05b805-ea0f-40b2-8c52-332b88502592.mp4`
3. `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260702_081042_df7202bf-bd80-4b2b-bbc6-1f09ba2870e9.mp4`
4. `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260702_080959_4cac5234-3573-464e-a5b7-76b94b8a7d61.mp4`

**标签：** Golden Hour、Still Water、Deep Woods、Quiet Dawn

---

## 透明 PNG 叠加层（z-index 1）

将此图片作为绝对定位的叠加层置于视频之上，覆盖整个 viewport：
```
https://soft-zoom-63098134.figma.site/_assets/v11/0b4a435b2df2747593c43d7a1c9b4578f7d8d90c.png
```

应用连续的“train-bob”动画：translateY 在 0 和 -6px 之间以 3s ease-in-out infinite 往复变化，同时保持 scale(1.03)，防止运动期间露出边缘。

---

## 液态玻璃效果（CSS class `.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;
}
```

使用 `::before` pseudo-element 创建细微的渐变边框：
```css
.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-index 2）——全高 Flex Column

### Navigation（顶部）
- 左侧：“Lumora”，白色、italic、text-xl（sm:text-2xl）
- 右侧（桌面端 md+）：一个 `.liquid-glass` pill，其中包含 nav links（“How It Works”、“Features”、“Pricing”、“Community”），样式为 white/90 text-sm，hover 时变为 white；末尾再放置一个纯白色的“Get Started”button
- 右侧（移动端）：一个 `.liquid-glass` rounded hamburger button，使用 Lucide `Menu`/`X` icons，并带有 crossfade rotation animation（300ms）。Menu icon 旋转 90deg 淡出并缩放至 75%；X icon 从 -90deg 旋转淡入

### 移动端菜单叠加层（fixed，z-50）
- Backdrop：`bg-black/60 backdrop-blur-sm`
- 居中的全屏 panel，带 staggered entrance（每个 link 的延迟依次增加 50ms：100ms、150ms、200ms、250ms、300ms）
- Links：white text-3xl，打开时从 translate-y-4 过渡到 0
- 底部放置“Get Started”button，并带 scale animation
- Cubic-bezier easing：`cubic-bezier(0.4,0,0.2,1)`，duration 500ms

### Hero 内容（居中，位于 nav 下方）
- **Badge**：`.liquid-glass` rounded-full pill，文本为“已有超过 10,000 人正在找回清晰思绪”
- **Heading**：“在无尽嘈杂的 / 宇宙中保持清醒”（在“无尽嘈杂的”之后换行）。尺寸：text-4xl / sm:text-5xl / md:text-7xl / lg:text-[5.5rem]，leading-[1.1]，max-w-4xl
- **Subtext**：“摆脱消息提示、无尽滚动和持续不断的要求所带来的混乱。探索如何守护你的当下，并有意识地创造。”max-w-xl，leading-relaxed
- **Email Input**：一个 `.liquid-glass` rounded-full pill，其中包含 text input（“你的最佳邮箱”）和纯白色“获取抢先体验”button。移动端 Max-width 320px，sm:max-w-sm
- **Video Switcher**：一行 4 个 text buttons，显示对应 labels。Active button 使用纯色和 bottom border。Inactive buttons 为 50% opacity，border 为 transparent，hover 时变为 80%

### “Deep Woods”的 Dark Mode（第 3 个视频，index 2）
当第 3 个视频处于激活状态时，所有 hero content（badge、heading、subtext、input、video switcher）都以 700ms duration 过渡为深色 `#182C41`。navbar 和 bottom stats 始终保持白色。

### 底部 Stats（通过 flex-1 spacer 推至底部）
- 一行 stats，由 `|` dividers 分隔（移动端隐藏）：“60+ 次深度专注”、“12,000+ 位创作者”、“4.8 用户满意度”、“意图优先设计”
- text-white/70、text-xs sm:text-sm、system-ui font

---

## 视频切换逻辑
- 跟踪 `activeVideo` state（默认为 0）和 `isTransitioning` boolean
- 点击时，如果目标尚未激活且当前不在 mid-transition，则设置新的 active video，并启动 1000ms cooldown（与 CSS crossfade duration 一致）
- 在 cooldown 期间忽略其他点击

---

## 响应式行为
- 移动端：更小的 text sizes、更紧凑的 padding、hamburger nav，stats 自然换行
- 平板/桌面端：更大的 heading、更多 padding、inline nav pill，stats 使用 pipe separators

---

## Section 容器
```html
<section className="relative w-full h-screen overflow-hidden bg-black">
```

黑色背景可防止视频加载前出现闪烁。所有内容都位于一个 viewport-height section 中，不产生滚动。

---

以上是完整规范。整个应用放在单个 `App.tsx` component 中，CSS 放在 `index.css` 中。