/* ═══ cinematic.css v5 —— 原站之上的独立叠加层（删掉 <link> 即完全还原）═══

   ★ 一条必须如实记录的结论（2026-09-23 回源 style.css 后）：
     原站在 @media (min-width:641px) 里有一段「第五轮·桌面端背景深度升级」，
     注释引用了用户原话「网格不好看，要更现代、科技感、高级」，它已经做了：
       · 6 层 mesh gradient 多色光斑（L2050-2055）
       · 细噪点层 SVG feTurbulence（L2057）—— **正是 Vesper 用的那个做法**
       · 160deg 斜向底色（L2059）—— 已非 90/180 对称
       · .card 三层阴影 + !important（L2123-2129）
       · body::after 22s 呼吸光晕 blur(60px)（L2104-2113）
     即：我参照 Vesper/Nival "学来"的背景/颗粒/高度/呼吸感，**原站早已做得更足且是刻意的**。
     因此 v5 把我在这些区域的冗余覆盖全部撤除（它们要么被 @media 优先级挡住成为死代码，
     要么与 !important 打架，要么在做原站已有的事）。**留下的只有真正新增的东西。**

   v5 保留（均为新增，与原站无重叠）：
     ① 入场：Vesper 范式（静止态即可见，隐藏只发生在动画 0% 帧）
     ② 字体：display 微负字距 + 紧行高 + text-wrap 断行优化
     ③ 胶囊/按钮：扫光 + hover 辉光（Vesper 的 liquid-metal 语言）
     ④ 焦点环：:focus-visible（a11y，Nival 的 2px 主色环思路）
     ⑤ 头部氛围光（独立元素，不占原站伪元素）
     ⑥ 滚动进度条
     ⑦ 轻量 toast（role=status / aria-live=polite） */

/* ── ① 入场（Vesper 范式）───────────────────────────────────────────── */
.cine-in { animation: cineUp .8s cubic-bezier(.16, 1, .3, 1) both; animation-delay: var(--cine-d, 0ms); }
@keyframes cineUp { from { opacity: 0; transform: translateY(24px) } to { opacity: 1; transform: none } }
.cine-done { animation: none !important; opacity: 1 !important; transform: none !important; }

/* ── ② 字体：display 收紧（Vesper 的 -.045em / 1.12 思路的等效做法）──
   注：原站 h1 原本是正字距；大字号用**微负字距**更「挺」。CJK 不做大幅负字距（伤可读性）。 */
header.site h1 {
  font-weight: 400 !important;
  letter-spacing: -.005em !important;
  line-height: 1.16 !important;
}
header.site .sub { letter-spacing: .055em; line-height: 1.7; }
h2, .card > h2 { letter-spacing: -.005em; line-height: 1.35; }
h3 { letter-spacing: -.003em; }
thead th { letter-spacing: .075em; }
td.no, td.num, .tnum, .kpi .num { font-variant-numeric: tabular-nums; }
.kpi .n, .stat .n, .big-num { font-weight: 400; letter-spacing: -.02em; }
h1, h2, h3, .sec-title, .section-title { text-wrap: balance; }
p, .lede, .sub { text-wrap: pretty; }

/* ── ③ Vesper：胶囊/按钮扫光 + hover 辉光 ────────────────────────── */
.batch-nav, .logic-btn, .cal-toggle, #themeToggle {
  position: relative; overflow: hidden;
  transition: border-color .35s ease, box-shadow .35s ease, background .35s ease;
}
.batch-nav::after, .logic-btn::after, .cal-toggle::after, #themeToggle::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, .45) 48%, transparent 76%);
  transform: translateX(-130%); transition: transform .65s ease;
}
.batch-nav:hover::after, .logic-btn:hover::after,
.cal-toggle:hover::after, #themeToggle:hover::after { transform: translateX(130%); }
.batch-nav:not(:disabled):hover, .logic-btn:hover, #themeToggle:hover {
  box-shadow: 0 0 18px rgba(120, 165, 225, .28), inset 0 1px 0 rgba(255, 255, 255, .6);
}
html.dark .batch-nav:not(:disabled):hover, html.dark .logic-btn:hover, html.dark #themeToggle:hover {
  box-shadow: 0 0 20px rgba(76, 195, 221, .3), inset 0 1px 0 rgba(255, 255, 255, .14);
}

/* ── ④ 焦点环（a11y）──────────────────────────────────────────────── */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--primary, #4a7bb5); outline-offset: 2px; border-radius: 8px;
}
html.dark :where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline-color: #4cc3dd;
}
.avoid-card:focus-visible, .batch-nav:focus-visible, .logic-btn:focus-visible {
  box-shadow: 0 0 0 2px rgba(74, 123, 181, .28), 0 8px 20px rgba(46, 74, 101, .12);
}
html.dark .avoid-card:focus-visible, html.dark .batch-nav:focus-visible, html.dark .logic-btn:focus-visible {
  box-shadow: 0 0 0 2px rgba(76, 195, 221, .34), 0 8px 20px rgba(0, 0, 0, .4);
}

/* ── ⑤ 头部氛围光（独立元素，不占原站 header.site 的伪元素）───────── */
.cine-aura {
  position: absolute; inset: -30% -10%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 52% at 18% 30%, rgba(111, 180, 185, .30), transparent 70%),
    radial-gradient(34% 48% at 78% 22%, rgba(140, 120, 220, .26), transparent 72%),
    radial-gradient(46% 60% at 58% 92%, rgba(90, 150, 220, .22), transparent 74%);
  animation: cineDrift 26s cubic-bezier(.45, 0, .55, 1) infinite alternate;
  will-change: transform, opacity;
}
@keyframes cineDrift {
  0%   { transform: translate3d(-2.5%, -1.5%, 0) scale(1.02); opacity: .85 }
  50%  { transform: translate3d(1.5%, 1%, 0)      scale(1.06); opacity: 1 }
  100% { transform: translate3d(3%, 2.5%, 0)      scale(1.03); opacity: .9 }
}

/* ── ⑥ 滚动进度条 ─────────────────────────────────────────────────── */
#cineBar {
  position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 9999; pointer-events: none;
  background: linear-gradient(90deg, #4a7bb5, #5aa3a8); opacity: .9;
}

/* ── ⑦ 轻量 toast ─────────────────────────────────────────────────── */
.cine-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 18px);
  z-index: 10000; padding: 11px 18px; border-radius: 22px;
  background: rgba(38, 52, 74, .92); color: #fff; font-size: 13.5px; letter-spacing: .01em;
  opacity: 0; pointer-events: none; transition: opacity .24s ease, transform .24s ease;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
html.dark .cine-toast { background: rgba(11, 17, 32, .94); border: 1px solid rgba(76, 195, 221, .28); }
.cine-toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .cine-in, .cine-done { animation: none !important; opacity: 1 !important; transform: none !important; }
  .cine-aura { animation: none }
  #cineBar { display: none }
  .batch-nav::after, .logic-btn::after, .cal-toggle::after, #themeToggle::after { display: none }
}