#splash{
  --ink:#16324f; --cinnabar:#b3352b; --gold:#a8791f;
  --paper:#f2eee4;
  --serif:"Songti SC","SimSun","Noto Serif CJK SC",Georgia,serif;
}

/* ============ 开屏层 ============ */
#splash{
  position:fixed;inset:0;z-index:99;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:opacity .9s ease, visibility .9s;
  background-image:url(splash_bg.jpg);
  background-size:cover;background-position:center;
}
#splash.gone{opacity:0;visibility:hidden}
#splash::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(to bottom, rgba(244,240,230,.30) 0%, rgba(246,242,232,.62) 34%, rgba(246,242,232,.66) 62%, rgba(244,240,230,.30) 100%);
}
#splash::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  box-shadow:inset 0 0 200px rgba(70,60,40,.30);
}
.grain{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.4;
  background-image:radial-gradient(rgba(120,105,80,.06) 1px, transparent 1px);
  background-size:5px 5px;
}

/* ---- 墨滴 ---- */
.ink-drop{
  position:absolute;left:50%;top:-8%;z-index:3;
  width:15px;height:24px;opacity:0;
  border-radius:50% 50% 58% 58% / 38% 38% 64% 64%;
  background:
    radial-gradient(circle at 34% 24%, rgba(150,180,210,.85) 0%, rgba(80,110,150,.5) 18%, transparent 34%),
    radial-gradient(circle at 50% 60%, #2a4a6e 0%, #1a3350 45%, #0e1c30 95%);
  box-shadow:inset -2px -3px 4px rgba(0,0,0,.55), 0 2px 4px rgba(14,28,48,.3);
  animation:dropFall .6s cubic-bezier(.55,0,1,.55) forwards;
}
@keyframes dropFall{
  0%{transform:translate(-50%,0) scaleY(.65);opacity:0}
  12%{opacity:1}
  70%{transform:translate(-50%,42vh) scaleY(1.3) scaleX(.92)}
  100%{transform:translate(-50%,45vh) scaleY(1.15);opacity:0}
}
.ink-blot{
  position:absolute;left:50%;top:45%;border-radius:50%;z-index:1;
  transform:translate(-50%,-50%) scale(0);
  background:radial-gradient(circle, rgba(22,50,79,.15) 0%, rgba(22,50,79,.07) 45%, transparent 70%);
  filter:blur(3px);
}
.b1{width:58vmin;height:58vmin;animation:blot 2.2s .5s ease-out forwards}
.b2{width:30vmin;height:30vmin;animation:blot 1.6s .6s ease-out forwards;opacity:.8}
@keyframes blot{60%{transform:translate(-50%,-50%) scale(1.04)}100%{transform:translate(-50%,-50%) scale(1)}}

/* ============ 题字 ============ */
.title-wrap{position:relative;z-index:4;text-align:center;display:flex;flex-direction:column;align-items:center}

/* 题字：SVG 描摹（截图书法矢量化），从左向右擦出 */
.title-svg-wrap{
  position:relative;width:min(76vmin,500px);
  clip-path:inset(-30% 102% -30% -2%);
  animation:wipeIn 1.2s 1s cubic-bezier(.3,.6,.25,1) forwards;
  transition:filter .2s ease;
}
.title-svg-wrap svg{display:block;width:100%;height:auto}
.title-svg-wrap.flash{filter:drop-shadow(0 0 14px rgba(255,226,150,.9))}
@keyframes wipeIn{to{clip-path:inset(-30% -2% -30% -2%)}}

/* 毛笔（跟着题字从左写到右，与擦出显现同步） */
.brush{
  position:absolute;top:-18%;left:0;width:6.6vmin;z-index:6;
  opacity:0;pointer-events:none;transform-origin:50% 92%;
  filter:drop-shadow(0 3px 5px rgba(40,35,25,.3));
}
.brush.go{animation:brushWrite 1.2s 1s cubic-bezier(.3,.6,.25,1) forwards}
@keyframes brushWrite{
  0%{left:1%;opacity:0;transform:rotate(18deg)}
  8%{opacity:1}
  30%{transform:rotate(27deg) translateY(2px)}
  55%{transform:rotate(16deg) translateY(-1px)}
  80%{transform:rotate(25deg) translateY(1px)}
  92%{opacity:1}
  100%{left:86%;opacity:0;transform:rotate(20deg)}
}

/* 剑光（最初版金色光尾：一道暖金拖光贴题字下方划过） */
/* 裁剪容器：只在「千—录」这一段内可见，光出不了这个范围 */
.sword-clip{
  position:absolute;left:0;top:76%;width:100%;height:16px;z-index:5;
  transform:translateY(-50%);overflow:hidden;pointer-events:none;
}
.sword-light{
  position:absolute;left:-60%;top:50%;width:56%;height:3px;
  transform:translateY(-50%);opacity:0;
  background:linear-gradient(90deg, rgba(168,121,31,0) 0%, rgba(168,121,31,.5) 22%, rgba(230,190,90,.85) 55%, rgba(255,240,200,.95) 82%, #fffcf0 100%);
  filter:drop-shadow(0 0 6px rgba(240,200,110,.85));
  clip-path:polygon(0 50%, 94% 0, 100% 50%, 94% 100%);
}
.sword-clip.go .sword-light{animation:slash 0.7s cubic-bezier(.45,.05,.35,1) forwards}
@keyframes slash{
  0%{left:-60%;opacity:0}
  18%{opacity:1}
  80%{opacity:1}
  100%{left:108%;opacity:0}
}

/* ---- 副题 ---- */
.splash-sub,.splash-hint{opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease}
.splash-sub.show,.splash-hint.show{opacity:1;transform:none}
.splash-sub{margin-top:2.6vmin;font-size:clamp(15px,2.6vmin,20px);color:#4a4536;letter-spacing:.5em;text-indent:.5em}
.splash-hint{margin-top:1vmin;font-size:12px;color:#94896f;letter-spacing:.35em;text-indent:.35em}

/* ---- 进入按钮 / 跳过 ---- */
.splash-btns{position:absolute;left:50%;bottom:11%;transform:translateX(-50%);
  display:flex;align-items:center;justify-content:center;gap:14px;z-index:9;}
/* 放进 flex 容器后取消绝对定位，保留原有的入场/呼吸动效 */
.splash-btns #enterBtn{position:relative;left:auto;bottom:auto;transform:translateY(10px);}
.splash-btns #enterBtn.show{transform:none;}
#enterBtn{
  position:absolute;left:50%;bottom:11%;transform:translateX(-50%) translateY(10px);
  font-family:var(--serif);font-size:16px;letter-spacing:.4em;text-indent:.4em;
  color:var(--ink);background:rgba(244,240,230,.75);border:1px solid rgba(22,50,79,.45);
  padding:11px 34px;border-radius:3px;cursor:pointer;z-index:9;
  opacity:0;pointer-events:none;backdrop-filter:blur(2px);
  transition:background .25s,color .25s,border-color .25s,opacity .4s ease,transform .4s ease;
}
#enterBtn.show{opacity:1;transform:translateX(-50%)}
#enterBtn.ready{pointer-events:auto;animation:breathe 2.6s 1s ease-in-out infinite}
#enterBtn:hover{background:var(--ink);color:#f4f1ea;border-color:var(--ink)}
@media(max-width:520px){
  .splash-btns{gap:10px;bottom:12%;}
  #enterBtn{font-size:14px;padding:10px 18px;letter-spacing:.2em;text-indent:.2em;}
}
@keyframes breathe{50%{box-shadow:0 0 0 6px rgba(22,50,79,.08)}}
.skip{position:absolute;right:22px;bottom:18px;font-size:12px;color:#8f8878;z-index:9;letter-spacing:.2em;opacity:.75}

/* ============ 正文占位 ============ */
body.splash-lock{overflow:hidden}