Claude Mythos：Lithos 地质品牌 Hero

❤️‍🔥 一键获取所有令人惊艳的动效网站提示词：
http://

用 React 18 + TypeScript + Vite + Tailwind CSS 和 lucide-react 图标，为一个名为 Lithos 的地质品牌构建一个全屏深色主题 Hero 区域。招牌功能是一个跟随光标的聚光灯效果，通过一个柔和的圆形遮罩，在底图之上揭示出第二张图片。请精确匹配以下每一处细节。

### 字体
在 `src/index.css` 顶部加入以下内容，然后写 `@tailwind base/components/utilities`：
```css
@import url('');
* { font-family: 'Inter', sans-serif; }
.font-playfair { font-family: 'Playfair Display', serif; }
```
- 正文 / UI 字体：**Inter**。
- 展示 / 品牌字标强调：**Playfair Display，斜体**。

### 资源 URL（精确使用以下地址）
- 底图（`BG_IMAGE_1`）：
  ``
- 揭示图（`BG_IMAGE_2`）：
  ``

### 布局与结构
根容器：`min-h-screen bg-white tracking-[-0.02em]`，内联样式 `fontFamily: "'Inter', sans-serif"`。

**版块**（`<section>`）：`relative w-full overflow-hidden h-screen bg-black`，内联样式 `style={{ height: '100dvh' }}`。按 z-index 分层：
1. **底图**（`z-10`）：`absolute inset-0 bg-center bg-cover bg-no-repeat`，背景为 `BG_IMAGE_1`。
2. **揭示层**（`z-30`）：一个 `RevealLayer` 组件（见下），展示 `BG_IMAGE_2`。
3. **标题**（`z-50`）：`absolute top-[14%] left-0 right-0 flex flex-col items-center text-center px-5 pointer-events-none`。一个 `<h1>`，`text-white leading-[0.95]`，包含两个块级 span：
   - 第一行：`block font-playfair italic font-normal text-5xl sm:text-7xl md:text-8xl`，内联 `letterSpacing: '-0.05em'`，文字为 **「Layers hold」**。
   - 第二行：`block font-normal text-5xl sm:text-7xl md:text-8xl -mt-1`，内联 `letterSpacing: '-0.08em'`，文字为 **「tales of time」**。
4. **左下段落**（`z-50`）：`hidden sm:block absolute bottom-14 left-10 md:left-14 max-w-[260px]`。`<p className="text-sm text-white/80 leading-relaxed">` —— 「Every layer of sediment records a chapter of our planet, from ancient seabeds to drifting ash, layered across millions of years beneath us.」
5. **右下区块**（`z-50`）：`absolute bottom-10 sm:bottom-24 left-5 right-5 sm:left-auto sm:right-10 md:right-14 max-w-full sm:max-w-[260px] flex flex-col items-start gap-4 sm:gap-5`。包含一个 `<p className="text-xs sm:text-sm text-white/80 leading-relaxed">` —— 「Our interactive maps let you peel back the crust to trace how stones, fossils, and deep time combine to shape the ground beneath your feet.」—— 以及一个 **Start Digging** 按钮：`bg-[#e8702a] hover:bg-[#d2611f] text-white text-sm font-medium px-7 py-3 rounded-full transition-all hover:scale-[1.03] active:scale-95 hover:shadow-lg hover:shadow-[#e8702a]/30`。

### 光标聚光灯揭示效果（核心机制）
在父组件中，定义 `const SPOTLIGHT_R = 260;`，并用平滑处理追踪鼠标位置：
- Refs：`mouse`（原始值）、`smooth`（缓动值）、`rafRef`；状态 `cursorPos`（初始为 `{x:-999,y:-999}`）。
- `mousemove` 监听器存储原始的 `e.clientX/clientY`。
- 一个 `requestAnimationFrame` 循环做插值：`smooth.x += (mouse.x - smooth.x) * 0.1`（y 同理），然后 `setCursorPos`。组件卸载时清理监听器并取消 RAF。

`RevealLayer({ image, cursorX, cursorY })`：
- 内部持有一个隐藏的 `<canvas>`（`absolute inset-0 pointer-events-none`，`style={{display:'none'}}`），挂载和窗口调整大小时设置为 `window.innerWidth/Height`。
- 一个揭示用的 `<div>`（`absolute inset-0 bg-center bg-cover bg-no-repeat z-30 pointer-events-none`），背景为揭示图片。
- 每次渲染时：清空 canvas，在 `(cursorX, cursorY)` 处构建一个半径从 0 到 `SPOTLIGHT_R` 的**放射状渐变**，色标为：
  `0 → rgba(255,255,255,1)`，`0.4 → 1`，`0.6 → 0.75`，`0.75 → 0.4`，`0.88 → 0.12`，`1 → 0`。
  用它填充一个半径为 `SPOTLIGHT_R` 的圆弧。然后调用 `canvas.toDataURL()`，将其应用为揭示层 div 上的 `maskImage` / `webkitMaskImage`，配 `maskSize: '100% 100%'`。这让第二张图片只在跟随光标移动的柔和发光圆圈内可见。

### 导航（固定，覆盖在 Hero 之上）
`<nav className="fixed top-0 left-0 right-0 z-[100] flex items-center justify-between p-4 sm:p-5">`：
- **左侧**：一个内联 SVG Logo（26×26，viewBox `0 0 256 256`，`fill="#ffffff"`，路径 `M 256 256 L 128 256 L 0 128 L 128 128 Z M 256 128 L 128 128 L 0 0 L 128 0 Z`）加品牌字标 `<span className="text-white text-2xl font-playfair italic">Lithos</span>`。
- **中间药丸**（`hidden md:flex absolute left-1/2 -translate-x-1/2 bg-white/20 backdrop-blur-md border border-white/30 rounded-full px-2 py-2 items-center gap-1`）：按钮 **Course**（当前项：全白色文字），然后是 **Field Guides、Geology、Plans、Live Tour**（`text-white/80 ... hover:bg-white/20 hover:text-white transition-colors`，`px-4 py-1.5 rounded-full text-sm font-medium`）。
- **右侧（桌面端）**：`hidden md:block bg-white text-gray-900 text-sm font-semibold px-6 py-2.5 rounded-full hover:bg-gray-100` —— **Sign Up**。

### 动画（高级感，加载时触发）
加入到 `index.css`：
```css
@keyframes heroReveal { 0%{opacity:0;transform:translateY(28px);filter:blur(12px)} 100%{opacity:1;transform:translateY(0);filter:blur(0)} }
@keyframes heroFadeUp { 0%{opacity:0;transform:translateY(20px)} 100%{opacity:1;transform:translateY(0)} }
@keyframes heroZoom { 0%{transform:scale(1.12)} 100%{transform:scale(1)} }
.hero-anim { opacity:0; animation-fill-mode:forwards; animation-timing-function:cubic-bezier(0.16,1,0.3,1); }
.hero-reveal { animation-name:heroReveal; animation-duration:1.1s; }
.hero-fade { animation-name:heroFadeUp; animation-duration:1s; }
.hero-zoom { animation:heroZoom 1.8s cubic-bezier(0.16,1,0.3,1) forwards; }
@media (prefers-reduced-motion: reduce){ .hero-anim,.hero-zoom{ animation:none; opacity:1; } }
```
应用方式：
- 底图 div → 加入 `hero-zoom`（缓慢的肯·伯恩斯式缩小推镜）。
- 标题第一行 → `hero-anim hero-reveal`，内联 `animationDelay: '0.25s'`；第二行 → 相同类名，`'0.42s'`（模糊上升，交错出现）。
- 左下段落容器 → `hero-anim hero-fade`，`animationDelay: '0.7s'`。
- 右下容器 → `hero-anim hero-fade`，`animationDelay: '0.85s'`。

### 响应式
- 标题字号从 `text-5xl` → `sm:text-7xl` → `md:text-8xl` 递增。
- 中间导航药丸和桌面端 Sign Up 在 `md` 以下 `hidden`；移动端汉堡菜单为 `md:hidden`。
- 左下段落 `hidden sm:block`；右下区块在移动端全宽（`left-5 right-5`），从 `sm` 起靠右锚定。
- 使用 `100dvh`，避免移动端浏览器工具栏裁切该版块。