/* ============================================================
   KA Studio — 明亮主题 v3
   覆盖 styles-v2.css 的冷蓝深色玻璃系统：
   冷白底 + 深蓝灰文字 + 深金/深青点缀，hero 像素图保留为深色焦点。
   布局、动效、衬线排版全部继承 v2，此处只换配色。
   ============================================================ */

:root {
  --ink: #182630;
  --muted: #5c7280;
  --night: #f5f7f9;
  --night-2: #e9eef2;
  --panel: rgba(255, 255, 255, .66);
  --panel-solid: #ffffff;
  --violet: #20323f;
  --violet-2: #46616f;
  --gold: #b98a2f;
  --aqua: #1f8f82;
  --line: rgba(24, 46, 60, .13);
  --glow: rgba(31, 143, 130, .16);
  --radius: 22px;
  --max: 1240px;
  --mx: 0px;
  --my: 0px;
}

/* 页面底色：冷白 + 柔和青/金光斑 */
body {
  color: var(--violet);
  background:
    radial-gradient(circle at 82% 8%, rgba(31, 143, 130, .1), transparent 30rem),
    radial-gradient(circle at 10% 38%, rgba(185, 138, 47, .07), transparent 26rem),
    radial-gradient(circle at 50% 92%, rgba(31, 110, 160, .08), transparent 34rem),
    var(--night);
}

/* 噪声纹理降轻，避免压暗浅色底 */
body::before { opacity: .08; mix-blend-mode: soft-light; }

::selection { color: var(--ink); background: rgba(31, 143, 130, .2); }
html { scrollbar-color: var(--aqua) var(--night); }
:focus-visible { outline-color: var(--aqua); }

/* ============ 顶栏：白色玻璃 ============ */
.site-header {
  color: var(--violet);
  background: rgba(255, 255, 255, .72);
  border-color: var(--line);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  box-shadow: inset 0 -1px rgba(24, 46, 60, .06);
}
.site-header.scrolled {
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 14px 42px rgba(24, 46, 60, .08), inset 0 -1px rgba(24, 46, 60, .08);
}

.nav, .brand { border-color: var(--line); }
.brand { color: var(--ink); }
.brand-mark { color: #fff; background: var(--ink); }

.nav-links a,
.domain,
.menu-toggle { color: var(--muted); border-color: var(--line); }
.nav-links a:hover,
.nav-links a[aria-current="true"] { color: var(--ink); background: rgba(31, 143, 130, .09); }
.domain::before { border-color: var(--aqua); background: var(--aqua); box-shadow: 0 0 0 3px rgba(31, 143, 130, .14); }
.scroll-progress span { background: var(--gold); }

/* ============ HERO：白色玻璃浮层（深色像素图之上） ============ */
.container.hero { color: var(--violet); }

.hero > div:first-child {
  border: 1px solid rgba(24, 46, 60, .12);
  border-radius: 20px;
  color: var(--violet);
  background: linear-gradient(135deg, rgba(255, 255, 255, .84), rgba(255, 255, 255, .6));
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  backdrop-filter: blur(26px) saturate(150%);
  box-shadow: 0 28px 80px rgba(24, 46, 60, .16), inset 0 1px rgba(255, 255, 255, .9);
}

.hero .eyebrow { color: var(--gold); }
.hero h1,
.hero-copy,
.hero-meta,
.scroll-cue { color: var(--ink); }
.hero h1 { text-shadow: 0 10px 34px rgba(24, 46, 60, .08); }
.hero h1 span {
  color: transparent;
  -webkit-text-stroke: 1px rgba(24, 38, 48, .85);
}
.scroll-cue { border-color: rgba(24, 46, 60, .16); }

.hero .button.primary { color: #fff; border-color: var(--ink); background: var(--ink); }
.hero .button:not(.primary) { color: var(--ink); background: rgba(255, 255, 255, .5); }

/* ============ 按钮 ============ */
.button {
  color: var(--ink);
  border-color: var(--line);
  background: rgba(255, 255, 255, .5);
  box-shadow: inset 0 1px rgba(255, 255, 255, .8);
}
.button:hover {
  border-color: rgba(31, 143, 130, .45);
  background: rgba(31, 143, 130, .08);
  box-shadow: 0 10px 28px rgba(24, 46, 60, .08), inset 0 1px rgba(255, 255, 255, .8);
}
.button.primary { color: #fff; border-color: var(--ink); background: var(--ink); }
.button.primary:hover { border-color: var(--ink); background: #263b49; }

/* ============ Ticker ============ */
.ticker {
  border-color: var(--line);
  background: rgba(255, 255, 255, .6);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.ticker-track { color: var(--muted); }
.ticker-track span::before { color: var(--gold); }

/* ============ Section 头 ============ */
.section-head {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: inset 0 1px rgba(255, 255, 255, .8);
}
.section h2 { color: var(--ink); }
.section-note { color: var(--muted); border-color: var(--line); }
.eyebrow { color: var(--gold); }

/* ============ Spells 区 ============ */
#spells { color: var(--violet); }

.spell-list,
.spell-panel {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .62));
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 24px 70px rgba(24, 46, 60, .1), inset 0 1px rgba(255, 255, 255, .9);
}
.spell-list { border-right: 1px solid var(--line); }

.spell-tab { color: var(--muted); border-color: var(--line); }
.spell-tab:hover { color: var(--ink); background: rgba(31, 143, 130, .06); }
.spell-tab.active {
  color: var(--ink);
  border-color: rgba(31, 143, 130, .35);
  background: linear-gradient(90deg, rgba(31, 143, 130, .12), rgba(31, 143, 130, .04));
  box-shadow: inset 3px 0 var(--aqua);
}
.spell-tab .num { color: var(--gold); }
.spell-tab.active .num { color: var(--aqua); }

.spell-info { border-color: var(--line); }
.spell-panel h3 { color: var(--ink); }
.spell-description { color: var(--muted); }
.spell-panel::before,
.spell-panel::after { color: var(--gold); opacity: .5; }
.spell-tags span { border-color: var(--line); color: var(--muted); }
.spell-info .button.primary { color: #fff; border-color: var(--ink); background: var(--ink); }

/* Demo 区：浅色网格底 */
.demo {
  background:
    linear-gradient(rgba(24, 46, 60, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24, 46, 60, .05) 1px, transparent 1px),
    var(--night-2);
  background-size: 42px 42px;
}
.demo-label { color: var(--muted); }
.demo-caption { fill: var(--muted); }

/* Demo 内部 SVG/舞台：深蓝灰前景 */
.demo-watermark,
.auto-ka { stroke: rgba(31, 143, 130, .2); }
.audio-ka-outline { fill: rgba(31, 143, 130, .1); stroke: var(--violet); }
.audio-fill-rect { fill: var(--gold); }
.audio-mini-bars rect { fill: var(--violet); }
.image-fill { fill: var(--violet); }
.image-shadow { fill: rgba(24, 46, 60, .25); }
.ms-shadow { fill: rgba(24, 46, 60, .3); stroke: rgba(24, 46, 60, .3); }
.ms-outer { stroke: var(--aqua); }
.ms-inner { stroke: var(--gold); }
.auto-subject,
.automask-demo .auto-ka { fill: var(--violet); }
.auto-drag-area { fill: rgba(31, 143, 130, .05); }
.auto-mask-fill { fill: rgba(31, 143, 130, .1); }
.outline-nodes circle { fill: var(--night-2); }

.duang-word { color: var(--violet); }
.duang-word span:nth-child(2) { color: var(--gold); }
.impact-floor { background: var(--violet); }
.impact-ring { border-color: var(--gold); }

.level-columns { border-color: var(--line); }
.level-columns span { color: var(--violet); border-color: var(--line); background: rgba(31, 143, 130, .07); }
.levels-scale { color: var(--muted); }
.levels-scan { background: var(--gold); box-shadow: 0 0 16px var(--gold); }
.demo-html-caption { color: var(--muted); }

/* 色阶贴图演示的颜色循环：覆盖 v2 keyframes 里的硬编码背景 */
@keyframes color-map-cycle {
  0%, 24% { color: var(--violet); background: rgba(31, 143, 130, .08); }
  25%, 49% { color: var(--gold); background: rgba(185, 138, 47, .1); }
  50%, 74% { color: var(--aqua); background: rgba(31, 143, 130, .1); }
  75%, 100% { color: #b0567f; background: rgba(176, 86, 127, .1); }
}

/* ============ Archives 区 ============ */
#archives { color: var(--violet); }
#archives .section-head,
#archives .section-note,
#archives .eyebrow { color: var(--muted); border-color: var(--line); }

.archive-grid { border: 1px solid var(--line); }
.archive-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--violet);
  background: linear-gradient(145deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .64));
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 22px 60px rgba(24, 46, 60, .1), inset 0 1px rgba(255, 255, 255, .9);
}
.archive-card:last-child { border-right: 1px solid var(--line); }
.archive-card::after { color: rgba(24, 46, 60, .07); }
.archive-card::before {
  opacity: .12;
  background: repeating-linear-gradient(105deg, transparent 0 18px, rgba(24, 46, 60, .08) 19px 20px);
}
.archive-card:nth-child(2)::before {
  background: radial-gradient(circle at center, transparent 0 22%, rgba(24, 46, 60, .1) 22.5% 23%, transparent 23.5% 35%, rgba(24, 46, 60, .1) 35.5% 36%, transparent 36.5%);
}
.archive-card:nth-child(3)::before {
  background: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: .16;
}
.archive-card .work-no,
.archive-card h3,
.archive-card p,
.work-tags { color: var(--violet); }
.work-tags { border-color: var(--line); }

/* ============ About 区 ============ */
.about-copy,
.manifesto {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .6));
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 22px 60px rgba(24, 46, 60, .1), inset 0 1px rgba(255, 255, 255, .9);
}
.about-copy { border-right: 1px solid var(--line); }
.about-copy p { color: var(--violet); }
.manifesto { color: var(--violet); }
.manifesto div { border-color: var(--line); }
.manifesto strong { color: var(--aqua); }
.manifesto span { color: var(--muted); }

/* ============ Footer ============ */
footer {
  color: var(--violet);
  border-color: var(--line);
  background: linear-gradient(145deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .55));
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.footer-title { color: var(--ink); }
.footer-meta { color: var(--muted); }
footer .eyebrow { color: var(--aqua); }
.back-top { color: var(--muted); }
.back-top:hover { color: var(--ink); }

/* ============ HERO 背景图：替换为 bg.png ============ */
.scene-backdrop {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .05) 0%, transparent 55%, rgba(255, 255, 255, .18) 100%),
    url("bg.png") center center / cover no-repeat;
  image-rendering: auto;
}

/* 去掉原深色像素图的色调滤镜，只保留缓慢位移 */
@keyframes scene-breathe {
  0% { transform: translate3d(var(--scene-x), var(--scene-y), 0) scale(1.025); }
  48% { transform: translate3d(var(--scene-x), calc(var(--scene-y) - 5px), 0) scale(1.052); }
  100% { transform: translate3d(var(--scene-x), calc(var(--scene-y) + 3px), 0) scale(1.04); }
}

/* ============ 魔法光标层：深色粒子 + 正片叠底 ============ */
.magic-cursor-layer { mix-blend-mode: multiply; }

/* 无 backdrop-filter 时用纯白回退 */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header,
  .hero > div:first-child,
  .spell-list,
  .spell-panel,
  .archive-card,
  .about-copy,
  .manifesto { background-color: rgba(255, 255, 255, .92); }
}

/* ============ 移动端菜单 ============ */
@media (max-width: 720px) {
  .nav-links {
    border-color: var(--line);
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    backdrop-filter: blur(22px) saturate(140%);
  }
  .archive-card,
  .archive-card:last-child,
  .about-copy { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
}

/* ============ 自定义字体：LingDong（中文·简繁通吃）+ Oradano 明朝（英文） ============ */
@font-face {
  font-family: "LingDong";
  src: url("assets/fonts/LingDongQiCheChunTang-2.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+4E00-9FFF, U+3400-4DBF, U+3000-303F, U+FF00-FFEF, U+2018-201F, U+2014-2015, U+2026, U+00B7, U+00A7;
}
@font-face {
  font-family: "OradanoMingChaoTi";
  src: url("assets/fonts/CC0-OradanoMingChaoTi-2.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-display-cn: "LingDong", "OradanoMingChaoTi", "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --font-display-latin: "OradanoMingChaoTi", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  --font-ui: "LingDong", "OradanoMingChaoTi", Inter, "Source Han Sans CN", "Microsoft YaHei", sans-serif;
}

body { font-family: var(--font-ui); }

/* 手写体仅一个字重（400），去掉 v2 标题的 faux bold */
.hero h1,
.section h2,
.spell-panel h3,
.archive-card h3,
.footer-title,
.brand,
.spell-tab { font-weight: 400; letter-spacing: .02em; }

/* ============ 全站文字：中文 LingDong · 英文 Oradano ============ */
* {
  font-family: "LingDong", "OradanoMingChaoTi", "Microsoft YaHei", sans-serif !important;
}