/* ============================================================
   雪原电影节 Snowfield Film Festival · 全站共享样式
   依据：前端风格定稿_雪原电影节_2026-08-02.md
   2026-08-02 改色：作品定性为 vibe coding（非 AIGC），主题色对齐
   官方海报「志慧少年AI营」蓝天油画——日场主色 朱砂红→海报蓝 #2B7BD5，
   夜场主色 鎏金→冰蓝 #9CCBF0（金色 rgba(212,175,106,*) 一并替换）。
   约束：自包含，无任何外链字体/CDN（站点自己先做到要求学生做到的事）
   用法：<link rel="stylesheet" href="assets/festival.css">
         <html data-mode="day"> 或 "night"，整组变量切换
   提供：设计 token（日/夜双模式）、胶片颗粒、暗角、晕染切换层、
         品牌署名 .brandmark、按钮 .btn-primary/.btn-ghost、
         章节头 .sec-head、风线 .wind、滚动浮现 .reveal、冰蓝渐变字 .gold-text
   页面专属布局写在各页面 <style> 里，变量全部从这里取。
   ============================================================ */

/* ---------- 1. 设计 Token：同一部电影的日场与夜场 ---------- */
:root, html[data-mode="day"] {
  --bg: #F7F5F0;            /* 雪原白（带暖） */
  --bg-soft: #EFEBE3;
  --ink: #141414;           /* 墨色 */
  --ink-soft: #3A3A3A;
  --accent: #2B7BD5;        /* 海报蓝 · 雪地一线天（面积 ≤5%，采样自官方海报 #5CA2E1 加深） */
  --accent-2: #1657B8;      /* 海报深蓝（辅助） */
  --line: #D9DEE6;          /* 细线 */
  --muted: #8A919C;         /* 次要文字 */
  --card-bg: #FFFFFF;
  --card-line: #D9DEE6;
  --poster-mark: #8A919C;
  --gold-glow: none;
  --grain-opacity: .02;
  --vignette: transparent;
  --star: rgba(255,255,255,.9);          /* 白天粒子 = 雪粒 */
  --ease-wind: cubic-bezier(0.16, 1, 0.3, 1);
  --serif: "Source Han Serif SC", "Noto Serif CJK SC", "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --display: "Cinzel", "Didot", "Bodoni MT", "Times New Roman", var(--serif);
  --sans: "Source Han Sans SC", "Noto Sans CJK SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", "Menlo", "Consolas", monospace;
}
html[data-mode="night"] {
  --bg: #0A0A0C;            /* 深夜蓝黑 */
  --bg-soft: #101014;
  --ink: #F2F4F8;           /* 微光白（带一点蓝） */
  --ink-soft: #C4CDDA;
  --accent: #9CCBF0;        /* 冰蓝（夜场主色） */
  --accent-2: #2C4E86;      /* 深夜蓝（辅助，原红毯酒红位） */
  --line: rgba(156,203,240,.22);
  --muted: #5A5E68;
  --card-bg: #121216;
  --card-line: rgba(156,203,240,.28);
  --poster-mark: #9CCBF0;
  --gold-glow: 0 0 24px rgba(156,203,240,.25);
  --grain-opacity: .05;
  --vignette: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.5) 100%);
  --star: rgba(156,203,240,.85);         /* 夜晚粒子 = 冰蓝星粒 */
}

/* ---------- 2. 基础 ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background .8s var(--ease-wind), color .8s var(--ease-wind);
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent); color: var(--bg); }
img { display: block; }

/* 胶片颗粒：2% 透明噪点，"电影海报"与"网页"的分水岭 */
body::after {
  content: ""; position: fixed; inset: -50%; z-index: 200; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: var(--grain-opacity);
  animation: grain 8s steps(10) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0) } 20% { transform: translate(-4%,3%) }
  40% { transform: translate(3%,-4%) } 60% { transform: translate(-3%,-2%) }
  80% { transform: translate(4%,2%) }
}

/* 夜晚四角暗角（放映机光路）：页面放一个 <div class="vignette"></div> */
.vignette {
  position: fixed; inset: 0; z-index: 199; pointer-events: none;
  background: var(--vignette); transition: background .8s;
}

/* 日/夜晕染切换层：新底色从点击处 radial 晕染开，禁止硬切
   页面放一个 <div class="bleed" id="bleed"></div>，切换时加 .run */
.bleed {
  position: fixed; inset: 0; z-index: 198; pointer-events: none;
  background: var(--bleed-color, transparent);
  clip-path: circle(0% at var(--bx, 50%) var(--by, 50%));
}
.bleed.run { transition: clip-path .9s var(--ease-wind); clip-path: circle(150% at var(--bx, 50%) var(--by, 50%)); }

/* ---------- 3. 品牌署名：小小精致，字越小气场越大 ---------- */
.brandmark { user-select: none; line-height: 1; }
.brandmark .cn {
  font-family: var(--serif); font-weight: 600;
  font-size: 12px; letter-spacing: .5em; color: var(--ink);
}
.brandmark .en {
  margin-top: 7px; display: flex; align-items: center; gap: 10px;
  font-family: var(--display); font-size: 10px; letter-spacing: .4em;
  color: var(--muted); text-transform: uppercase; white-space: nowrap;
}
.brandmark .en::before, .brandmark .en::after {
  content: ""; height: 1px; width: 28px; background: var(--line);
}

/* ---------- 4. 按钮 ---------- */
.btn-primary {
  display: inline-block; font-family: var(--sans); font-weight: 500;
  font-size: 13px; letter-spacing: .35em; text-indent: .35em;
  padding: 14px 40px; background: var(--accent); color: #F7F5F0;
  border: none; cursor: pointer;
  transition: transform .3s var(--ease-wind), box-shadow .3s;
}
html[data-mode="night"] .btn-primary { color: #0A0A0C; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--gold-glow), 0 8px 24px rgba(0,0,0,.12); }
.btn-ghost {
  display: inline-block; font-size: 13px; letter-spacing: .35em;
  color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 4px;
  cursor: pointer; background: none; border-top: none; border-left: none; border-right: none;
  font-family: var(--sans);
  transition: border-color .3s, color .3s;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- 5. 章节头（远景构图里的秩序） ---------- */
.sec-head { display: flex; align-items: baseline; gap: 32px; }
.sec-no {
  font-family: var(--display); font-size: 12px; letter-spacing: .4em; color: var(--accent);
}
.sec-title {
  font-family: var(--serif); font-weight: 900; margin: 0;
  font-size: clamp(30px, 4vw, 56px); letter-spacing: .08em; line-height: 1.1;
}
.sec-side {
  margin-left: auto; font-family: var(--mono); font-size: 10px;
  letter-spacing: .3em; color: var(--muted); writing-mode: vertical-rl;
}

/* ---------- 6. 风的线条（所有动效统一风向 ↙） ----------
   <div class="wind" id="wind"></div> 由 JS 撒 <i>，或手写若干 <i style="..."> */
.wind { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.wind i {
  position: absolute; height: 1px; border-radius: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
  transform: rotate(-8deg);
  animation: gust linear infinite;
  opacity: 0;
}
@keyframes gust {
  0%   { transform: translateX(20vw) rotate(-8deg); opacity: 0; }
  15%  { opacity: .9; }
  85%  { opacity: .9; }
  100% { transform: translateX(-130vw) rotate(-8deg); opacity: 0; }
}

/* ---------- 7. 冰蓝渐变字（夜晚奖项/标题；类名沿用 .gold-text） ---------- */
.gold-text {
  background: linear-gradient(160deg, #EDF6FF 10%, #9CCBF0 45%, #3E6FAE 95%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- 8. 滚动浮现：一次只进一组 ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease-wind), transform .9s var(--ease-wind); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- 9. 降级 ---------- */
@media (max-width: 760px) {
  .sec-side { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
