/* seams：段与段的衔接（全站共用，配合 assets/js/seams.js；没有 JS 时什么都不发生，页面保持原样）
   用户 2026-09-26：「每个页面之间衔接太生硬」。

   1. 黑底 / 荧光段（页面级 section.bg-dark / section.bg-neon、页脚 .ftr）做成圆角「卡片」：
      段落自己的底色不动，seams.js 往段里注入一层 <i class="seam-bg">（z-index:-2，垫在内容和
      doodles 简笔画层之下），在卡片圆角外、两侧内缩出来的空隙里画「邻居」的颜色——顶角是上一段的
      底色，底角是下一段的底色（页首 / 页尾没有邻居的那条边不圆），两侧空隙进场时用上一段、离场时用下一段。
      这样做而不是「段落底色换成邻居色、另铺一层卡片色」：段自己的底色 / 底纹原样保留，两张卡片
      平接处下面也还是卡片色（接缝不会漏出一条浅色细线），滚动时只重绘四个角和两条窄边。
      区块可用两个 CSS 变量微调（写在区块自己的 CSS 里）：
        --seam-sheet-top  卡片从区块内这个位置开始（about 的影片条：50%，上半象牙、下半深色）
        --seam-hold       top | bottom | both：这条边不做进场 / 离场，保持静止小圆角（边上钉着控件、或卡片边旁只露出
                          一条窄肩时用：09-unions 底边、about 影片条顶边）
      页首 / 页尾那条没有邻居的边恒为直角、不内缩（页脚的底边、页面第一块的顶边）。
      卡片形状只由下面这些变量描述，seams.js 每帧写在段落元素上（px，整数）：
        --seam-inset  两侧内缩（进场 / 离场时 >0，铺满时 0）
        --seam-rt     上边圆角（与上一张卡片平接、或是页面第一块时恒为 0）
        --seam-rb     下边圆角（与下一张卡片平接、或是页面最后一块——页脚——时恒为 0）
        --seam-r      max(rt, rb)，给只要一个半径的简单用法
        --seam-clip   现成的 clip-path 值：inset(0 inset round rt rt rb rb)，对「铺满整段」的层直接用
      doodles 简笔画层（z-index 介于 -2 与内容之间）请用 clip-path:var(--seam-clip) 跟着卡片边走。
      贴边的全宽装饰（跑马灯、点阵）在各自区块 CSS 里同样用这些变量裁剪，见 09-unions / 11-getapp 等。
   2. 浅色段之间（象牙 / 白 / 暖 / 浅绿）：下一段顶部垫一层从上一段颜色渐变到透明的 .seam-blend，
      颜色相同的不加；门票段（06-events）不动它，改垫在上一段的底部（.seam-blend.is-bottom）；
      窄屏（≤700px）时门票段整段铺着一块白色面板（它自己的样式），那时它两侧不做过渡（见 seams.js PROTECT_NARROW）。
   规则：不发光、不模糊、不劫持滚动、内容不移动（注入的都是绝对定位层，不占版面）。 */

/* 每帧会变的变量注册成「不继承」：写在段落上时不会让整段几百个后代都重算样式。
   只有段落的直接子元素（背景层、跑马灯、点阵、doodles 层…）和背景层里的小块显式 inherit——
   不要把 inherit 再往深处加（例如 .doodles 的后代）：父元素的非继承属性一变，带显式 inherit 的子元素
   会整层重算，doodles 那层 ~90 个节点每帧都要跟着重算一遍（实测 epoch 进场每帧样式重算 3.4ms → 1.5ms）。
   doodles 只在 .doodles 自己身上用 --seam-clip，它是段落的直接子元素，已被 .seam-sheet>* 覆盖。
   不支持 @property 的浏览器照常继承，只是慢一点。 */
@property --seam-inset{syntax:'<length>';inherits:false;initial-value:0px}
@property --seam-rt{syntax:'<length>';inherits:false;initial-value:0px}
@property --seam-rb{syntax:'<length>';inherits:false;initial-value:0px}
@property --seam-r{syntax:'<length>';inherits:false;initial-value:0px}
@property --seam-clip{syntax:'*';inherits:false}
.seam-sheet>*,.seam-bg>i{
  --seam-inset:inherit;--seam-rt:inherit;--seam-rb:inherit;--seam-r:inherit;--seam-clip:inherit}

/* 卡片段：需要自己的层叠上下文，z-index:-2 的背景层才会垫在段落底色之上、内容之下。
   .sec 本来就有；页脚和不带 .sec 的荧光条（sponsors .sp-band）靠这里补上。
   position 用 :where() 零优先级：已有的 position 声明（relative / sticky…）一律优先。 */
:where(.seam-sheet){position:relative}
.seam-sheet{isolation:isolate;
  --seam-clip:inset(0 var(--seam-inset,0px) round var(--seam-rt,0px) var(--seam-rt,0px) var(--seam-rb,0px) var(--seam-rb,0px))}

/* 段落自己是 overflow:hidden 时，seams.js 确认版面不变后加 .seam-clip：换成 overflow:clip + 1px 裁剪余量，
   角块 / 侧条朝外多伸的那 1px 才画得出来（1.25 / 1.5 倍缩放下角里不再留灰线）。!important：压过各区块自己的 overflow 声明。 */
.seam-sheet.seam-clip{overflow:clip!important;overflow-clip-margin:1px!important}

/* 背景层：只画卡片外面的邻居色（两条侧边 + 顶 / 底四个反向圆角），卡片色就是段落自己的底色。
   top 可由段落用 --seam-sheet-top 下移（about 的影片条：深色从它的中线开始）。
   层叠约定：z-index:-2（doodles 的 .doodles 是 -1，内容在 0 及以上）。没有 doodles 层、又有内容 / 投影会伸进
   卡片外空隙的段，可在自己的 CSS 里把它抬到内容之上（z-index:1），等于按卡片形状裁掉伸出去的部分：
   09-unions（窄屏的圆形徽章）、sponsors .sp-band（活动照片的投影）。
   每帧只变 transform 和背景尺寸，小块的盒子尺寸 / 位置固定：滚动时不触发布局，也不产生 layout shift 记录。 */
.seam-bg{position:absolute;left:0;right:0;top:var(--seam-sheet-top,0px);bottom:0;z-index:-2;display:block;pointer-events:none;
  margin:0;padding:0;border:0;font-style:normal}
.seam-bg>i{position:absolute;display:block;margin:0;padding:0;border:0;pointer-events:none}
/* 两侧空隙：固定 48px 宽（≥ 最大内缩 44px）的色条，平移到只有 --seam-inset 宽露在段内；
   移到段外的部分由段落的 overflow-x:clip（.sec / 页脚 / sp-band 的 overflow:hidden）或 html 的 overflow-x:clip 裁掉。
   颜色由 seams.js 按进场 / 离场切成上一段或下一段的颜色 */
.seam-bg>.seam-gl,.seam-bg>.seam-gr{top:-1px;bottom:-1px;width:48px;background:var(--seam-gc,transparent)}
.seam-bg.is-end>.seam-gl,.seam-bg.is-end>.seam-gr{bottom:0}
.seam-bg>.seam-gl{left:0;transform:translateX(calc(var(--seam-inset,0px) - 100%))}
.seam-bg>.seam-gr{right:0;transform:translateX(calc(100% - var(--seam-inset,0px)))}
/* 反向圆角：固定 90px 见方（≥ 最大圆角 88px + 1），随内缩平移；只在左上（或对应角）一块「半径 + 1」见方的
   背景格里画——圆外涂邻居色（1px 过渡当抗锯齿），格子外透明。
   两侧空隙和圆角块都朝卡片外多伸 1px：1.25 / 1.5 倍这类小数缩放下，段落底色在边上那一行设备像素可能是抗锯齿的
   半行，小块却对齐到整像素，不伸出去这半行卡片色会在角里留下一道细线；多出的 1px 由段落自己的 overflow 裁剪
   盖住那半行，或落在邻段同色的底上。圆角块也朝侧边空隙多伸 1px（压在空隙上，同色），避免两块在同一个小数像素
   位置各自抗锯齿、中间透出一道竖线。（段落本身是合成层、底色边缘抗锯齿的——目前只有 09-unions——在 1.5 倍下
   角里仍会剩一行约 20% 的卡片色，肉眼基本看不出。） */
.seam-bg>.seam-k{display:none;width:90px;height:90px;background-repeat:no-repeat}
.seam-bg.is-top>.seam-tl,.seam-bg.is-top>.seam-tr{display:block;top:-1px;
  background-size:calc(var(--seam-rt,0px) + 1px) calc(var(--seam-rt,0px) + 1px)}
.seam-bg.is-bot>.seam-bl,.seam-bg.is-bot>.seam-br{display:block;bottom:-1px;
  background-size:calc(var(--seam-rb,0px) + 1px) calc(var(--seam-rb,0px) + 1px)}
.seam-bg>.seam-tl,.seam-bg>.seam-bl{left:-1px;transform:translateX(var(--seam-inset,0px))}
.seam-bg>.seam-tr,.seam-bg>.seam-br{right:-1px;transform:translateX(calc(-1 * var(--seam-inset,0px)))}
.seam-bg>.seam-tl{background-position:0 0;
  background-image:radial-gradient(circle at 100% 100%,transparent calc(var(--seam-rt,0px) - .5px),var(--seam-prev) calc(var(--seam-rt,0px) + .5px))}
.seam-bg>.seam-tr{background-position:100% 0;
  background-image:radial-gradient(circle at 0 100%,transparent calc(var(--seam-rt,0px) - .5px),var(--seam-prev) calc(var(--seam-rt,0px) + .5px))}
.seam-bg>.seam-bl{background-position:0 100%;
  background-image:radial-gradient(circle at 100% 0,transparent calc(var(--seam-rb,0px) - .5px),var(--seam-next) calc(var(--seam-rb,0px) + .5px))}
.seam-bg>.seam-br{background-position:100% 100%;
  background-image:radial-gradient(circle at 0 0,transparent calc(var(--seam-rb,0px) - .5px),var(--seam-next) calc(var(--seam-rb,0px) + .5px))}

/* 视口高度探针（seams.js watchViewport）：fixed、上下贴边、零宽，不可见、不占版面 */
.seam-vh{position:fixed;left:0;top:0;bottom:0;width:0;margin:0;padding:0;border:0;visibility:hidden;pointer-events:none}

/* 卡片段里 base.css 的通用铺满装饰（细点阵）跟着卡片形状裁 */
.seam-sheet>.dotgrid{clip-path:var(--seam-clip)}

/* 浅色段之间的柔和过渡：上一段颜色 → 透明，垫在内容之下。
   朝缝的那一边多伸出 2px（用的正是缝那边的颜色）：1.25 / 1.5 倍这类小数缩放下，层和段落各自对齐到设备像素，
   只贴着 top:0 会在缝上漏出一行段落自己的底色；段落带 overflow 裁剪时伸出去的部分会被裁掉，
   所以 seams.js 另在段落自己的背景里垫 3px 同色条（内联 background-image，段落原本没有背景图时才加）。 */
.seam-blend{position:absolute;left:0;right:0;top:-2px;height:calc(clamp(80px,10vw,180px) + 2px);z-index:-2;display:block;pointer-events:none;
  margin:0;padding:0;border:0;background:linear-gradient(to bottom,var(--seam-from) 2px,var(--seam-from-0))}
.seam-blend.is-bottom{top:auto;bottom:-2px;background:linear-gradient(to top,var(--seam-from) 2px,var(--seam-from-0))}

@media print{.seam-bg,.seam-blend{display:none}}
@media (forced-colors:active){.seam-bg,.seam-blend{display:none}}