咖啡奖励

在 phone mockup frame 内构建一个移动端咖啡个人资料界面。使用原生 HTML、CSS 和 JS，并以 Vite 作为 bundler。设计采用深色暖色调，灵感来自带有 glassmorphic UI 元素的 iOS 个人资料界面。

**Phone mockup：**
- 390x844px，zoom 0.78，黑色背景，44px border-radius，overflow hidden，强烈的 drop shadow
- 内部 `.screen` div 使用深色背景（`#180a06`），支持垂直滚动，隐藏 scrollbar

**Hero section（顶部）：**
- 全宽，高 430px
- 包含一个循环、静音、自动播放的视频：`https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260707_003042_3d2380a6-1ce6-4407-a2e2-cfec46546407.mp4`
- 视频覆盖整个区域，设置 `object-fit: cover; object-position: center top`
- 底部 gradient overlay，从 52% 处的 transparent 渐变至 100% 处的背景色
- Top bar 包含两个玻璃质感圆形按钮（左侧为编辑图标，右侧为 X 关闭 SVG），使用 absolute 定位，top 18px

**身份信息区（通过 margin-top: -112px 与 hero 重叠）：**
- 居中显示名称 "Dasha"（28px，weight 500）
- 名称左右两侧分别放置月桂图像（本地资源 `/assets/images/laurel-left.png` 和 `laurel-right.png`），高 73px，0.6 opacity，通过 `right: calc(50% + 66px)` / `left: calc(50% + 66px)` 定位
- 下方副标题 "Plum Parfait Latte"（15px，柔和色 `rgba(235, 220, 205, 0.55)`）

**成就 pill（居中，位于身份信息区下方 30px）：**
- 玻璃质感 pill 按钮，高 54px，宽 225px，27px border-radius
- 奖杯图标（本地 `/assets/images/icon-trophy.png`，18px）+ 文本 "12 achievements"（18px，weight 500）

**统计数据网格（3 columns，12px gap，顶部 padding 26px，水平 padding 16px）：**
- 每张卡片：半透明背景 `rgba(255,255,255,0.06)`，24px border-radius
- 卡片 1：咖啡图像 `https://polo-pecan-73837341.figma.site/_assets/v11/a8ba62db54d1e331b7beb36d69308e9b92516b99.png`（84x84），数字 "154"，标签 "drinks consumed"
- 卡片 2：三明治图像 `https://polo-pecan-73837341.figma.site/_assets/v11/953600065119f54f64ab9edb076b3cbb289fcff8.png`（84x84），数字 "36"，标签 "sandwiches eaten"
- 卡片 3：咖啡馆图像 `https://polo-pecan-73837341.figma.site/_assets/v11/aef68e05f729a30ed177f74c2cece578c05bfdba.png`（84x84），数字 "12"，标签 "cafes visited"
- 数字：25px，weight 500。标签：13px，颜色 `#BAAA9A8C`

**收藏卡片（位于统计数据下方 12px，水平 margin 16px）：**
- 使用相同的卡片背景，24px radius，高 110px，采用 flex row，gap 16px
- Latte 图像 `https://polo-pecan-73837341.figma.site/_assets/v11/976a811111808abc50be33c2483872dbdb6ad5a8.png`（108x108，object-fit contain）
- 文本列："Favorite"（13px，weight 500）、"Latte"（19px，weight 500）、"Ordered 73 times"（13px，颜色 `#BAAA9A8C`）
- 右侧为 Shuffle 按钮（玻璃质感圆形按钮，本地图标 `/assets/images/icon-shuffle.png`，19px）

**部分显示的下一张卡片：** 使用相同的卡片样式，但仅高 34px，底部为直角（作为滚动提示）

**玻璃按钮系统：**
- 共享 `.glass` class：无 border，`rgba(255,255,255,0.03)` 背景，使用细微 inset box-shadows 形成边缘高光，`backdrop-filter: blur(2px) saturate(1.3)`，在 `:active` 时缩小
- `.glass.circle`：58x44px，22px radius
- `.glass.pill`：高 54px，pill-shaped

**字体：**
- Primary："Neue Haas Unica"（从本地 `/assets/fonts/neue-haas-unica/stylesheet.css` 加载）
- 同时从 `/assets/fonts/helvetica-now/stylesheet.css` 加载 "Helvetica Now Display"
- Fallbacks：-apple-system、SF Pro Display、Inter、Segoe UI、Roboto

**页面背景（phone 后方）：**
- 在 `#070402` 上叠加多个暖色调 radial gradients：
  - `radial-gradient(ellipse 65% 55% at 15% 52%, rgba(168, 78, 10, 0.22))`
  - `radial-gradient(ellipse 52% 48% at 83% 26%, rgba(122, 52, 8, 0.17))`
  - `radial-gradient(ellipse 44% 52% at 56% 92%, rgba(98, 36, 5, 0.14))`
  - `radial-gradient(ellipse 30% 30% at 72% 75%, rgba(60, 20, 5, 0.10))`

**入场动画（遵循 prefers-reduced-motion）：**
- Hero：`heroReveal`——从 opacity 0 + scale(1.01) 过渡至正常状态，1.9s，cubic-bezier(0.16, 1, 0.3, 1)
- Top bar 按钮：`dropIn`，从 translateY(-10px) 开始，0.7s，依次延迟 0.35s/0.42s
- 月桂：`fadeIn` 0.8s，delay 0.5s
- 名称：`fadeRise`，从 translateY(16px) 开始，0.7s，delay 0.5s
- 副标题：同上，delay 0.58s
- 成就：同上，delay 0.66s
- 统计卡片：依次在 0.74s、0.80s、0.86s 开始
- 收藏卡片：delay 0.94s
- 下一张卡片：fadeIn delay 1.02s
- 除使用 ease-out 的简单 fadeIn 外，其他动画均使用 cubic-bezier(0.16, 1, 0.3, 1)

**JavaScript（liquid glass 效果）：**
- 根据每个 `[data-liquid]` 元素的尺寸和 border-radius 生成 displacement map canvas
- 使用圆角矩形的 SDF (signed distance field) 计算折射向量
- 创建 SVG `<feDisplacementMap>` filters，并以 `backdrop-filter: url(#id) blur(0.3px) saturate(1.3)` 应用
- 如果不支持 SVG filter，则回退至标准 blur

**CSS 变量：**
```
--bg: #180a06
--card: rgba(255, 255, 255, 0.06)
--text: #ede4d8
--muted: rgba(235, 220, 205, 0.55)
--radius-card: 24px
```

**响应式：** 在 440px viewport 下，phone 缩放至 zoom 0.6。Body 在 900px 时启用 flex-wrap。