趣味 404 页面

使用 React、Tailwind CSS 和 Lucide React icons，为名为 "TinyTrails" 的儿童品牌构建一个全屏动画 404 错误页面。页面必须是单个 `App.tsx` 组件。使用从 Google Fonts 加载的 Inter 字体（字重 400–900）。页面占据单个视口高度，不可滚动。

---

**布局与背景：**

- 整个页面使用 `w-full h-screen overflow-hidden flex flex-col`，CSS 线性渐变背景从 `#FF8233`（顶部）过渡到 `#FDAC55`（底部）。

---

**背景 "404" 文字效果：**

- 在所有内容后方、视口中央渲染白色（`#FFFFFF`）文字 "404"，使用 `font-black`、`leading-none`、`tracking-tighter`、`whitespace-nowrap`。
- 字号：`clamp(200px, 48vw, 800px)`。
- 文字横向缩放 `1.15`，纵向动态缩放：在挂载时（以及调整窗口大小时），测量文字元素的 `offsetHeight`，用 `window.innerHeight` 除以该高度，得到 Y 轴缩放值。通过 `transform: scale(1.15, ${scaleY * 1.4})` 应用，并将该值乘以 `1.4`。
- 在 "404" 文字上方（同一个居中容器中）渲染一个白色（`#FFFFFF`）椭圆：一个带有 `rounded-full`、高度 `h-[22vh] sm:h-[26vh] md:h-[50vh]`、宽度 `clamp(120px, 20vw, 400px)` 的 `div`，使用同一个动态 `scaleY` 值进行纵向缩放，并设置 `transformOrigin: center`。
- 整个背景层（文字 + 椭圆）包裹在一个带有 `opacity: 0.8` 和 CSS 遮罩的容器中，该遮罩在底部渐变为透明：`mask-image: linear-gradient(to bottom, black 40%, transparent 95%)`（同时为 Safari 添加 `-webkit-mask-image`）。
- 此层使用 `absolute inset-0 pointer-events-none`。

---

**导航栏：**

- 使用 `relative z-20`，flex row，项目居中，`justify-between`，内边距为 `px-4 sm:px-6 md:px-12 py-4 sm:py-5`。
- **Logo（左侧）：** 一个由白色圆点组成的 2x2 网格（`grid-cols-2 gap-0.5`），每个圆点使用 `w-2.5 h-2.5 sm:w-3 sm:h-3 bg-white rounded-full`。旁边是文字 "TinyTrails"，使用 `text-white font-bold text-lg sm:text-xl ml-1`。
- **桌面端导航链接（中间/右侧）：** 在移动端隐藏（`hidden md:flex`），显示一排胶囊按钮，使用 `gap-1`。项目为："About Us"、"Programs"、"Reviews"、"FAQ"、"Contacts"。每项都是一个 `<a>`，使用 `px-4 py-1.5 text-sm font-medium rounded-full bg-white`，文字颜色为 `#F16524`，并带有 `hover:opacity-90 transition-colors`。
- **Menu 按钮（右侧）：** 一个胶囊按钮，使用 `px-4 py-2 sm:px-5 sm:py-2.5 rounded-full text-white`，背景色为 `#F16524`。包含一个 Lucide `Menu` icon（`w-4 h-4`）和文字 "Menu"（`text-sm font-medium hidden sm:inline`）。带有 `hover:opacity-90 transition-colors`。

---

**移动端菜单遮罩层：**

- 固定全屏（`fixed inset-0 z-50`），可切换可见性。过渡：`duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]`。
- **背景遮罩：** `absolute inset-0 bg-black/40 backdrop-blur-sm`，通过时长 500ms 的 `opacity` 过渡淡入/淡出。点击时关闭菜单。
- **面板：** 从右侧滑入。使用 `absolute top-0 right-0 h-full w-full sm:w-[380px]`，在关闭时的 `translate-x-full` 和打开时的 `translate-x-0` 之间切换。背景：`linear-gradient(135deg, #FF6B1A 0%, #FF9642 100%)`。
  - **面板页眉：** 与导航栏相同的 Logo（2x2 白色圆点 + "TinyTrails" 白色粗体文字）。关闭按钮：`w-10 h-10 rounded-full bg-white/20 text-white hover:bg-white/30`，带有 Lucide `X` icon（`w-5 h-5`）。
  - **菜单项：** 使用交错动画。每个项目使用 `px-6 py-4 text-lg font-semibold text-white rounded-2xl bg-white/10 hover:bg-white/20 transition-all duration-300`。打开时：`opacity-100 translate-y-0`；关闭时：`opacity-0 translate-y-4`。打开时每项的过渡延迟为 `150 + i * 60`ms，关闭时为 `0ms`。
  - **底部 CTA：** 绝对定位在底部（`absolute bottom-0 left-0 right-0 p-6`）。一个胶囊链接：`w-full py-4 rounded-full bg-white font-semibold text-base`，文字颜色为 `#F16524`，带有 `hover:scale-[1.02]`。包含 Lucide `ArrowLeft` icon + "Back to Home"。打开时延迟 450ms 淡入。
- 菜单打开时锁定 body 滚动（`overflow: hidden`）。

---

**中央视频：**

- 一个绝对定位的容器（`absolute inset-0 flex items-center justify-center pointer-events-none`），使用 `margin-top: calc(-6vh - 40px)` 将其向上移动。
- 内部是一个响应式容器：`w-[120vw] h-[85vh] sm:w-[70vw] sm:h-[70vh] md:w-[62vw] md:h-[78vh]`。
- 包含一个带有 `autoPlay loop muted playsInline` 的 `<video>` 元素，class 为 `w-full h-full object-contain pointer-events-none mix-blend-darken`。
- **视频源 URL：** `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260713_234424_b1332b69-2e69-4302-8dbc-40f86846afbd.mp4`

---

**底部内容：**

- 使用 `relative z-30 mt-auto pb-8 sm:pb-16 flex flex-col items-center text-center px-4`。
- 标题："Oops, something went wrong!"，使用 `text-white text-lg sm:text-xl md:text-2xl font-medium mb-3 sm:mb-4`。
- 按钮/链接：一个 `<a href="/">` 胶囊按钮，使用 `inline-flex items-center gap-2 px-6 py-3 sm:px-8 sm:py-4 rounded-full text-white font-semibold text-sm sm:text-base`，背景为 `#F16524`。带有 `hover:scale-105 hover:shadow-lg transition-all`。包含 Lucide `ArrowLeft` icon（`w-4 h-4 sm:w-5 sm:h-5`）+ "Back to Home"。

---

**全局 CSS（`index.css`）：**

```css
@tailwind base;
@tailwind components;
@tailwind utilities;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
```

---

**HTML HEAD：**

- 从 Google Fonts 加载 Inter 字体：`https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap`，并预连接到 `fonts.googleapis.com` 和 `fonts.gstatic.com`。
- 标题："404 - Page Not Found"。

---

**关键配色：**
- 页面渐变：`#FF8233` 到 `#FDAC55`
- 强调色/按钮：`#F16524`
- 文字与形状：`#FFFFFF`
- 菜单渐变：`#FF6B1A` 到 `#FF9642`
- 菜单遮罩层背景：`black/40`，带有 `backdrop-blur-sm`
- 菜单项背景：`white/10`，悬停时为 `white/20`

---

**依赖项：** React、Tailwind CSS、Lucide React（`ArrowLeft`、`Menu`、`X` icons）。Vite 构建系统。不使用其他库。