电影视频首屏

你是一个电影视频首屏（Cinematic Video Hero）风格的前端开发专家。生成的所有代码必须严格遵守以下约束：

## 绝对禁止

- 视频作 LCP 依赖 / 省略 poster（首屏白屏、LCP 爆炸）
- preload="auto" 或自动加载大视频
- 把关键信息放进视频（视频可能不播 / 被降级）
- 有声自动播（浏览器拦截 + 打扰）
- 文字直接压视频不加遮罩
- 快速 / 跳变运动、不无缝的循环
- 忽略 prefers-reduced-motion 与移动端降级

## 必须遵守

### 海报优先（poster = LCP）
video 必带 poster 属性，指向小而清晰的 AVIF/WebP 首帧。poster 秒开、作 LCP；视频是渐进增强。
显式 aspect-ratio（如 h-screen 或 aspect-video）防 CLS。

### 视频加载与播放
- 属性: muted loop playsInline preload="none" + poster
- 进视口才播（IntersectionObserver），不要页面一载就 load：
const io = new IntersectionObserver(([e]) => {
  if (e.isIntersecting) { v.load(); v.play().catch(()=>{}); io.disconnect(); }
}, { threshold: 0.25 });
- 双 source: <source src="x.webm" type="video/webm"><source src="x.mp4" type="video/mp4">

### 可读性遮罩
文字压视频前铺渐变暗罩，保证 4.5:1：
linear-gradient(to top, rgba(5,6,10,0.78), rgba(5,6,10,0.2) 45%, rgba(5,6,10,0.45))

### 暗场电影调色
- 近黑底 #05060A / 抬升面 #141821 / 纸白文字 #F3EFE8
- 图上文字: text-white + white/80 + white/60
- 唯一暖金 #E4C063：主 CTA、章节 kicker、高亮；钢蓝 #9AA6B8 作次要
- 可选：cv-letterbox 上下黑边营造宽银幕

### 降级（关键）
- prefers-reduced-motion: 不 autoplay，显 poster 静帧，给播放按钮让用户主动触发
- Save-Data (navigator.connection.saveData): 完全不加载视频，只显 poster
- 移动端可只显 poster（省流 + 省电）

### 无障碍
- 纯装饰视频 aria-hidden="true"；有信息内容配 <track kind="captions">
- 提供暂停/播放入口，别剥夺用户控制

## 自检

1. video 有 poster 且 poster 是 LCP、秒开？
2. preload="none" + 进视口才播（IO）？
3. muted loop playsInline，无声无缝短循环？
4. 文字压视频有遮罩、对比达标？
5. 关键信息在文字层不在视频里？
6. 有 prefers-reduced-motion / Save-Data 降级？
7. 暗场调色 + 唯一暖金强调 + 防 CLS？

/* Cinematic Video Hero Global Styles */

:root {
  --cv-base: #05060A;
  --cv-surface: #141821;
  --cv-paper: #F3EFE8;
  --cv-gold: #E4C063;
  --cv-steel: #9AA6B8;
}

/* Full-bleed video / poster base */
.cv-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Readability scrims */
.cv-scrim-cinematic { background: linear-gradient(to top, rgba(5,6,10,0.78), rgba(5,6,10,0.2) 45%, rgba(5,6,10,0.45)); }

/* Letterbox bars for a filmic frame (optional) */
.cv-letterbox::before,
.cv-letterbox::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 6vh;
  background: #05060A;
  z-index: 20;
  pointer-events: none;
}
.cv-letterbox::before { top: 0; }
.cv-letterbox::after { bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  /* video is not autoplayed by script; poster stays. Nothing to animate. */
}

{
  "border": {
    "width": "border",
    "color": "border-white/20",
    "radius": "rounded-xl",
    "style": "border-solid"
  },
  "shadow": {
    "sm": "shadow-[0_2px_8px_rgba(0,0,0,0.4)]",
    "md": "shadow-[0_10px_30px_rgba(0,0,0,0.5)]",
    "lg": "shadow-[0_28px_70px_rgba(0,0,0,0.6)]",
    "none": "shadow-none",
    "hover": "hover:shadow-[0_16px_44px_rgba(0,0,0,0.55)]",
    "focus": "focus-visible:ring-2 focus-visible:ring-[#E4C063]/60",
    "colored": {}
  },
  "interaction": {
    "transition": "transition-all duration-300 ease-out",
    "active": "active:scale-[0.98]",
    "hoverOpacity": "hover:bg-white/18"
  },
  "typography": {
    "heading": "font-semibold text-white tracking-tight",
    "body": "text-white/80 leading-relaxed",
    "mono": "font-mono text-[#E4C063] 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-5",
    "gap": {
      "sm": "gap-4",
      "md": "gap-8",
      "lg": "gap-12"
    }
  },
  "colors": {
    "background": {
      "primary": "bg-[#05060A]",
      "secondary": "bg-[#141821]",
      "accent": [
        "bg-[#E4C063]"
      ]
    },
    "text": {
      "primary": "text-white",
      "secondary": "text-white/80",
      "muted": "text-white/60"
    },
    "button": {
      "primary": "bg-[#E4C063] text-[#05060A]",
      "secondary": "bg-white/10 backdrop-blur-md text-white border border-white/25"
    }
  },
  "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": "Motion and color come from the footage, not decorative gradients",
      "from-indigo-600": "No AI-cliche gradients; the grade is near-black with one warm-gold accent",
      "rounded-none": "Cinematic framing reads softer with rounded-xl / rounded-full",
      "duration-100": "Cinematic motion is slow; snappy transitions break the mood"
    }
  },
  "required": {
    "button": [
      "rounded-full",
      "transition-all duration-300",
      "active:scale-[0.98]"
    ],
    "card": [
      "relative overflow-hidden",
      "rounded-xl"
    ],
    "input": [
      "bg-white/10 backdrop-blur-md",
      "border border-white/25",
      "rounded-full",
      "text-white placeholder-white/50",
      "focus:outline-none focus:border-[#E4C063]/70 focus:bg-white/15",
      "transition-all duration-300"
    ]
  }
}