地点收藏夹

**构建一个单页 HTML 展示页，在中性的 `#F4F4F4` 舞台上并排显示两个 iOS 设备框架（每个 370x790px）。舞台使用 JS 自动缩放以适配视口。两部手机均包含 Dynamic Island、状态栏（时间 "11:11"，以及白色 SVG 的信号/wifi/电池图标）和主屏幕指示条。动画需等待视频 `loadeddata` 事件 + 字体加载完成后才会启动，并设有 5s 安全超时。**

---

### 字体

1. **ITC Garamond Std Narrow**（通过 Cloudinary 自托管）：
   - Light (300)：`https://res.cloudinary.com/dgupuutfn/raw/upload/v1783596334/ITCGaramondStd-LtNarrow_i2zcip.woff2` / `.woff` 版本 `ITCGaramondStd-LtNarrow_soc5vc.woff`
   - Book (400)：`https://res.cloudinary.com/dgupuutfn/raw/upload/v1783596334/ITCGaramondStd-BkNarrow_xjfoc0.woff2` / `.woff` 版本 `ITCGaramondStd-BkNarrow_wfoxm1.woff`
   - Book Italic (400 italic)：`https://res.cloudinary.com/dgupuutfn/raw/upload/v1783596334/ITCGaramondStd-BkNarrowIta_hiy9ld.woff2` / `.woff` 版本 `ITCGaramondStd-BkNarrowIta_rlarxo.woff`

2. **Google Fonts**：`Playfair Display`（400、500、600 + italic）和 `Inter`（400、500、600、700）

---

### 屏幕 1 -- "收藏你所有地点的地方"（浅色设备框架）

**背景**：深色（#02040c）。使用原生 470x1008 设计，通过 `transform: scale(0.787234)` 和 `transform-origin: top left` 缩小至 370x790。

**视频背景（hero）**：
```
https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260710_114906_ad7cee37-9e56-434f-99bc-92d5bdc4f9fe.mp4
```
- `autoplay loop muted playsinline`、`object-fit: cover`、`object-position: center 48%`，覆盖整个框架，z-index 0。

**Hero 渐隐遮罩**：位于框架底部 46%，渐变从 `rgba(2,4,12,0)` 开始，在 46% 处变为 `rgba(2,4,12,.35)`，到 100% 处变为 `rgba(2,4,12,.72)`。z-index 1。

**Logo**（居中，顶部 74px）：
```
https://polo-pecan-73837341.figma.site/_assets/v11/b1ddc82509144261f1999a0c4d92be5ce6689c0f.png
```
- 宽度 118px，`filter: drop-shadow(0 0 7px rgba(190,215,255,.28))`。z-index 4。

**标题**（顶部 618px，居中，z-index 4）：
- 字体：ITC Garamond Std Narrow，字重 300，66px，行高 68px，字间距 0.2px
- 文本：`收藏你所有地点的`，然后换行，再以 italic（字重 400）显示`地方`
- 文字阴影：`0 0 34px rgba(255,255,255,.22), 0 1px 2px rgba(0,0,0,.35)`
- italic 的“地方”带有额外辉光：`0 0 10px rgba(255,255,255,.6), 0 0 20px rgba(255,235,190,.5), 0 0 40px rgba(255,210,140,.32)`

**副标题**（顶部 787px，居中，z-index 4）：
- 字体：Inter，16.5px，字重 400，行高 26px，颜色 `rgba(255,255,255,.52)`
- 文本："保存、整理和分享\n你喜爱的地点"

**按钮**（顶部 874px，左侧 32px，406x55px，z-index 4）：
- 白色背景，圆角半径 28px，box-shadow `0 6px 26px rgba(0,0,0,.28)`
- Apple logo SVG（18x21，填充 #1a1a1a）+ 文本“使用 Apple 继续”
- 字体：Helvetica Neue，18px，字重 500，-webkit-text-stroke 0.6px #1a1a1a

**条款**（顶部 950px，居中，z-index 4）：
- 字体：12px，字重 400，颜色 `rgba(255,255,255,.42)`
- 文本："继续即表示你同意**使用条款**"（粗体文本颜色为 `rgba(255,255,255,.82)`，字重 400）

---

### 屏幕 2 -- "解锁 Pro"（深色设备框架）

**背景**：深色（#14151d）。

**视频背景**：
```
https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260710_115050_a1ba47d0-aedf-413c-9dea-14509599d3dd.mp4
```
- `autoplay loop muted playsinline`，定位为 `left: 0; top: -30%`，370x790px，`object-fit: cover`，z-index 0。

**背景渐隐**（全屏遮罩，z-index 1）：
```css
linear-gradient(to bottom,
  rgba(20,21,29,0) 0%, rgba(20,21,29,0) 40%,
  rgba(20,21,29,0.55) 55%, rgba(20,21,29,0.92) 66%,
  #14151d 74%, #14151d 100%);
```

**标题**（左侧 28px，顶部 386px）：
- 字体：ITC Garamond Std Narrow，字重 500，26px，行高 1，颜色为白色
- 字间距 0.2px，text-shadow `0 0 18px rgba(120,180,220,0.35)`
- 文本："解锁 Pro："

**分隔线**（左侧 28px，顶部 418px，265x1px）：
- `linear-gradient(to right, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.30) 70%, rgba(255,255,255,0) 100%)`

**功能列表**（左侧 28px，顶部 429px，宽度 314px）：
每行高 24px，包含一个宽 22px 的图标区域 + 文本（13.5px，字重 400，白色，左侧边距 4px）。

所有图标均为 SVG，19x19（无限图标为 20x20），stroke #fff，stroke-width 1.7，无填充：

1. **图层图标**（路径：`M12 2 2 7l10 5 10-5-10-5Z` / `M2 12l10 5 10-5` / `M2 17l10 5 10-5`）-- "创建私人指南"
2. **手机图标**（rect 6,2.5 12x19 rx2.5 + 从 10.5,18.5 到 13.5,18.5 的线）-- "从社交媒体导入"
3. **无限图标**（路径：`M18.178 8c5.096 0 5.096 8 0 8-5.095 0-7.988-8-13.083-8-5.096 0-5.096 8 0 8 5.095 0 7.988-8 13.083-8z`）-- "无限指南"
4. **闪光图标**（路径：`M12 3c.4 3.6 1.4 4.6 5 5-3.6.4-4.6 1.4-5 5-.4-3.6-1.4-4.6-5-5 3.6-.4 4.6-1.4 5-5Z`）-- "AI 搜索"
5. **人物图标**（circle cx8.5 cy8 r3 + 身体路径 + 第二个人物轮廓）-- "与朋友协作"

**价格卡片**（左侧 28px，顶部 561px，314x123px）：

- **月付卡片**（左侧 0，144x123px，圆角半径 14px）：
  - 背景图片：`https://polo-pecan-73837341.figma.site/_assets/v11/ef4533e6536f2495088e56e0f98036b5ff15446d.png`（cover，居中）
  - 边框：1px solid `rgba(255,255,255,0.11)`
  - 内边距：14px 14px 15px 15px
  - “月付”标签（13px，字重 400）、“$20”价格（19px，字重 500，顶部边距 6px，字间距 0.3px）、左下角“按月计费”（12px）
  - 所有文本均为白色，并带有 `text-shadow: 0 1px 6px rgba(0,0,0,0.35)`

- **年付卡片**（左侧 154px，160x123px，圆角半径 14px）：
  - 背景：#1e212a，边框：1px solid `rgba(255,255,255,0.11)`
  - “年付”标签 + “按年计费”的颜色为 `rgba(255,255,255,0.50)`
  - “$200”价格的颜色为 `rgba(255,255,255,0.62)`
  - **优惠徽章**（左侧 15px，顶部 66px）：inline-flex 胶囊形，内边距 5px 8px，圆角半径 11px，背景 #4d5057，文本“节省 $40.00”（10.5px，字重 600，颜色 `rgba(255,255,255,0.65)`，字间距 0.2px）

**订阅按钮**（左侧 28px，顶部 709px，314x50px）：
- 白色背景，圆角半径 26px
- “订阅”文本：Helvetica Neue，16px，字重 500，颜色 #0c0c0e，-webkit-text-stroke 0.4px
- 右侧 chevron SVG：9x15，stroke #0c0c0e，stroke-width 2，路径 `M1.5 1.5 7 7.5 1.5 13.5`

---

### iOS 设备框架（两者复用）

- 宽度：370px，高度：790px，圆角半径：48px
- 浅色框架：背景 `#F2F2F7`；深色框架：背景 `#000`
- Box-shadow：`0 40px 80px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.12)`
- Dynamic Island：126x37px，圆角半径 24px，黑色，居中位于顶部 11px
- 状态栏时间：SF Pro 字重 590，17px，白色
- 状态栏图标：信号条（4 个 rect）、WiFi（3 条弧线 + 圆点）、电池（rect + 填充 + 凸点）-- 均为白色 SVG
- 主屏幕指示条：139x5px，圆角半径 100px，浅色框架使用 `rgba(0,0,0,0.25)` / 深色框架使用 `rgba(255,255,255,0.7)`

---

### 舞台布局

- 手机间距：70px
- 视口内边距：40px
- 背景：`#F4F4F4`
- 自动缩放 JS：测量舞台与视口尺寸，应用居中的 `transform: scale(min(1, fitRatio) * 0.95)`

---

### 入场动画

所有动画均暂停，直到向视口添加 `.ze-ready` class（在两个视频均触发 `loadeddata` + 字体就绪后添加，或在 5s 超时后添加）。

**使用的 Keyframes：**
- `zeBgSettle`：从 scale 1.12 + opacity 0 到 scale 1 + opacity 1（1.7s，用于背景）
- `zeReveal`：从 translateY(26px) + scale(0.985) + blur(7px) + opacity 0 到正常状态（0.9s）
- `zeDrop`：从 translateY(-16px) + scale(0.90) + opacity 0 到正常状态（0.9s）
- `zeLine`：从 scaleX(0) 到 scaleX(1)，transform-origin left（0.9s）
- `zePop`：从 translateY(8px) + scale(0.78) 到弹跳 scale(1.07)，再到 scale(1)（0.7s，spring easing）

**Easing：**`cubic-bezier(0.16, 1, 0.3, 1)`（expo-out）。优惠徽章使用 `cubic-bezier(0.34, 1.56, 0.64, 1)`（spring）。

**Stagger（屏幕 1）：**
- Hero bg：延迟 0s
- Logo（zeDrop）：0.45s
- 标题（zeReveal）：0.62s
- 副标题：0.78s
- 按钮：0.94s
- 条款：1.06s

**Stagger（屏幕 2）：**
- 视频 bg（zeBgSettle）：延迟 0.12s
- 标题（zeReveal）：0.58s
- 分隔线（zeLine）：0.72s
- 第 1-5 行（zeReveal）：0.80s、0.88s、0.96s、1.04s、1.12s
- 月付卡片：1.22s
- 年付卡片：1.30s
- 订阅按钮：1.42s
- 优惠徽章（zePop）：1.55s

**减少动态效果：**通过 `@media (prefers-reduced-motion: reduce)` 禁用所有动画。

-