/* ============================================================
   theme.css — 草案A 毛玻璃暗色 × 霞鹜文楷 主题变量层
   兵部 2026-06-08 P0 | 纯叠加覆盖，不改 style.css 主体
   设计原则（遵二改铁律）：只管外观/布局，不控内容可见性；
   动画 observer 失效也不影响可读；图走 OSS 不经此层。
   ============================================================ */

/* ---------- 1. 主题变量层（复用现有 --accent 紫色体系，新增毛玻璃/字体/圆角 token） ---------- */
:root{
  /* 字体：霞鹜文楷子集 优先，回退系统 */
  --font-story: "LXGW WenKai", "霞鹜文楷", "Noto Serif SC", ui-serif, serif;

  /* 毛玻璃 token */
  --glass-bg:        rgba(18,12,32,0.55);
  --glass-bg-strong: rgba(12,8,24,0.78);
  --glass-blur:      16px;
  --glass-border:    rgba(168,139,250,0.22);
  --glass-hi:        rgba(255,255,255,0.10);
  --glass-shadow:    0 8px 32px rgba(0,0,0,0.45), inset 0 1px 0 var(--glass-hi);

  /* 入场动画时长（统一调速） */
  --anim-in:   .45s;
  --anim-fast: .28s;
  --ease-out:  cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. 互动故事正文用霞鹜文楷（仅正文/对话，UI 按钮保持原字体） ---------- */
.ti-dialogue-text,
.ms-narr,
.ms-line,
.ti-skit-narr,
.ti-char-name{
  font-family: var(--font-story);
}
.ti-dialogue-text{ letter-spacing:.3px; }

/* ---------- 3. 对话框毛玻璃强化（在现有半透明基础上叠加 blur + 高光描边） ---------- */
.ti-dialogue{
  background: linear-gradient(to bottom, transparent, var(--glass-bg) 22%, var(--glass-bg-strong) 100%);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
  border:1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

/* ---------- 4. 选项卡毛玻璃化（ms-choice / srem-choice 统一外观） ---------- */
.ms-choice,
.srem-choice{
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border:1px solid var(--glass-border);
  border-radius:12px;
  box-shadow: var(--glass-shadow);
  transition: transform .15s var(--ease-out), background .15s, border-color .15s;
}
.ms-choice:active,
.srem-choice:active{
  transform: scale(.97);
  border-color: var(--accent, #a78bfa);
  background: var(--glass-bg-strong);
}

/* ============================================================
   5. 入场动画（@keyframes，纯锦上添花）
   铁律：内容默认 opacity:1 可见；动画只是从初态过渡到终态，
   即便动画类未加 / prefers-reduced-motion，也照常可见。
   ============================================================ */
@keyframes thm-fade-up{
  from{ opacity:0; transform:translateY(14px); }
  to  { opacity:1; transform:translateY(0); }
}
@keyframes thm-char-in{
  from{ opacity:0; transform:translateY(22px) scale(1.015); }
  to  { opacity:1; transform:translateY(0)    scale(1); }
}
@keyframes thm-choice-pop{
  0%  { opacity:0; transform:translateY(10px) scale(.96); }
  60% { opacity:1; transform:translateY(0)    scale(1.02); }
  100%{ opacity:1; transform:translateY(0)    scale(1); }
}

/* 立绘入场：在现有 --loaded 呼吸动画前叠一段入场（不覆盖呼吸） */
.ti-character.thm-anim-in{ animation: thm-char-in var(--anim-in) var(--ease-out) both; }

/* 对话框首次出现 */
.ti-dialogue.thm-anim-in{ animation: thm-fade-up var(--anim-in) var(--ease-out) both; }

/* 选项逐个弹出（JS 给每个 choice 设 --i 序号做 stagger；缺省 0） */
.ms-choices .ms-choice.thm-anim-in,
.srem-choices .srem-choice.thm-anim-in{
  animation: thm-choice-pop var(--anim-fast) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * .06s);
}

/* 旁白/台词逐段淡入 */
.ms-narr.thm-anim-in,
.ms-line.thm-anim-in{ animation: thm-fade-up var(--anim-fast) var(--ease-out) both; }

/* 守铁律：用户开了减动 → 全部直接到位，不动 */
@media (prefers-reduced-motion: reduce){
  .ti-character.thm-anim-in,
  .ti-dialogue.thm-anim-in,
  .ms-choice.thm-anim-in,
  .srem-choice.thm-anim-in,
  .ms-narr.thm-anim-in,
  .ms-line.thm-anim-in{ animation:none !important; }
}