/* ============================================================
   seam.css — 章节之间的转场
   一条随滚动上升的光线，把上一个时代换成下一个时代
   ============================================================ */

.seam{
  position:relative;
  height:clamp(300px,44vh,420px);
  overflow:clip;
  isolation:isolate;
  display:grid;
  place-items:center;
  --p:0;
  --from:#0A0908;
  --to:#111010;
  --accent:#D9A05B;
  box-shadow:inset 0 22px 30px -26px rgba(0,0,0,.5);
}
/* 上缘的一条细光，把接缝做成一个设计好的切面 */
.seam::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:4;
  background:linear-gradient(90deg,transparent,var(--accent) 22%,rgba(255,255,255,.75) 50%,var(--accent) 78%,transparent);
  opacity:.5;
  pointer-events:none;
}

/* 底层：上一个时代 */
.seam-base{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 90% at 50% 120%,rgba(255,255,255,.06),transparent 70%),
    var(--from);
}
/* 上层：下一个时代，从底部升起 */
.seam-next{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 90% at 50% -20%,rgba(255,255,255,.07),transparent 70%),
    var(--to);
  clip-path:inset(calc((1 - var(--p)) * 100%) 0 0 0);
  will-change:clip-path;
}
/* 交界处的光 */
.seam-horizon{
  position:absolute;left:0;right:0;height:2px;
  top:calc((1 - var(--p)) * 100%);
  background:linear-gradient(90deg,transparent 0%,var(--accent) 16%,#fff 50%,var(--accent) 84%,transparent 100%);
  box-shadow:0 0 14px 1px var(--accent),0 0 44px 8px rgba(255,255,255,.14);
  opacity:.92;
  pointer-events:none;
  z-index:2;
}
/* 细扫描线 */
.seam-tex{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:repeating-linear-gradient(180deg,rgba(255,255,255,.06) 0 1px,transparent 1px 4px);
  opacity:.5;
  mix-blend-mode:overlay;
}
/* 巨大的下一个章节号 */
.seam-ghost{
  position:absolute;right:-.06em;top:50%;transform:translateY(-52%);
  z-index:1;pointer-events:none;
  font-family:var(--f-display);
  font-size:clamp(140px,20vw,290px);
  line-height:.8;
  color:transparent;
  -webkit-text-stroke:1.2px var(--accent);
  opacity:.2;
  letter-spacing:-.04em;
}

/* 文字带 */
.seam-band{
  position:relative;z-index:3;width:100%;
  padding-block:clamp(15px,2.3vh,25px);
  background:rgba(9,8,7,.66);
  border-top:1px solid rgba(239,231,218,.16);
  border-bottom:1px solid rgba(239,231,218,.16);
  backdrop-filter:blur(16px) saturate(120%);
  -webkit-backdrop-filter:blur(16px) saturate(120%);
  box-shadow:0 26px 60px -34px rgba(0,0,0,.8);
  color:#EFE7DA;
}
.seam-grid{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(16px,3vw,44px);
  align-items:center;
}
.seam-tag{
  font-family:var(--f-mono);
  font-size:10px;line-height:1;
  letter-spacing:.16em;
  color:rgba(239,231,218,.5);
  display:flex;align-items:center;gap:5px;
  white-space:nowrap;
}
.seam-tag i{color:var(--accent);opacity:.9;font-style:normal}
.seam-phrase{
  font-family:var(--f-serif);
  font-weight:300;
  font-size:clamp(18px,2.05vw,27px);
  line-height:1.45;
  letter-spacing:.01em;
  color:#F3EBDE;
}
.seam-side{
  text-align:right;
  font-family:var(--f-mono);
  font-size:8.5px;letter-spacing:.18em;
  color:rgba(239,231,218,.42);
  white-space:nowrap;
}
.seam-side b{display:block;font-weight:400;margin-bottom:5px}
.seam-side em{
  font-style:normal;color:var(--accent);
  font-size:11px;letter-spacing:.06em;
  font-variant-numeric:tabular-nums;
}
.seam-side em span{font-size:11px}

.seam-meter{
  display:block;height:2px;margin-top:clamp(10px,1.5vh,15px);
  background:rgba(239,231,218,.13);
  overflow:hidden;
}
.seam-meter i{
  display:block;height:100%;
  transform-origin:0 50%;
  transform:scaleX(var(--p));
  background:linear-gradient(90deg,var(--accent),#fff);
  opacity:.85;
}

/*
   每个接缝有自己的“动作词”。
   这些小型图形不承担信息，只负责把上一章的视觉语法递给下一章：
   开机是扫描，Scratch 是折叠，代码是编译，Minecraft 是体素，网页是拼页，AI 是连线。
*/
.seam-objects{
  position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none;
  opacity:.92;
}
.seam-objects i{position:absolute;display:block;opacity:0;will-change:transform,opacity}

/* 01 · 开机：蓝色扫描线从黑屏里逐条点亮 */
.seam[data-to="win7"] .seam-objects::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(180deg,transparent 0 19px,rgba(126,195,232,.13) 20px,transparent 21px 40px);
  clip-path:inset(calc((1 - var(--p)) * 100%) 0 0 0);
  opacity:.8;
}
.seam[data-to="win7"] .seam-objects i{
  left:12%;width:76%;height:1px;background:var(--accent);
  box-shadow:0 0 14px var(--accent),0 0 42px rgba(126,195,232,.45);
  transform:translate3d(0,calc((1 - var(--p)) * 150px),0) scaleX(calc(.35 + var(--p) * .65));
  opacity:var(--p);
}
.seam[data-to="win7"] .seam-objects i:nth-child(1){top:18%}
.seam[data-to="win7"] .seam-objects i:nth-child(2){top:28%;width:54%;left:23%}
.seam[data-to="win7"] .seam-objects i:nth-child(3){top:39%;width:88%;left:6%}
.seam[data-to="win7"] .seam-objects i:nth-child(4){top:51%;width:45%;left:28%}
.seam[data-to="win7"] .seam-objects i:nth-child(5){top:63%;width:68%;left:16%}
.seam[data-to="win7"] .seam-objects i:nth-child(6){top:72%;width:34%;left:33%}
.seam[data-to="win7"] .seam-objects i:nth-child(7){top:82%;width:60%;left:20%}
.seam[data-to="win7"] .seam-objects i:nth-child(8){top:90%;width:24%;left:38%}

/* 02 · Scratch：Windows 窗口像纸一样折起，露出彩色积木 */
.seam[data-to="scratch"] .seam-objects i{
  width:clamp(28px,5vw,74px);height:clamp(18px,3vw,42px);
  border:1px solid rgba(255,255,255,.65);border-radius:5px;
  box-shadow:6px 7px 0 rgba(25,25,25,.1),0 0 20px rgba(255,140,26,.16);
  transform:translate3d(calc((1 - var(--p)) * -180px),calc((1 - var(--p)) * 120px),0) rotate(calc((1 - var(--p)) * -20deg));
  opacity:var(--p);
}
.seam[data-to="scratch"] .seam-objects i:nth-child(odd){background:#FF8C1A}
.seam[data-to="scratch"] .seam-objects i:nth-child(even){background:#4C97FF}
.seam[data-to="scratch"] .seam-objects i:nth-child(1){left:16%;top:23%}
.seam[data-to="scratch"] .seam-objects i:nth-child(2){left:31%;top:35%}
.seam[data-to="scratch"] .seam-objects i:nth-child(3){left:46%;top:19%}
.seam[data-to="scratch"] .seam-objects i:nth-child(4){left:61%;top:34%}
.seam[data-to="scratch"] .seam-objects i:nth-child(5){left:23%;top:57%}
.seam[data-to="scratch"] .seam-objects i:nth-child(6){left:42%;top:67%}
.seam[data-to="scratch"] .seam-objects i:nth-child(7){left:58%;top:57%}
.seam[data-to="scratch"] .seam-objects i:nth-child(8){left:72%;top:69%}

/* 03 · 代码：积木压缩成等宽的编译柱，最后落成一条光标 */
.seam[data-to="code"] .seam-objects::before{
  content:"";position:absolute;left:14%;right:14%;bottom:22%;height:1px;
  background:var(--accent);box-shadow:0 0 16px var(--accent);opacity:var(--p);
}
.seam[data-to="code"] .seam-objects i{
  bottom:22%;width:clamp(7px,1vw,14px);height:clamp(28px,8vw,104px);
  background:linear-gradient(180deg,rgba(143,167,255,.15),var(--accent));
  box-shadow:0 0 20px rgba(143,167,255,.3);
  transform:scaleY(calc(.1 + var(--p) * .9)) translateY(calc((1 - var(--p)) * 45px));
  transform-origin:bottom;
  opacity:var(--p);
}
.seam[data-to="code"] .seam-objects i:nth-child(1){left:18%;height:34px}
.seam[data-to="code"] .seam-objects i:nth-child(2){left:27%;height:66px}
.seam[data-to="code"] .seam-objects i:nth-child(3){left:36%;height:46px}
.seam[data-to="code"] .seam-objects i:nth-child(4){left:45%;height:90px}
.seam[data-to="code"] .seam-objects i:nth-child(5){left:54%;height:54px}
.seam[data-to="code"] .seam-objects i:nth-child(6){left:63%;height:75px}
.seam[data-to="code"] .seam-objects i:nth-child(7){left:72%;height:42px}
.seam[data-to="code"] .seam-objects i:nth-child(8){left:81%;height:62px}

/* 04 · Minecraft：代码碎成带透视的方块，向天空搭出一个世界 */
.seam[data-to="minecraft"] .seam-objects::before{
  content:"";position:absolute;inset:-30%;
  background:linear-gradient(90deg,transparent 49.7%,rgba(255,255,255,.12) 50%,transparent 50.3%),linear-gradient(0deg,transparent 49.7%,rgba(255,255,255,.12) 50%,transparent 50.3%);
  background-size:42px 42px;transform:perspective(240px) rotateX(58deg) translateY(36%);opacity:calc(var(--p) * .55);
}
.seam[data-to="minecraft"] .seam-objects i{
  width:clamp(20px,3vw,46px);height:clamp(20px,3vw,46px);
  background:linear-gradient(135deg,#B7E66F,#6FA83F 72%);
  border:1px solid rgba(30,66,24,.55);
  box-shadow:inset -6px -7px 0 rgba(38,83,31,.28),0 9px 18px rgba(33,72,28,.18);
  transform:translate3d(0,calc((1 - var(--p)) * 130px),0) rotate(45deg) rotateX(12deg);
  opacity:var(--p);
}
.seam[data-to="minecraft"] .seam-objects i:nth-child(1){left:18%;top:48%}
.seam[data-to="minecraft"] .seam-objects i:nth-child(2){left:28%;top:31%;transform:translate3d(0,calc((1 - var(--p)) * 150px),0) rotate(45deg) rotateX(12deg)}
.seam[data-to="minecraft"] .seam-objects i:nth-child(3){left:39%;top:54%}
.seam[data-to="minecraft"] .seam-objects i:nth-child(4){left:50%;top:28%;transform:translate3d(0,calc((1 - var(--p)) * 180px),0) rotate(45deg) rotateX(12deg)}
.seam[data-to="minecraft"] .seam-objects i:nth-child(5){left:61%;top:49%}
.seam[data-to="minecraft"] .seam-objects i:nth-child(6){left:70%;top:35%;transform:translate3d(0,calc((1 - var(--p)) * 160px),0) rotate(45deg) rotateX(12deg)}
.seam[data-to="minecraft"] .seam-objects i:nth-child(7){left:33%;top:70%}
.seam[data-to="minecraft"] .seam-objects i:nth-child(8){left:58%;top:70%}

/* 05 · 网页：像素格从四周拼成第一张页面 */
.seam[data-to="web"] .seam-objects i{
  width:clamp(24px,4vw,60px);height:clamp(16px,2.5vw,34px);
  background:rgba(243,238,229,.92);border:1px solid rgba(201,123,46,.52);
  box-shadow:0 0 0 1px rgba(255,255,255,.3),0 7px 20px rgba(110,68,35,.18);
  transform:translate3d(calc((1 - var(--p)) * 210px),calc((1 - var(--p)) * -100px),0) rotate(calc((1 - var(--p)) * 28deg));
  opacity:var(--p);
}
.seam[data-to="web"] .seam-objects i:nth-child(even){background:#C97B2E}
.seam[data-to="web"] .seam-objects i:nth-child(1){left:20%;top:25%}
.seam[data-to="web"] .seam-objects i:nth-child(2){left:37%;top:25%}
.seam[data-to="web"] .seam-objects i:nth-child(3){left:54%;top:25%}
.seam[data-to="web"] .seam-objects i:nth-child(4){left:71%;top:25%}
.seam[data-to="web"] .seam-objects i:nth-child(5){left:20%;top:58%}
.seam[data-to="web"] .seam-objects i:nth-child(6){left:37%;top:58%}
.seam[data-to="web"] .seam-objects i:nth-child(7){left:54%;top:58%}
.seam[data-to="web"] .seam-objects i:nth-child(8){left:71%;top:58%}

/* 06 · AI：从页面碎片中长出节点与连接线 */
.seam[data-to="ai"] .seam-objects::before{
  content:"";position:absolute;inset:12% 20%;
  background:linear-gradient(28deg,transparent 49.4%,rgba(180,155,255,.4) 49.8% 50.2%,transparent 50.6%),linear-gradient(152deg,transparent 49.4%,rgba(180,155,255,.32) 49.8% 50.2%,transparent 50.6%),linear-gradient(90deg,transparent 49.4%,rgba(180,155,255,.26) 49.8% 50.2%,transparent 50.6%);
  opacity:var(--p);transform:scale(calc(.75 + var(--p) * .25));
}
.seam[data-to="ai"] .seam-objects i{
  width:clamp(8px,1vw,14px);height:clamp(8px,1vw,14px);border-radius:50%;
  background:#EDEAF6;border:2px solid var(--accent);box-shadow:0 0 0 5px rgba(180,155,255,.12),0 0 24px var(--accent);
  transform:scale(calc(.25 + var(--p) * .75));opacity:var(--p);
}
.seam[data-to="ai"] .seam-objects i:nth-child(1){left:23%;top:31%}.seam[data-to="ai"] .seam-objects i:nth-child(2){left:49%;top:22%}.seam[data-to="ai"] .seam-objects i:nth-child(3){left:74%;top:34%}.seam[data-to="ai"] .seam-objects i:nth-child(4){left:35%;top:57%}.seam[data-to="ai"] .seam-objects i:nth-child(5){left:64%;top:61%}.seam[data-to="ai"] .seam-objects i:nth-child(6){left:50%;top:43%}.seam[data-to="ai"] .seam-objects i:nth-child(7){left:18%;top:72%}.seam[data-to="ai"] .seam-objects i:nth-child(8){left:80%;top:73%}

/* 07 · 仍在加载：所有线索收束成一个仍会呼吸的光圈 */
.seam[data-to="outro"] .seam-objects::before,
.seam[data-to="outro"] .seam-objects::after{
  content:"";position:absolute;left:50%;top:50%;width:clamp(110px,24vw,300px);aspect-ratio:1;border:1px solid var(--accent);border-radius:50%;
  transform:translate(-50%,-50%) scale(calc(.08 + var(--p) * .92));box-shadow:0 0 34px rgba(217,160,91,.25),inset 0 0 34px rgba(217,160,91,.1);opacity:var(--p);
}
.seam[data-to="outro"] .seam-objects::after{width:clamp(220px,48vw,600px);opacity:calc(var(--p) * .32);transform:translate(-50%,-50%) scale(calc(.08 + var(--p) * .82))}
.seam[data-to="outro"] .seam-objects i{width:3px;height:3px;background:#F4E9D8;border-radius:50%;box-shadow:0 0 12px var(--accent);transform:translate3d(0,calc((1 - var(--p)) * 90px),0) scale(var(--p));opacity:var(--p)}
.seam[data-to="outro"] .seam-objects i:nth-child(1){left:29%;top:25%}.seam[data-to="outro"] .seam-objects i:nth-child(2){left:67%;top:24%}.seam[data-to="outro"] .seam-objects i:nth-child(3){left:22%;top:64%}.seam[data-to="outro"] .seam-objects i:nth-child(4){left:77%;top:62%}.seam[data-to="outro"] .seam-objects i:nth-child(5){left:38%;top:73%}.seam[data-to="outro"] .seam-objects i:nth-child(6){left:61%;top:72%}.seam[data-to="outro"] .seam-objects i:nth-child(7){left:14%;top:43%}.seam[data-to="outro"] .seam-objects i:nth-child(8){left:86%;top:42%}

/* 章节前后留白收紧 */
.seam + .scene{padding-top:clamp(58px,7.5vh,104px)}
.scene:not(.scene--hero):has(+ .seam){padding-bottom:clamp(58px,7.5vh,104px)}

/* 夜色模式下的 Minecraft 接缝 */
body.is-night .seam[data-to="minecraft"]{--to:#0A1230 !important}
body.is-night .seam[data-from="minecraft"]{--from:#22345F !important}

@media (max-width:760px){
  .seam{height:clamp(250px,34vh,310px)}
  .seam-grid{grid-template-columns:1fr auto;gap:8px 14px}
  .seam-tag{grid-column:1;grid-row:1}
  .seam-side{grid-column:2;grid-row:1}
  .seam-phrase{grid-column:1/-1;grid-row:2;font-size:18px}
  .seam-ghost{font-size:120px;opacity:.12;right:-.08em}
  .seam-band{padding-block:16px}
}

@media (prefers-reduced-motion:reduce){
  .seam{--p:1}
  .seam-objects{display:none}
}