/* ============================================================
   普通 · website  —  共用水墨视觉系统
   纯静态 · 零外部依赖 · 可直接上传任意服务器
   ============================================================ */

/* 可选字体位：
   若你手上有「瘦金体」字体文件，把它命名为 shoujin.woff2 放进 assets/fonts/，
   再把下面 src 改成 url('../fonts/shoujin.woff2') format('woff2') 即可全局生效。
   英文毛笔字同理，命名为 brush-en.woff2，字体族 "InkBrush"。
   当前使用 local() 只探测本机已装字体，不产生任何网络请求，缺字体时自动回退。 */
@font-face {
  font-family: "ShouJin";
  src: local("瘦金体"), local("FZShouJinTi"), local("方正瘦金体"),
       local("STShoujin"), local("ShouJinTi");
  font-display: swap;
}
@font-face {
  font-family: "InkBrush";
  src: local("Segoe Script"), local("Brush Script MT"), local("Ink Free"),
       local("Snell Roundhand"), local("Apple Chancery");
  font-display: swap;
}

:root {
  --paper:      #f3efe4;
  --paper-deep: #e9e2d2;
  --ink:        #1b1a17;
  --ink-2:      #33322c;
  --ink-soft:   rgba(27, 26, 23, .56);
  --ink-faint:  rgba(27, 26, 23, .13);
  --ink-ghost:  rgba(27, 26, 23, .06);
  --cinnabar:   #a6402d;

  --font-shou: "ShouJin", "FZShouJinTi", "方正瘦金体", "瘦金体",
               "FangSong", "STFangsong", "仿宋", "KaiTi", "STKaiti", "楷体", serif;
  --font-brush: "InkBrush", "Segoe Script", "Brush Script MT", "Ink Free",
                "Snell Roundhand", "Apple Chancery", "Georgia", cursive;
  --font-text: "FangSong", "STFangsong", "仿宋", "KaiTi", "STKaiti", "楷体",
               "Songti SC", "SimSun", serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 宣纸：极淡的暖色不匀 + 纤维颗粒 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 18% 12%, rgba(255,255,255,.42), transparent 70%),
    radial-gradient(ellipse 60% 50% at 85% 88%, rgba(180,166,136,.15), transparent 72%),
    radial-gradient(ellipse 40% 40% at 60% 40%, rgba(255,255,255,.2), transparent 70%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
  opacity: .13;
  /* 不用 mix-blend-mode：全屏混合层会拖慢动画，普通叠加已经够纸感 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
::selection { background: rgba(27,26,23,.16); }

/* ---------- 小构件 ---------- */
.vertical {
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: .42em;
}
.corner-note {
  position: absolute;
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: .32em;
  z-index: 5;
}
.seal {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--cinnabar);
  border-radius: 3px;
  color: var(--cinnabar);
  font-size: 17px;
  line-height: 1;
  font-family: var(--font-shou);
  opacity: .82;
  transform: rotate(-4deg);
  box-shadow: inset 0 0 0 2px rgba(166,64,45,.14);
}

/* 返回按钮 */
.back-link {
  position: fixed;
  top: 26px;
  left: 30px;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 15px 9px 12px;
  border: 1px solid var(--ink-faint);
  border-radius: 40px 36px 42px 38px / 38px 42px 36px 40px;
  color: var(--ink-soft);
  font-size: 13px;
  letter-spacing: .22em;
  text-decoration: none;
  background: rgba(243,239,228,.5);
  transition: color .35s, border-color .35s, transform .35s, background .35s;
}
.back-link:hover {
  color: var(--ink);
  border-color: rgba(27,26,23,.4);
  background: rgba(243,239,228,.9);
  transform: translateX(-4px);
}
.back-link .arrow { font-size: 17px; line-height: 1; transform: translateY(-1px); }

/* 通用线条按钮 */
.ink-btn {
  appearance: none;
  border: 1px solid rgba(27,26,23,.34);
  border-radius: 36px 40px 34px 42px / 40px 34px 42px 36px;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 14px;
  letter-spacing: .28em;
  padding: 10px 26px;
  cursor: pointer;
  transition: background .3s, color .3s, transform .3s, box-shadow .3s;
}
.ink-btn:hover {
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(27,26,23,.14);
}
.ink-btn:active { transform: translateY(0) scale(.97); }
.ink-btn:focus-visible, .back-link:focus-visible, a:focus-visible {
  outline: 2px solid rgba(27,26,23,.45);
  outline-offset: 4px;
}

/* ---------- 点击：一滴墨落纸 ----------
   时序：墨滴落下 .26s → 触纸压扁 + 墨晕洇开 1.1s
         + 墨圈推开 .72s + 飞溅 .62s，1.5s 后整个节点移除 */
.ink-splash {
  position: fixed;
  z-index: 999;
  width: 0;
  height: 0;
  pointer-events: none;
}
.ink-splash i { position: absolute; display: block; }

/* 1. 落下的墨滴：下落时拉长，触纸瞬间压扁摊开 */
.ink-splash .core {
  left: -4px;
  top: -40px;
  width: 8px;
  height: 13px;
  border-radius: 62% 62% 50% 50% / 82% 82% 38% 38%;
  background: radial-gradient(ellipse at 40% 28%, #2c2b25 0%, #1b1a17 72%);
  box-shadow: 0 0 3px rgba(27,26,23,.3);
  opacity: 0;
  animation: inkFall .26s cubic-bezier(.55,0,.9,.65) forwards;
}
@keyframes inkFall {
  0%   { transform: translateY(-20px) scaleY(.5)  scaleX(.85); opacity: 0; }
  22%  { opacity: .96; }
  74%  { transform: translateY(38px)  scaleY(1.38) scaleX(.9);  opacity: .96; }
  100% { transform: translateY(44px)  scaleY(.28)  scaleX(2);   opacity: 0; }
}

/* 2. 墨圈：落点被推开的一圈淡墨 */
.ink-splash .ring {
  left: calc(var(--s) * -.5);
  top: calc(var(--s) * -.5);
  width: var(--s);
  height: var(--s);
  border: 2px solid rgba(27,26,23,.55);
  border-radius: 50% 47% 53% 48% / 48% 52% 46% 54%;
  opacity: 0;
  animation: inkRing .6s cubic-bezier(.15,.7,.3,1) .1s forwards;
}
@keyframes inkRing {
  0%   { transform: scale(.16) rotate(var(--rot)); opacity: 0; }
  18%  { opacity: .6; }
  100% { transform: scale(1.35) rotate(calc(var(--rot) + 26deg)); opacity: 0; }
}

/* 3. 墨晕：中心浓、边缘化开；主晕 + 偏心的副晕 + 三根墨指，叠出不规则墨渍 */
.ink-splash .blot {
  left: calc(var(--s) * -.5);
  top: calc(var(--s) * -.42);
  width: var(--s);
  height: calc(var(--s) * .84);
  border-radius: 42% 58% 63% 37% / 55% 40% 60% 45%;
  background: radial-gradient(circle at 45% 44%,
      rgba(27,26,23,.99) 0%, rgba(27,26,23,.93) 20%,
      rgba(27,26,23,.55) 42%, rgba(27,26,23,.16) 62%, rgba(27,26,23,0) 78%);
  opacity: 0;
  animation: inkBloom 1.1s cubic-bezier(.16,.72,.24,1) .12s forwards;
}
.ink-splash .blot.two {
  width: calc(var(--s) * .62);
  height: calc(var(--s) * .5);
  left: calc(var(--s) * -.12);
  top: calc(var(--s) * -.3);
  border-radius: 63% 37% 45% 55% / 40% 62% 38% 60%;
  background: radial-gradient(circle at 55% 50%,
      rgba(27,26,23,.55) 0%, rgba(27,26,23,.22) 45%, rgba(27,26,23,0) 72%);
  animation-delay: .2s;
}
@keyframes inkBloom {
  0%   { transform: scale(.1) rotate(var(--rot)); opacity: 0; }
  10%  { opacity: .98; }
  36%  { opacity: .9; }
  64%  { opacity: .5; }
  100% { transform: scale(1.55) rotate(calc(var(--rot) + 16deg)); opacity: 0; }
}

/* 墨核：落点处留下一颗更实的墨点，让墨渍有重心而不是一团雾 */
.ink-splash .bead {
  left: -6px;
  top: -6px;
  width: 12px;
  height: 10px;
  border-radius: 52% 48% 55% 45% / 50% 50% 50% 50%;
  background: radial-gradient(circle at 42% 38%, #2b2a24 0%, #1b1a17 72%);
  opacity: 0;
  animation: inkBead .8s cubic-bezier(.2,.7,.3,1) .2s forwards;
}
@keyframes inkBead {
  0%   { transform: scale(.2); opacity: 0; }
  12%  { transform: scale(1.05); opacity: .95; }
  48%  { transform: scale(.9); opacity: .8; }
  100% { transform: scale(.7); opacity: 0; }
}

/* 墨指：从落点向外探出的几缕墨，破掉圆形的规整感 */
.ink-splash .arm {
  left: 0;
  top: 0;
  width: var(--aw, 14px);
  height: calc(var(--aw, 14px) * .68);
  margin: calc(var(--aw, 14px) * -.34) 0 0 calc(var(--aw, 14px) * -.5);
  border-radius: 50% 50% 45% 55%;
  /* 用渐变代替 blur：省掉每帧重新模糊的开销 */
  background: radial-gradient(ellipse at 50% 50%,
      rgba(27,26,23,.72) 0%, rgba(27,26,23,.45) 55%, rgba(27,26,23,0) 100%);
  opacity: 0;
  animation: inkArm .85s cubic-bezier(.2,.7,.3,1) .13s forwards;
}
@keyframes inkArm {
  0%   { transform: translate(0,0) rotate(var(--ar, 0deg)) scale(.2); opacity: 0; }
  24%  { opacity: .85; }
  100% { transform: translate(var(--ax), var(--ay)) rotate(var(--ar, 0deg)) scale(1); opacity: 0; }
}

/* 4. 飞溅的小墨点：沿随机方向甩出去，越远越淡 */
.ink-splash .sat {
  left: 0;
  top: 0;
  width: var(--sr, 3px);
  height: calc(var(--sr, 3px) * .58);
  margin: calc(var(--sr, 3px) * -.29) 0 0 calc(var(--sr, 3px) * -.5);
  border-radius: 52% 48% 55% 45%;
  background: rgba(27,26,23,.85);
  opacity: 0;
  animation: inkSat .66s cubic-bezier(.15,.8,.3,1) .13s forwards;
}
@keyframes inkSat {
  0%   { transform: translate(0,0) rotate(var(--ar, 0deg)) scale(.3); opacity: .95; }
  65%  { opacity: .6; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(var(--ar, 0deg)) scale(1); opacity: 0; }
}

/* ---------- 入场 ---------- */
.rise {
  opacity: 0;
  transform: translateY(22px);
  animation: riseIn 1.15s cubic-bezier(.2,.75,.25,1) forwards;
}
@keyframes riseIn { to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}