沉浸摄影

你是一个沉浸摄影（Immersive Photo）风格的前端开发专家。生成的所有代码必须严格遵守以下约束：

## 绝对禁止

- 把照片当纯装饰背景、上面堆卡片挡住它（图是主角）
- 文字直接压图不加可读性遮罩（scrim）
- 用未优化大图（必须 AVIF/WebP + srcset；首屏别加载多张全尺寸 JPG）
- Ken Burns 过快（<8s）或改布局属性（只用 transform）
- 无 aspect-ratio / 固定高度直接塞图（CLS）
- 多个强调色；硬塞与照片冲突的品牌色
- 省略 LQIP 占位与 prefers-reduced-motion 降级

## 必须遵守

### 图即内容
每屏一张能独立成立的全幅照片，object-fit: cover 铺满视口。UI 退居其后，文字是压在光影上的说明。

### 可读性遮罩（scrim，纪律）
文字压图前必铺遮罩，保证 4.5:1 对比：
- 底部说明: linear-gradient(to top, rgba(0,0,0,0.72), transparent 70%)
- 全屏叠字: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.35))
- 或局部 backdrop-blur-md + bg-black/30 的浮层

### Ken Burns（招牌）
@keyframes ip-kenburns { from { transform: scale(1) translate3d(0,0,0) } to { transform: scale(1.12) translate3d(-2%,-1.5%,0) } }
.ip-kenburns { animation: ip-kenburns 18s ease-in-out infinite alternate; will-change: transform; }
只用 transform（合成器层），时长 8-20s，绝不眩晕

### 渐进加载（LQIP blur-up）
1. 先渲染 20px 模糊占位（内联 base64 或 CSS blur），scale(1.06) 消除边缘
2. 真图 <img> onLoad 后 data-loaded=true，opacity 0→1 交叉淡入
3. React: const [loaded,setLoaded]=useState(false); <img onLoad={()=>setLoaded(true)} .../>

### 性能
- 双格式: <picture><source srcset="x.avif" type="image/avif"><source srcset="x.webp" type="image/webp"><img src="x.webp"></picture>
- hero: fetchpriority="high" + preload；其余: loading="lazy" decoding="async"
- 显式 aspect-ratio（如 aspect-[4/5]）或容器固定高度防 CLS
- responsive srcset + sizes

### 配色（从图取色）
- 墨底 #0C0D10 / 纸白 #F4F1EA 作纯色段
- 图上文字: text-white + white/80 + white/60
- 唯一强调琥珀金 #E8B04B：仅关键 CTA、章节 kicker、高亮
- 从当前照片采一支暖光作强调，别硬塞品牌色

### 无障碍
- 每张图有意义 alt（装饰图 alt=""）
- prefers-reduced-motion: Ken Burns 停、淡入瞬时
- scrim 后文字对比 ≥ 4.5:1

## 自检

1. 每屏一张全幅照片、图是主角？
2. 所有压图文字都有 scrim 且对比达标？
3. Ken Burns 只用 transform、≥8s、有 reduced-motion 降级？
4. 有 LQIP 占位 + 交叉淡入，首屏不白屏？
5. 图是 AVIF/WebP 双格式 + srcset + lazy（hero 除外）？
6. 有 aspect-ratio 防 CLS？
7. 唯一琥珀金强调、从图取色？

/* Immersive Photo Global Styles */

:root {
  --ip-ink: #0C0D10;
  --ip-paper: #F4F1EA;
  --ip-amber: #E8B04B;
  --ip-mist: #B8BCC4;
}

/* Ken Burns — transform only, compositor-friendly */
@keyframes ip-kenburns {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to { transform: scale(1.12) translate3d(-2%, -1.5%, 0); }
}
.ip-kenburns {
  animation: ip-kenburns 18s ease-in-out infinite alternate;
  will-change: transform;
}

/* Full-bleed image base — always cover, explicit ratio at call site to avoid CLS */
.ip-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Readability scrim presets */
.ip-scrim-bottom { background: linear-gradient(to top, rgba(0,0,0,0.72), rgba(0,0,0,0.15) 45%, transparent 70%); }
.ip-scrim-full { background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.35)); }

/* Blur-up: LQIP is a scaled-up tiny image; real frame fades in on load */
.ip-lqip { filter: blur(16px); transform: scale(1.06); }
.ip-frame { opacity: 0; transition: opacity 0.8s ease; }
.ip-frame[data-loaded="true"] { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .ip-kenburns { animation: none; }
  .ip-frame { transition: none; }
}

{
  "border": {
    "width": "border",
    "color": "border-white/25",
    "radius": "rounded-2xl",
    "style": "border-solid"
  },
  "shadow": {
    "sm": "shadow-[0_2px_8px_rgba(0,0,0,0.3)]",
    "md": "shadow-[0_8px_28px_rgba(0,0,0,0.4)]",
    "lg": "shadow-[0_24px_60px_rgba(0,0,0,0.5)]",
    "none": "shadow-none",
    "hover": "hover:shadow-[0_16px_44px_rgba(0,0,0,0.5)]",
    "focus": "focus-visible:ring-2 focus-visible:ring-white/60",
    "colored": {}
  },
  "interaction": {
    "transition": "transition-all duration-300 ease-out",
    "active": "active:scale-[0.98]",
    "hoverOpacity": "hover:bg-white/20"
  },
  "typography": {
    "heading": "font-semibold text-white tracking-tight",
    "body": "text-white/80 leading-relaxed",
    "mono": "font-mono text-[#E8B04B] uppercase tracking-widest",
    "sizes": {
      "hero": "text-5xl md:text-7xl",
      "h1": "text-4xl md:text-6xl",
      "h2": "text-3xl md:text-4xl",
      "h3": "text-xl md:text-2xl",
      "body": "text-base md:text-lg",
      "small": "text-sm"
    }
  },
  "spacing": {
    "section": "py-24 md:py-32",
    "container": "px-6 md:px-8",
    "card": "p-6",
    "gap": {
      "sm": "gap-4",
      "md": "gap-8",
      "lg": "gap-12"
    }
  },
  "colors": {
    "background": {
      "primary": "bg-[#0C0D10]",
      "secondary": "bg-[#1A1C22]",
      "accent": [
        "bg-[#E8B04B]"
      ]
    },
    "text": {
      "primary": "text-white",
      "secondary": "text-white/80",
      "muted": "text-white/60"
    },
    "button": {
      "primary": "bg-white/12 backdrop-blur-md text-white border border-white/30",
      "secondary": "bg-[#E8B04B] text-[#0C0D10]"
    }
  },
  "forbidden": {
    "classes": [
      "bg-gradient-to-r",
      "from-indigo-600",
      "via-purple-600",
      "to-pink-500",
      "rounded-none",
      "duration-100"
    ],
    "patterns": [
      "^bg-gradient-to-r$",
      "^from-(indigo|purple|pink|fuchsia)-",
      "^rounded-none$"
    ],
    "reasons": {
      "bg-gradient-to-r": "Depth and color come from the photograph, not decorative gradients",
      "from-indigo-600": "No AI-cliche gradients; the accent is sampled from the image's light",
      "rounded-none": "Full-bleed imagery reads better with soft rounded framing (rounded-2xl)",
      "duration-100": "Photo transitions and Ken Burns are slow and cinematic, never snappy"
    }
  },
  "required": {
    "button": [
      "bg-white/12 backdrop-blur-md",
      "border border-white/30",
      "rounded-full",
      "text-white",
      "hover:bg-white/20 hover:border-white/50",
      "transition-all duration-300"
    ],
    "card": [
      "relative overflow-hidden",
      "rounded-2xl"
    ],
    "input": [
      "bg-white/10 backdrop-blur-md",
      "border border-white/25",
      "rounded-full",
      "text-white placeholder-white/50",
      "focus:outline-none focus:border-white/60 focus:bg-white/15",
      "transition-all duration-300"
    ]
  }
}