/* ─────────────────────────────────────────────
   東墨 EastInk · v0.2 — 水墨流体独立页
   side project，与 FreshMe / Arete 同级
   两境：日·宣纸（逐通道光学吸收）/ 夜·深水（加色发光）
   文房 UI：五瓷色碟 + 另起一卷 + 日月双境 + 东西相照题跋
   token 对齐 lindaly.cn styles.css（毛玻璃 + 朱砂 + 书法栈）
   ───────────────────────────────────────────── */

/* ── 自托管毛笔体（同源加载，运行时零外部请求）──
   Ma Shan Zheng (OFL, © 2018 Ma Shan Zheng Project Authors)，
   子集化只含 EastInk 题跋/UI 字符集（96 字，37KB woff2）。
   注：本字为简体字体，无传统字「東」——题字「東墨」之「東」由 --font-brush
   栈内系统楷/行楷兜底（字入墨内容皆简体，全覆盖）。 */
@font-face {
  font-family: "MSZ Brush";
  src: url("assets/fonts/MaShanZheng-eastink.woff2") format("woff2");
  font-display: swap;
}

:root {
  /* 宣纸暖白系（与站点 --bg #faf7f0 同族） */
  --paper: #faf7f0;
  --paper-soft: #f3eee1;
  --ink: #221f1a;
  --ink-soft: #4f483c;
  --gold: #c08a2d;
  --seal-red: #b03a2e;

  /* 玻璃面（站点 card token：card-bg + card-line + blur8） */
  --glass-bg: rgba(255, 253, 247, .82);
  --glass-line: rgba(120, 100, 60, .18);
  --shadow: 0 18px 50px -18px rgba(120, 90, 30, .25);

  /* 字体栈直取站点 :root */
  --font-brush: "MSZ Brush", "Xingkai SC", "Kaiti SC", "STKaiti", "KaiTi", "Songti SC", serif;
  --font-zh: "Songti SC", "STSong", "STZhongsong", "Noto Serif SC", "Source Han Serif SC", "Noto Serif CJK SC", "SimSun", serif;
  --font-en: "Cormorant G", "Didot", "Bodoni 72", "Playfair Display", "Georgia", serif;
  --font-body: "PingFang SC", -apple-system, "Helvetica Neue", "Microsoft YaHei", sans-serif;

  /* 场景 token（日境默认；夜境在 [data-realm="night"] 覆盖） */
  --fg: var(--ink);
  --fg-soft: var(--ink-soft);
  --chrome-bg: var(--glass-bg);
  --chrome-line: var(--glass-line);
  --chrome-shadow: var(--shadow);
  --accent: var(--seal-red);
  --halo: rgba(250, 247, 240, .7);
  --page-bg: var(--paper);
}

/* ── 夜·深水境：深色玻璃变体（同设计语言，色相入水）────── */
[data-realm="night"] {
  --fg: #e8eef6;
  --fg-soft: #9fb0c4;
  --chrome-bg: rgba(16, 23, 34, .56);
  --chrome-line: rgba(150, 180, 220, .20);
  --chrome-shadow: 0 18px 54px -16px rgba(0, 8, 20, .7);
  --accent: #e0c879;          /* 夜境朱印转暖金 */
  --halo: rgba(8, 14, 24, .65);
  --page-bg: #0c1118;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  font-family: var(--font-body);
  background: var(--page-bg);
  color: var(--fg);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: background 1.1s ease, color 1.1s ease;
}

/* ── 流体画布：满屏，crosshair 光标 ─────────── */
#stage {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  display: block;
  cursor: crosshair;
  touch-action: none;          /* 让 pointer/touch 能搅墨，不被滚动吞掉 */
}

/* 全部 chrome 闲置统一隐去（JS 加 .chrome-idle 到 body） */
.title,
.couplet,
.colophon,
.palette,
.renew,
.ling,
.realm-toggle {
  transition: opacity .7s ease, transform .7s ease;
}
body.chrome-idle .palette,
body.chrome-idle .renew,
body.chrome-idle .ling,
body.chrome-idle .realm-toggle,
body.chrome-idle .title,
body.chrome-idle .colophon {
  opacity: 0;
  pointer-events: none;
}
/* 题跋浮现中（couplet 动画期）不被 idle 吞 */
body.chrome-idle .couplet.show { opacity: 1; }

/* ── 左上竖排题字「東墨」──────────────────── */
.title {
  position: fixed;
  top: clamp(1.2rem, 4vh, 2.6rem);
  left: clamp(1.1rem, 4vw, 2.6rem);
  z-index: 5;
  pointer-events: none;
  user-select: none;
  display: flex;
  align-items: flex-start;
  gap: .35em;
}
.title-main {
  writing-mode: vertical-rl;
  font-family: var(--font-brush);
  font-size: clamp(2.6rem, 7vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: .08em;
  color: var(--fg);
  text-shadow: 0 1px 14px var(--halo);
}
.title-sub {
  writing-mode: vertical-rl;
  font-family: var(--font-en);
  font-size: clamp(.72rem, 1.5vw, .92rem);
  letter-spacing: .12em;
  color: var(--fg-soft);
  margin-top: .2em;
  opacity: .82;
}
/* 朱砂小印（夜境转暖金） */
.seal {
  writing-mode: vertical-rl;
  align-self: flex-start;
  margin-top: .15em;
  font-family: var(--font-brush);
  font-size: clamp(.7rem, 1.4vw, .92rem);
  letter-spacing: .04em;
  color: var(--page-bg);
  background: var(--accent);
  padding: .3em .18em;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(176, 58, 46, .28);
  transition: background 1.1s ease, color 1.1s ease;
}

/* ── 右上：日 / 月 双境切换符（CSS 画 ☉ / ☾）────────
   呼应站点首页日月璧机制（不引首页代码）：日境显☉，夜境显☾ */
.realm-toggle {
  position: fixed;
  top: clamp(1.2rem, 4vh, 2.2rem);
  right: clamp(1.1rem, 4vw, 2.2rem);
  z-index: 6;
  width: clamp(34px, 6vw, 42px);
  height: clamp(34px, 6vw, 42px);
  border-radius: 50%;
  border: 1px solid var(--chrome-line);
  background: var(--chrome-bg);
  box-shadow: var(--chrome-shadow);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform .3s ease, box-shadow .3s ease, background 1.1s ease, border-color 1.1s ease;
}
.realm-toggle:hover { transform: rotate(18deg) scale(1.06); }
.realm-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* ☉ 日轮：实心金盘 + 一圈光芒（conic 短线近似） */
.realm-sun {
  width: 54%; height: 54%;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #f4d98a, #d99a2e 70%);
  box-shadow: 0 0 0 2px rgba(217, 154, 46, .25),
              0 0 10px 1px rgba(217, 154, 46, .35);
}
/* ☾ 月牙：错位圆 mask（用 box-shadow 偏移挖月） */
.realm-moon {
  display: none;
  width: 56%; height: 56%;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset -5px -2px 0 0 #d8e3f2;
  transform: rotate(-18deg);
}
[data-realm="night"] .realm-sun { display: none; }
[data-realm="night"] .realm-moon { display: block; }

/* ── 东西相照题跋（知性好玩核心）────────────────
   开卷中央浮现：东句竖排大字 + 西句横排小字斜体
   0.5s 淡入、6s 内淡出，随后由 JS 把文本写进 colophon 缩入右下。 */
.couplet {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  pointer-events: none;
  user-select: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9em;
  opacity: 0;
  transition: opacity .5s ease;
}
.couplet.show { opacity: 1; }
.couplet.fade { opacity: 0; transition: opacity 1.4s ease; }
.couplet-east {
  writing-mode: vertical-rl;
  font-family: var(--font-brush);
  font-size: clamp(2.4rem, 8.5vw, 4.8rem);
  letter-spacing: .26em;
  line-height: 1.1;
  color: var(--fg);
  text-shadow: 0 2px 26px var(--halo);
  white-space: nowrap;
}
.couplet-west {
  font-family: var(--font-en);
  font-style: italic;
  font-size: clamp(.84rem, 2.1vw, 1.18rem);
  letter-spacing: .04em;
  line-height: 1.5;
  color: var(--fg-soft);
  text-align: center;
  max-width: min(82vw, 40rem);
  text-shadow: 0 1px 16px var(--halo);
}

/* ── 右下题跋存档区：卷号 + 拍序小注 + 缩入的题跋 ────────
   F2：调大一号 + 提对比度（解决「缩到右下看不出来」）；可点击 → 该句重新入墨。 */
.colophon {
  position: fixed;
  right: clamp(.9rem, 3vw, 1.8rem);
  bottom: clamp(.8rem, 3vh, 1.5rem);
  z-index: 5;
  pointer-events: auto;          /* F2：可点击重注入墨 */
  cursor: pointer;
  user-select: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .3em;
  text-align: right;
  max-width: min(62vw, 26rem);
  -webkit-tap-highlight-color: transparent;
}
.colophon:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
/* 缩入的东西句题跋（小字常驻；F2 调大 + 提对比） */
.colophon-note {
  font-family: var(--font-zh);
  font-size: clamp(.74rem, 1.7vw, .92rem);    /* F2 调大一号 */
  letter-spacing: .08em;
  line-height: 1.55;
  color: var(--fg);                           /* F2 提对比：用主前景色 */
  opacity: 0;
  transition: opacity .8s ease;
}
.colophon-note.show { opacity: .9; }          /* F2 提对比：.72 → .9 */
.colophon:hover .colophon-note.show { opacity: 1; }
/* 拍序题跋式小注（道生一 / 一生二 …）随拍浮现 */
.colophon-tip {
  font-family: var(--font-brush);
  font-size: clamp(.82rem, 1.9vw, 1.04rem);
  letter-spacing: .14em;
  color: var(--fg);
  opacity: 0;
  transition: opacity .6s ease;
}
.colophon-tip.show { opacity: .9; }
/* 卷号 · 不可复现 */
.colophon-meta {
  font-family: var(--font-zh);
  font-size: clamp(.6rem, 1.3vw, .72rem);
  letter-spacing: .12em;
  color: var(--fg-soft);
  opacity: .55;
}

/* ── 五只瓷色碟（桌面右缘竖列 / 移动端底部横排）──────
   每碟 = CSS 画的小瓷碟：瓷环 radial-gradient + 碟内颜料池 + 湿润高光 */
.palette {
  position: fixed;
  right: clamp(.9rem, 2.6vw, 1.8rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: clamp(.7rem, 1.8vh, 1.15rem);
}
.dish {
  position: relative;
  width: clamp(40px, 6.4vw, 54px);
  height: clamp(40px, 6.4vw, 54px);
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;
  /* 瓷环：外亮内暗的釉面渐变 */
  background:
    radial-gradient(circle at 36% 30%, rgba(255,255,255,.95), rgba(255,255,255,.5) 18%, transparent 40%),
    radial-gradient(circle at 50% 50%, #fbfbf8 60%, #e9e6dd 78%, #d6d2c6 100%);
  box-shadow:
    0 4px 12px -3px rgba(60, 45, 20, .35),
    inset 0 -3px 7px rgba(120, 100, 60, .22),
    inset 0 2px 4px rgba(255, 255, 255, .9);
  transition: transform .22s cubic-bezier(.2,.8,.3,1), box-shadow .22s ease;
}
/* 碟内颜料池（JS 用 --pig 注入颜料色）+ 湿润高光 */
.dish::before {
  content: "";
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, rgba(255,255,255,.55), transparent 42%),
    radial-gradient(circle at 60% 68%, color-mix(in srgb, var(--pig) 78%, #000 6%), var(--pig) 70%);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.35);
}
/* 湿润高光点 */
.dish::after {
  content: "";
  position: absolute;
  left: 34%; top: 30%;
  width: 18%; height: 12%;
  border-radius: 50%;
  background: rgba(255, 255, 255, .82);
  filter: blur(.6px);
  opacity: .85;
}
.dish:hover { transform: translateX(-5px) scale(1.06); }
.dish:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* 选中：微上浮 + 朱砂细环 */
.dish[aria-pressed="true"] {
  transform: translateX(-7px) scale(1.08);
  box-shadow:
    0 0 0 2px var(--page-bg),
    0 0 0 3.5px var(--accent),
    0 6px 16px -4px rgba(60, 45, 20, .4),
    inset 0 -3px 7px rgba(120, 100, 60, .22),
    inset 0 2px 4px rgba(255, 255, 255, .9);
}

/* 颜料名（hover / 选中 旁出竖排） */
.dish-name {
  position: absolute;
  right: calc(100% + .5rem);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  writing-mode: vertical-rl;
  font-family: var(--font-brush);
  font-size: clamp(.8rem, 1.7vw, 1rem);
  letter-spacing: .14em;
  color: var(--fg);
  text-shadow: 0 1px 10px var(--halo);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.dish:hover .dish-name,
.dish[aria-pressed="true"] .dish-name {
  opacity: .92;
  transform: translateY(-50%) translateX(0);
}

/* 夜境：碟中颜料变发光态 */
[data-realm="night"] .dish {
  background:
    radial-gradient(circle at 36% 30%, rgba(210,225,245,.55), rgba(160,185,215,.25) 20%, transparent 42%),
    radial-gradient(circle at 50% 50%, #1c2636 58%, #141c29 80%, #0e151f 100%);
  box-shadow:
    0 4px 14px -3px rgba(0, 8, 20, .6),
    inset 0 -3px 7px rgba(0, 6, 16, .5),
    inset 0 2px 4px rgba(150, 180, 220, .25);
}
[data-realm="night"] .dish::before {
  background:
    radial-gradient(circle at 40% 34%, rgba(255,255,255,.4), transparent 46%),
    radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--glow, var(--pig)) 92%, #fff 8%), color-mix(in srgb, var(--glow, var(--pig)) 70%, #000 18%) 72%);
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,.5),
    0 0 10px 1px color-mix(in srgb, var(--glow, var(--pig)) 65%, transparent);
}
[data-realm="night"] .dish[aria-pressed="true"] {
  box-shadow:
    0 0 0 2px var(--page-bg),
    0 0 0 3.5px var(--accent),
    0 0 16px 2px color-mix(in srgb, var(--glow, var(--pig)) 55%, transparent),
    inset 0 -3px 7px rgba(0, 6, 16, .5);
}

/* ── 另起一卷（竖排毛笔字按钮，桌面左下）──────────── */
.renew {
  position: fixed;
  left: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1.2rem, 5vh, 2.6rem);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .04em;
  padding: .7rem .5rem;
  border-radius: 18px;
  border: 1px solid var(--chrome-line);
  background: var(--chrome-bg);
  box-shadow: var(--chrome-shadow);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, background 1.1s ease, border-color 1.1s ease, opacity .7s ease;
}
.renew:hover { transform: translateY(-3px); box-shadow: 0 22px 56px -18px rgba(120, 90, 30, .4); }
.renew:active { transform: translateY(0) scale(.97); }
.renew:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.renew-char {
  font-family: var(--font-brush);
  font-size: clamp(1.05rem, 2.4vw, 1.45rem);
  line-height: 1.18;
  letter-spacing: .04em;
  color: var(--fg);
  text-shadow: 0 1px 10px var(--halo);
}
.renew:hover .renew-char { color: var(--accent); }

/* ── 声境「聆」开关（竖排毛笔字，左下「另起一卷」上方）──────
   默认静音（字偏淡）；开启后字提亮 + 朱印细环 + 声波微动。 */
.ling {
  position: fixed;
  left: clamp(1rem, 3vw, 2rem);
  bottom: calc(clamp(1.2rem, 5vh, 2.6rem) + 4.4rem);   /* 叠在 renew 上方 */
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .22em;
  padding: .55rem .5rem;
  border-radius: 16px;
  border: 1px solid var(--chrome-line);
  background: var(--chrome-bg);
  box-shadow: var(--chrome-shadow);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, background 1.1s ease, border-color 1.1s ease, opacity .7s ease;
}
.ling:hover { transform: translateY(-3px); box-shadow: 0 22px 56px -18px rgba(120, 90, 30, .4); }
.ling:active { transform: translateY(0) scale(.97); }
.ling:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ling-char {
  font-family: var(--font-brush);
  font-size: clamp(1.05rem, 2.4vw, 1.45rem);
  line-height: 1;
  color: var(--fg);
  opacity: .6;                                   /* 静音态：偏淡 */
  text-shadow: 0 1px 10px var(--halo);
  transition: opacity .3s ease, color .3s ease;
}
.ling:hover .ling-char { color: var(--accent); opacity: .9; }
/* 声波小符（CSS 三道弧，开启时轻动） */
.ling-wave {
  width: 14px; height: 9px;
  background:
    radial-gradient(circle at 0 50%, transparent 3px, var(--fg-soft) 3.5px, var(--fg-soft) 4px, transparent 4.5px),
    radial-gradient(circle at 0 50%, transparent 6px, var(--fg-soft) 6.5px, var(--fg-soft) 7px, transparent 7.5px);
  opacity: .35;
  transition: opacity .3s ease;
}
.ling.on .ling-char { opacity: 1; color: var(--accent); }
.ling.on .ling-wave { opacity: .85; animation: lingWave 1.6s ease-in-out infinite; }
@keyframes lingWave { 0%,100% { opacity: .45; } 50% { opacity: .95; } }
@media (prefers-reduced-motion: reduce) { .ling.on .ling-wave { animation: none; } }

/* ── 无 WebGL / reduced-motion 静态海报回退 ──── */
.poster {
  position: fixed; inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.4rem;
  padding: 2rem;
  /* 程序化静态墨渍：径向叠加，宣纸底上预扩散的一团雅墨 */
  background:
    radial-gradient(42% 48% at 38% 40%, rgba(46, 90, 143, .22), transparent 70%),
    radial-gradient(34% 40% at 62% 58%, rgba(63, 143, 106, .20), transparent 72%),
    radial-gradient(28% 30% at 52% 50%, rgba(26, 26, 26, .26), transparent 66%),
    radial-gradient(60% 60% at 50% 46%, rgba(200, 68, 46, .10), transparent 78%),
    var(--paper);
}
.poster-title {
  writing-mode: vertical-rl;
  font-family: var(--font-brush);
  font-size: clamp(3rem, 11vw, 5.5rem);
  letter-spacing: .1em;
  color: var(--ink);
}
/* 海报上静态展示一对题跋（reduced-motion 也读得到东西相照） */
.poster-couplet {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
}
.poster-east {
  writing-mode: vertical-rl;
  font-family: var(--font-brush);
  font-size: clamp(1.8rem, 6vw, 2.8rem);
  letter-spacing: .22em;
  color: var(--ink);
}
.poster-west {
  font-family: var(--font-en);
  font-style: italic;
  font-size: clamp(.84rem, 2.4vw, 1.1rem);
  letter-spacing: .04em;
  color: var(--ink-soft);
}
.poster-note {
  font-family: var(--font-zh);
  font-size: clamp(.82rem, 2.4vw, 1rem);
  letter-spacing: .08em;
  line-height: 2;
  color: var(--ink-soft);
  max-width: 26rem;
}

/* ── 移动端：瓷碟底部横排、另起一卷横排、题字稍收 ───── */
@media (max-width: 760px) {
  .title-main { font-size: clamp(2.2rem, 11vw, 3.2rem); }

  /* 瓷碟：底部居中横排 */
  .palette {
    right: auto;
    left: 50%;
    top: auto;
    bottom: clamp(.9rem, 3vh, 1.6rem);
    transform: translateX(-50%);
    flex-direction: row;
    gap: clamp(.55rem, 3vw, .9rem);
  }
  .dish { width: clamp(38px, 12vw, 48px); height: clamp(38px, 12vw, 48px); }
  .dish:hover { transform: scale(1.06); }
  .dish[aria-pressed="true"] { transform: translateY(-5px) scale(1.06); }
  /* 颜料名：横排移到碟上方 */
  .dish-name {
    right: auto;
    left: 50%;
    top: auto;
    bottom: calc(100% + .35rem);
    writing-mode: horizontal-tb;
    transform: translateX(-50%) translateY(4px);
  }
  .dish:hover .dish-name,
  .dish[aria-pressed="true"] .dish-name {
    transform: translateX(-50%) translateY(0);
  }

  /* 另起一卷：左下横排 */
  .renew {
    flex-direction: row;
    gap: .12em;
    left: clamp(.7rem, 3vw, 1.2rem);
    bottom: auto;
    top: clamp(1rem, 3vh, 1.8rem);
    padding: .45rem .7rem;
    border-radius: 99px;
  }
  .renew-char { font-size: clamp(.92rem, 4.4vw, 1.1rem); }

  /* 聆：移到顶部，紧贴另起一卷右侧（横排小圆） */
  .ling {
    flex-direction: row;
    gap: .18em;
    left: auto;
    right: calc(clamp(.7rem, 3vw, 1.2rem) + 42px);   /* 让出右上日月切换 */
    bottom: auto;
    top: clamp(1rem, 3vh, 1.8rem);
    padding: .4rem .6rem;
    border-radius: 99px;
  }
  .ling-char { font-size: clamp(.92rem, 4.4vw, 1.1rem); }

  /* 题跋区上移，给底部瓷碟让位 */
  .colophon { bottom: clamp(5.2rem, 13vh, 7rem); }

  /* 西句小字不要太挤 */
  .couplet-west { max-width: 86vw; }
}