/* doodles：黑底段的手绘简笔画 + 跨接缝的「桥」（配合 assets/js/doodles.js；没有 JS 时什么都不出现）
   用户 2026-09-26：「黑色背景页面只有黑色太单调，可以来点简笔画或者交互」。
   分层：seams 的背景层 z-index:-2 → 这里的 .doodles z-index:-1 → 段落内容。
   规则：只有实色线（浅色 / 荧光 #CCFF00），不发光、不模糊、不加阴影；不跟随光标画轨迹 / 粒子 / 聚光。 */

/* 段落要有层叠上下文，-1 的层才会垫在内容下面（.sec 本来就有；页脚 .ftr 靠这里补） */
:where([data-doodles]){position:relative}
[data-doodles]{isolation:isolate}
/* 手型光标的热区（doodles.js setHot）：透明圆，指针停在某个简笔画的命中圈里时才挪过去、打开 pointer-events。
   z-index:1：压在不定位的容器（.container、标题块…）之上，挡不住有层级的内容 / 浮层；光标只改这一个节点，
   不改段落（cursor 会继承，改段落等于整段重算样式）。点到热区的 click 冒泡回段落，照常换图。 */
.dd-hit{position:absolute;left:0;top:0;z-index:1;display:block;width:100px;height:100px;margin:0;padding:0;border:0;border-radius:50%;
  pointer-events:none;transform-origin:50% 50%;background:none}
.dd-hit.is-on{pointer-events:auto;cursor:pointer}

.doodles{position:absolute;inset:0;z-index:-1;display:block;pointer-events:none;overflow:hidden;contain:strict;
  clip-path:var(--seam-clip,none)}

/* 一个简笔画：外层定位（JS 写弹簧位移；段高变化时 top 缓动跟着内容挪）→ .dd-f 慢漂（JS 的 WAAPI）→ svg（点按时的弹跳）。
   seams.css 让 .doodles 里所有后代显式 inherit --seam-*（卡片滚动时每帧在变）；显式 inherit 的元素在父元素任何样式变化时
   都得跟着重算——指针推开时每帧改 .dd 的 transform，就会连带重算里面的 svg / path。简笔画用不到这些变量，在这里截断。 */
.seam-sheet .doodles>.dd,.seam-sheet .doodles>.dd *,.doodles>.dd,.doodles>.dd *,.seam-sheet>.dd-hit{
  --seam-inset:initial;--seam-rt:initial;--seam-rb:initial;--seam-r:initial;--seam-clip:initial}
.dd{position:absolute;display:block;width:var(--s);height:var(--s);margin:calc(var(--s) * -.5) 0 0 calc(var(--s) * -.5);
  color:#F6F6F0;opacity:.3;transition:opacity .4s var(--ease-out,ease-out),top .6s cubic-bezier(.3,.7,.25,1)}
.dd.is-neon{color:var(--neon,#CCFF00);opacity:.9}
.dd.is-near,.dd.is-hit{opacity:1}
.dd.is-out{opacity:0;transition-duration:.36s}
.dd-f{display:block;width:100%;height:100%;transform:rotate(var(--r,0deg))}
.dd svg{display:block;width:100%;height:100%;overflow:visible;fill:none;stroke:currentColor;
  stroke-width:var(--sw,2.5);stroke-linecap:round;stroke-linejoin:round}
.dd path.d{stroke-width:var(--dw,4.4)}
.dd path.k{stroke-width:var(--kw,4.6)}

/* 画出来：每笔 pathLength=1，从 1.02（完全藏起）走到 0；同一个简笔画的几笔依次画 */
.dd path{stroke-dasharray:1 2;stroke-dashoffset:1.02}
.dd.is-drawn path{animation:dd-draw .56s cubic-bezier(.55,.08,.3,1) calc(var(--dl,0s) + var(--k,0) * .2s) both}
.dd.is-swap path{animation-duration:.42s;animation-delay:calc(var(--k,0) * .1s)}
@keyframes dd-draw{from{stroke-dashoffset:1.02}to{stroke-dashoffset:0}}

.doodles.is-static .dd path{animation:none;stroke-dashoffset:0}
.doodles.is-static .dd{transition:opacity .4s var(--ease-out,ease-out)}

/* ── 桥：挂在 <body> 下，两份副本各按接缝裁剪 ─────────────────────────
   .dd-b-up 只留接缝上方，.dd-b-dn 只留下方；浅色一侧用墨色，黑底一侧用浅色。 */
.dd-bridge{position:absolute;left:0;top:0;z-index:3;display:block;pointer-events:none}
.dd-bridge[hidden]{display:none}
.dd-b{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;fill:none;stroke:currentColor;
  stroke-width:var(--bw,2.5);stroke-linecap:round;stroke-linejoin:round}
.dd-b .k{stroke-width:9.4}
.dd-b .dd-bp{stroke-dasharray:1 2;stroke-dashoffset:1.02}
.dd-b-up{clip-path:inset(-100% -100% calc(100% - var(--seam,0px)) -100%)}
.dd-b-dn{clip-path:inset(var(--seam,0px) -100% -100% -100%)}
.dd-bridge.on-top .dd-b-up,.dd-bridge.on-bottom .dd-b-dn{color:var(--ink,#0B0B0A);opacity:.8}
.dd-bridge.on-top .dd-b-dn,.dd-bridge.on-bottom .dd-b-up{color:#F6F6F0;opacity:.66}

@media (prefers-reduced-motion:reduce){
  .dd path{animation:none!important;stroke-dashoffset:0!important}
  .dd{transition:opacity .4s!important}
}
@media print{.doodles,.dd-hit,.dd-bridge{display:none}}
@media (forced-colors:active){.doodles,.dd-hit,.dd-bridge{display:none}}