/* head 先接管首帧；即使前序脚本在编译 GL，也只露宣纸，不露旧展卷或山水。 */
html.depth-intro-pending,html.depth-intro-pending body[data-scene=home],html.depth-intro-pending .home{background:#f3eee2!important;background-image:none!important}
html.depth-intro-pending .home>*{visibility:hidden!important}
html.depth-intro-pending .home .fx2-scroll{display:none!important}
/* 光影在山层之间，不抬高整个场景；独立 translate / scale 保留原有水平视差。 */
.depth-scene{--depth-y:0px;--depth-scale:1;--depth-sun-x:64%;--depth-sun-y:25%}
.depth-scene .depth-fog{position:absolute;left:-2%;bottom:0;width:104%;height:64%;pointer-events:none;translate:calc(var(--mx,0) * -30px) calc(var(--depth-y) * .7)}
.depth-scene .depth-cssfog{display:none;left:-10%;bottom:6%;width:160%;height:46%;background:url(../ink/mist.webp) repeat-x center/auto 100%;opacity:.16;animation:depth-cloud 38s ease-in-out infinite alternate}
.depth-css .depth-cssfog{display:block}
.depth-shafts{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;opacity:.7;animation:depth-light 20s ease-in-out infinite;translate:calc(var(--mx,0) * -16px) calc(var(--depth-y) * .4)}
.depth-shafts::before{content:"";position:absolute;inset:0;background:conic-gradient(from 0deg at var(--depth-sun-x) var(--depth-sun-y),transparent 0deg 207deg,rgba(238,192,107,.21) 209deg,transparent 215deg 225deg,rgba(248,211,141,.25) 228deg,transparent 234deg 244deg,rgba(245,201,119,.16) 246deg,transparent 251deg);mask-image:radial-gradient(ellipse at var(--depth-sun-x) var(--depth-sun-y),transparent 2%,#000 22%,transparent 80%)}
.depth-scene .depth-gold{position:absolute;display:block;background-position:center;background-size:contain;opacity:0;animation:depth-mote 18s ease-in-out infinite;filter:drop-shadow(0 0 2px #f2c86b)}
.depth-scene .far{translate:0 calc(var(--depth-y) * .18)}
.depth-scene .ls-far{translate:0 calc(var(--depth-y) * .1)}
.depth-scene .mid{translate:0 calc(var(--depth-y) * .45)}
.depth-scene .ls-palace{translate:0 calc(var(--depth-y) * .65)}
.depth-scene .near{translate:0 var(--depth-y);scale:var(--depth-scale)}
.depth-scene .far,.depth-scene .ls-far,.depth-scene .mid,.depth-scene .near{animation-name:depth-mountain}
@keyframes depth-mountain{from{opacity:0}to{opacity:1}}
.depth-scene .far,.depth-scene .ls-far,.depth-scene .mid,.depth-scene .ls-palace,.depth-scene .near,.depth-fog,.depth-shafts{transition:transform .8s ease-out,translate .8s ease-out,scale .8s ease-out}
.depth-again .ink-scene{animation:depth-fade .6s ease-out both}
@keyframes depth-fade{from{opacity:0}to{opacity:1}}
@keyframes depth-cloud{from{transform:translateX(-5%);opacity:.12}to{transform:translateX(-23%);opacity:.21}}
@keyframes depth-light{0%,100%{opacity:.5}50%{opacity:.85}}
@keyframes depth-mote{0%,100%{opacity:0;transform:translate3d(0,30px,0) rotateY(75deg)}20%{opacity:.35}43%{opacity:.7}60%{opacity:.16}80%{opacity:.5}95%{opacity:0;transform:translate3d(-34px,-105px,0) rotateY(220deg)}}

/* 一滴先蓄势再重落：墨花、外抛小滴、水线与一次短促震动共用同一个落点。 */
.depth-intro-layer{position:fixed;inset:0;z-index:74;pointer-events:none;overflow:hidden;--impact-x:50vw;--impact-y:43vh}
.depth-paper{position:fixed;inset:0;z-index:71;background:var(--bg,#f3eee2);pointer-events:none}
.depth-intro-layer>.depth-paper{z-index:0;background:radial-gradient(ellipse at 50% 43%,rgba(255,255,255,.36),transparent 65%),var(--bg,#f3eee2)}
.depth-shot{position:absolute;inset:0}
.depth-wait-ink{position:absolute;left:var(--impact-x);top:var(--impact-y);width:180px;height:100px;border-radius:48%;background:radial-gradient(ellipse,rgba(41,32,21,.045),transparent 70%);transform:translate(-50%,-50%);animation:depth-wait-ink 1.2s ease-in-out infinite alternate}
@keyframes depth-wait-ink{from{opacity:.4;scale:.8}to{opacity:1;scale:1.1}}
.depth-running .depth-wait-ink{display:none}
.depth-drop{position:absolute;left:var(--impact-x);top:var(--impact-y);width:46px;height:92px;object-fit:contain;transform:translate(-50%,-50%);opacity:0}
.depth-running .depth-drop{animation:depth-fall .45s cubic-bezier(.68,.03,.93,.48) both}
@keyframes depth-fall{0%{opacity:0;translate:0 calc(var(--fall) * -1);scale:.6 .65}12%{opacity:1}68%{scale:.76 1.3}92%{scale:.7 1.7}100%{opacity:1;translate:0 0;scale:1.25 .6}}
.depth-splash{position:absolute;left:var(--impact-x);top:var(--impact-y);width:min(92vw,840px);height:auto;transform:translate(-50%,-50%);opacity:0;filter:brightness(.18) drop-shadow(0 0 0 #201f1b) drop-shadow(0 0 0 #201f1b)}
.depth-hit .depth-drop{display:none}
.depth-hit .depth-splash{animation:depth-splash .5s cubic-bezier(.12,.8,.2,1) both}
@keyframes depth-splash{0%{opacity:1;transform:translate(-50%,-50%) scale(.6) rotate(-9deg)}20%{opacity:.96}100%{opacity:0;transform:translate(-50%,-50%) scale(1.08) rotate(3deg)}}
.depth-wave,.depth-flare,.depth-satellite{position:absolute;left:var(--impact-x);top:var(--impact-y);opacity:0}
.depth-core{position:absolute;left:var(--impact-x);top:var(--impact-y);width:140px;height:110px;border-radius:43% 57% 38% 62%;background:radial-gradient(ellipse,#171612 12%,rgba(28,27,24,.88) 40%,transparent 72%);opacity:0;transform:translate(-50%,-50%)}
.depth-hit .depth-core{animation:depth-core .5s cubic-bezier(.1,.7,.2,1) both}
@keyframes depth-core{0%{opacity:1;transform:translate(-50%,-50%) scale(.25)}22%{opacity:.95}100%{opacity:0;transform:translate(-50%,-50%) scale(2.9)}}
.depth-wave{width:160px;height:90px;border:2px solid rgba(41,32,21,.48);border-radius:48% 52% 44% 56%;transform:translate(-50%,-50%)}
.depth-hit .depth-wave{animation:depth-wave .66s cubic-bezier(.12,.7,.2,1) both}
@keyframes depth-wave{0%{opacity:.58;transform:translate(-50%,-50%) scale(.3)}100%{opacity:0;transform:translate(-50%,-50%) scale(5.8);border-width:.4px}}
.depth-flare{width:min(85vw,850px);aspect-ratio:1;background:radial-gradient(ellipse,rgba(213,164,77,.28),transparent 63%);transform:translate(-50%,-50%);mix-blend-mode:multiply}
.depth-hit .depth-flare{animation:depth-flare .6s ease-out both}
@keyframes depth-flare{0%{opacity:.9;scale:.4}100%{opacity:0;scale:1.4}}
.depth-satellite{background:#201f1b;border-radius:42% 58% 60% 40%}
.depth-hit .depth-satellite{animation:depth-spit .48s cubic-bezier(.08,.75,.16,1) both}
@keyframes depth-spit{0%{opacity:.9;transform:translate(0,0) scale(.4)}75%{opacity:.6}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.7)}}
.depth-impact{animation:depth-kick .32s ease-out both}
@keyframes depth-kick{0%{transform:translate3d(0,0,0)}16%{transform:translate3d(0,5px,0)}38%{transform:translate3d(1px,-3px,0)}64%{transform:translate3d(-1px,1px,0)}100%{transform:translate3d(0,0,0)}}
.depth-bars{position:absolute;inset:0;border-block:clamp(18px,4.5vh,48px) solid #1c1b18;opacity:0}
.depth-running .depth-bars{animation:depth-letterbox 2s ease both}
@keyframes depth-letterbox{0%{opacity:0}10%,40%{opacity:.9}75%{opacity:.45}100%{opacity:0}}
.depth-skip{position:absolute;right:24px;bottom:max(16px,1.4vh);font:11px/1.5 sans-serif;letter-spacing:.14em;color:#eee6d5;opacity:0}
.depth-running .depth-skip{animation:depth-hint 2s ease both}
@keyframes depth-hint{0%{opacity:0}15%,65%{opacity:.7}100%{opacity:0}}

/* 原有山层先到终值，让墨洞里立即有景；文字与印章由本分镜统一定时。 */
.depth-directed .ink-scene>.far,.depth-directed .ink-scene>.ls-far,.depth-directed .ink-scene>.mid,.depth-directed .ink-scene>.near,.depth-directed .ink-scene>.ls-palace,.depth-directed .ink-scene>.ls-glow,.depth-directed .ink-scene>.bamboo{animation:none!important;opacity:1}
.depth-directed .ink-scene>.ls-sun{animation:none!important;opacity:.8}
.depth-directed h1,.depth-directed .go,.depth-directed .stroke-u,.depth-directed .pan-art i,.depth-directed .ls-title{animation:none!important;opacity:1;clip-path:none}
.depth-title-line{display:block}
.depth-intro .depth-directed h1{opacity:1}
.depth-intro:not(.depth-running) .depth-directed .hero,.depth-intro:not(.depth-running) .depth-directed header,.depth-intro:not(.depth-running) .depth-directed footer,.depth-intro:not(.depth-running) .depth-directed .ls-title{visibility:hidden}
.depth-running .depth-directed .depth-title-line{animation:depth-word .48s calc(1.3s - var(--depth-wait,0ms)) cubic-bezier(.15,.7,.3,1) both}
.depth-running .depth-directed .depth-title-line:nth-child(2){animation-delay:calc(1.45s - var(--depth-wait,0ms))}
.depth-running .depth-directed .go{animation:depth-word .45s calc(1.6s - var(--depth-wait,0ms)) ease-out both!important}
.depth-running .depth-directed .stroke-u{animation:depth-word .45s calc(1.68s - var(--depth-wait,0ms)) ease-out both!important}
.depth-running .depth-directed header,.depth-running .depth-directed footer,.depth-running .depth-directed .ls-title{animation:depth-word .45s calc(1.45s - var(--depth-wait,0ms)) ease-out both!important}
.depth-running .depth-directed .pan-art{animation:depth-word .34s calc(1.9s - var(--depth-wait,0ms)) ease-out both}
.depth-running .depth-directed .pan-art .splash{animation:depth-pan-ink .48s calc(1.9s - var(--depth-wait,0ms)) ease-out both!important}
.depth-running .depth-directed .pan-art .brush{animation:write .4s calc(1.96s - var(--depth-wait,0ms)) cubic-bezier(.2,.7,.3,1) both!important;clip-path:inset(0 100% 0 0)}
.depth-running .depth-directed .pan-art .enso{animation:depth-word .35s calc(2.02s - var(--depth-wait,0ms)) ease-out both!important}
.depth-running .depth-directed .pan-art .stamp{animation:stamp .34s calc(2.05s - var(--depth-wait,0ms)) cubic-bezier(.3,1.6,.5,1) both!important}
@keyframes depth-word{from{opacity:0;filter:blur(7px);transform:translateY(14px)}to{opacity:1;filter:blur(0);transform:translateY(0)}}
@keyframes depth-pan-ink{from{opacity:0;transform:scale(.7)}to{opacity:.14;transform:scale(1)}}
.depth-landed .pan-art .splash{opacity:.14}
.depth-landed .pan-art .stamp{transform:rotate(-6deg)}
.depth-landed .hero,.depth-landed h1,.depth-landed .go,.depth-landed .pan-art,.depth-landed header,.depth-landed footer,.depth-landed .ls-title{opacity:1;filter:none}
.depth-landed .depth-title-line{opacity:1;filter:none;transform:none}

/* 暂停与降级连 CSS 一起管；减少动态随时生效，内容不留在半途。 */
.depth-rest .depth-cssfog,.depth-rest .depth-shafts,.depth-rest .depth-gold,
html.fx-paused .depth-scene .mist,html.fx-idle .depth-scene .mist,html.fx-hold .depth-scene .mist,html.depth-intro .depth-scene .mist{animation-play-state:paused!important}
.depth-still .depth-fog,.depth-still .depth-cssfog,.depth-still .depth-shafts{display:none!important}
@media (max-width:760px){.depth-bars{border-block-width:22px}.depth-skip{right:16px;font-size:10px}.depth-drop{width:36px;height:72px}.depth-wave{width:100px;height:64px}.depth-shafts{opacity:.5}}
@media (prefers-reduced-motion:reduce){.depth-intro-layer,.depth-fog,.depth-cssfog,.depth-shafts,.depth-radial{display:none!important}.depth-again .ink-scene,.depth-impact{animation:none!important}.depth-scene{--depth-y:0px!important;--depth-scale:1!important}.depth-scene .far,.depth-scene .mid,.depth-scene .near{transition:none!important}}