/* ============================================================
   IBC-Inter Promo — 雾白 / 黑灰几何 / 极淡蓝点缀
   ============================================================ */

:root {
  --ink:    #16181d;
  --gray:   #3d4148;
  --mid:    #828891;
  --faint:  #c9ced6;
  --blue:   #b7d2ee;
  --blue-d: #7aa7d6;  /* 硬化后的蓝：灯珠/灯带用 */
  --blue-b: #4f9be9;  /* 展开态渐变的明亮蓝 */
  --paper:  #fbfbfc;
  --mono:   "JetBrains Mono", "SF Mono", "Cascadia Code", Consolas, monospace;
  --sans:   "Helvetica Neue", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* ---------------- 薄雾（纯灰白，无蓝色倾向） ---------------- */
#mist {
  position: fixed; inset: -10%;
  z-index: 0;
  background:
    radial-gradient(58% 46% at 22% 30%, rgba(228, 230, 234, .85), transparent 70%),
    radial-gradient(50% 42% at 78% 68%, rgba(219, 221, 225, .55), transparent 70%),
    radial-gradient(70% 60% at 55% 15%, rgba(240, 241, 243, .90), transparent 75%),
    radial-gradient(45% 40% at 35% 85%, rgba(213, 215, 219, .35), transparent 70%),
    var(--paper);
  filter: blur(2px);
}

/* ---------------- 几何背景层 ---------------- */
#bgWorld { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.bg-layer {
  position: absolute;
  left: -45%; top: -75%;
  width: 190%; height: 250%; /* 垂直方向加高：翻页=纯垂直平移，需要更大余量 */
  overflow: visible;
  will-change: transform;
}

/* ---------------- 金属颗粒噪点（静态） ---------------- */
#grain {
  position: fixed; inset: 0;
  z-index: 2;
  pointer-events: none;
  background-repeat: repeat;
}

/* ---------------- 特效层 ---------------- */
#fx, #fx2 {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 4; /* 线条位于内容之下、几何背景之上 */
  pointer-events: none;
  overflow: visible;
}

/* ---------------- 舞台与幻灯片 ---------------- */
#stage { position: fixed; inset: 0; z-index: 5; }

.slide {
  position: absolute; inset: 0;
  visibility: hidden;
  pointer-events: none;
}
.slide.active { visibility: visible; pointer-events: auto; }

/* 左侧整高玻璃覆层：固定竖向区域（不随文字块大小变化），
   位于背景/噪点之上、特效层与内容之下；几乎透明——仅一丝白翳与轻模糊，
   真实玻璃质感（参数由用户亲调定稿）；右缘一条极淡发丝线暗示分界。 */
#leftVeil {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: 48vw;
  z-index: 3;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(251, 251, 252, 0.03));
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  border-right: 1px solid rgba(201, 206, 214, 0.2);
  pointer-events: none;
}

.slide-inner {
  position: absolute;
  left: 9vw; top: 50%;
  transform: translateY(-50%);
  max-width: 62vw;
}

/* ---------------- 元素样式 ---------------- */
.rule {
  width: 96px; height: 2px;
  background: var(--ink);
  margin-bottom: 3.2vh;
  transform-origin: left center;
  position: relative;
}
.rule::after {
  content: "";
  position: absolute; right: -14px; top: -3px;
  width: 8px; height: 8px;
  background: var(--blue-d);
  transform: rotate(45deg);
  animation: beadBoxGlow 6.5s ease-in-out infinite;
}

.kicker {
  font-family: var(--mono);
  font-size: clamp(11px, 1vw, 14px);
  letter-spacing: .42em;
  color: var(--mid);
  margin-bottom: 2.6vh;
}

.title {
  font-size: clamp(64px, 10.5vw, 148px);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: .98;
  color: var(--ink);
  text-shadow: .045em .045em 0 var(--blue);
  margin-bottom: 3vh;
}
.title .dash { color: var(--mid); font-weight: 300; }

.heading {
  font-size: clamp(40px, 5.2vw, 72px);
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.12;
  margin-bottom: 3.4vh;
}
.heading.big { font-size: clamp(44px, 6vw, 84px); }

.subtitle {
  font-size: clamp(20px, 2.2vw, 32px);
  color: var(--gray);
  margin-bottom: 2vh;
  letter-spacing: .12em;
}

.tagline {
  font-family: var(--mono);
  font-size: clamp(13px, 1.3vw, 18px);
  color: var(--mid);
  letter-spacing: .18em;
  margin-bottom: 4vh;
}

.badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: clamp(10px, .95vw, 13px);
  letter-spacing: .3em;
  color: var(--gray);
  border: 1px solid var(--faint);
  padding: .7em 1.4em .7em 1.7em;
  position: relative;
  background: rgba(255,255,255,.55);
}
.badge::before {
  content: "";
  position: absolute; left: -5px; top: -5px;
  width: 10px; height: 10px;
  border-left: 1px solid var(--blue-d);
  border-top: 1px solid var(--blue-d);
}

/* 幽灵感大号序号：淡蓝实心填充 + 描边 */
.ghost {
  position: absolute;
  left: 52vw; top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: clamp(180px, 26vw, 380px);
  font-weight: 700;
  line-height: 1;
  color: rgba(183, 210, 238, 0.30);
  -webkit-text-stroke: 1px var(--blue);
  opacity: .55;
  user-select: none;
  pointer-events: none;
}

/* 代码块 */
.code {
  font-family: var(--mono);
  font-size: clamp(15px, 1.55vw, 23px);
  line-height: 2.05;
  color: var(--gray);
  margin-bottom: 3.2vh;
}
.code .ln { display: block; white-space: pre; }

/* 可展开关键词：灰白底色块，不规律缓慢闪烁；展开前极快速闪烁 6 次 */
@property --kw-a { syntax: "<number>"; inherits: false; initial-value: 0; }
.kw {
  font-family: inherit;
  font-size: 1.06em;
  font-weight: 700;
  color: var(--ink);
  --kw-a: .22;
  background: linear-gradient(transparent 60%, rgba(94, 99, 107, var(--kw-a)) 60%);
  animation: kwFlicker 7.6s linear infinite;
  border: none;
  padding: 0 .12em;
  cursor: pointer;
  position: relative;
  display: inline-block;
  will-change: transform;
}
@keyframes kwFlicker {
  0%   { --kw-a: .22 } 6%  { --kw-a: .10 } 9%  { --kw-a: .24 } 13% { --kw-a: .16 }
  34%  { --kw-a: .16 } 37% { --kw-a: .30 } 39% { --kw-a: .08 } 42% { --kw-a: .22 }
  63%  { --kw-a: .22 } 66% { --kw-a: .12 } 70% { --kw-a: .26 } 74% { --kw-a: .18 }
  88%  { --kw-a: .18 } 91% { --kw-a: .06 } 94% { --kw-a: .22 } 100%{ --kw-a: .22 }
}
.kw.pre-flash { animation: kwFlash .1s linear 6; }
@keyframes kwFlash { 0%, 49.9% { --kw-a: .5 } 50%, 100% { --kw-a: 0 } }
.slide.expanded .kw { animation: none; --kw-a: 0; background: none; }
.kw::before, .kw::after {
  content: "";
  position: absolute;
  width: 7px; height: 7px;
  border: 0 solid var(--blue-d);
  transition: opacity .3s;
  opacity: 0;
}
.kw::before { left: -9px; top: -4px; border-left-width: 1.5px; border-top-width: 1.5px; }
.kw::after  { right: -9px; bottom: 2px; border-right-width: 1.5px; border-bottom-width: 1.5px; }
.kw:hover::before, .kw:hover::after { opacity: 1; }
.slide.expanded .kw { pointer-events: none; }

.caption {
  font-size: clamp(14px, 1.35vw, 19px);
  color: var(--mid);
  letter-spacing: .1em;
}

.endlink {
  font-family: var(--mono);
  font-size: clamp(12px, 1.1vw, 16px);
  color: var(--mid);
  letter-spacing: .12em;
  border-bottom: 1px solid var(--blue);
  display: inline-block;
  padding-bottom: 4px;
}

/* S9 远期愿景行：P8 后超长期工作，只简短提及（docs/02 S9） */
.vision {
  font-family: var(--mono);
  font-size: clamp(11px, 1.05vw, 14px);
  color: var(--faint);
  letter-spacing: .16em;
  margin-bottom: 4vh;
}

/* ---------------- 展开详情节点 ---------------- */
.detail-cluster { position: absolute; inset: 0; pointer-events: none; }
.node {
  position: absolute;
  left: 0; top: 0;
  width: clamp(180px, 17vw, 260px);
  opacity: 0;
  will-change: transform, opacity;
}
.node i {
  display: block;
  width: 9px; height: 9px;
  background: var(--blue-d);
  transform: rotate(45deg);
  margin-bottom: 10px;
  animation: beadBoxGlow 5.5s ease-in-out infinite;
}
.node b {
  display: block;
  font-size: clamp(14px, 1.25vw, 18px);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ink);
  margin-bottom: 5px;
}
.node span {
  display: block;
  font-size: clamp(11px, 1vw, 14px);
  color: var(--mid);
  letter-spacing: .04em;
  line-height: 1.6;
}

/* 可二次展开的节点：小箭头提示；展开态下可点击 */
.node .go {
  display: inline-block;
  margin-top: 9px;
  font-family: var(--mono);
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: .22em;
  color: var(--blue-d);
  border-bottom: 1px solid rgba(122, 167, 214, .45);
  padding-bottom: 2px;
}
.slide.expanded .node-sub { pointer-events: auto; cursor: pointer; }

/* ---------------- 进度指示 ---------------- */
#progress {
  position: fixed;
  right: 3.2vw; top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-end;
}
#progress .tick {
  width: 18px; height: 1.5px;
  background: var(--faint);
  transition: all .45s cubic-bezier(.65,0,.35,1);
  cursor: pointer;
}
#progress .tick.on {
  width: 38px;
  background: var(--ink);
  box-shadow: 0 2px 0 var(--blue);
}

/* ---------------- 操作提示 ---------------- */
#hint {
  position: fixed;
  left: 3vw; bottom: 3.4vh;
  z-index: 10;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--mid);
  user-select: none;
}
#hint .key {
  display: inline-block;
  border: 1px solid var(--faint);
  border-bottom-width: 2px;
  padding: 1px 6px;
  margin: 0 2px;
  color: var(--gray);
  background: rgba(255,255,255,.6);
  font-size: 10px;
}
#hint em { margin: 0 10px; font-style: normal; color: var(--faint); }

/* ---------------- 纯净录制模式（docs/01 §3.1：驾驶舱 UI 不入画） ---------------- */
#progress, #hint { transition: opacity .5s ease; }
body.pure #progress, body.pure #hint {
  opacity: 0;
  pointer-events: none;
}

/* ---------------- 灯珠/灯带呼吸辉光 ---------------- */
@keyframes beadBoxGlow {
  0%, 100% { box-shadow: 0 0 3px rgba(122, 167, 214, .35); }
  50%      { box-shadow: 0 0 12px rgba(122, 167, 214, .95); }
}

/* 背景密铺顶点菱形灯珠 + 横/竖灯带（SVG，双层：辉光 + 硬核）。
   opacity 呼吸 + will-change：每颗灯珠/灯带提升为合成层，动画只在 GPU 合成，
   不触发巨型背景 SVG 的每帧重绘（性能关键）。 */
@keyframes beadGlow { 0%, 100% { opacity: .14 } 50% { opacity: .55 } }
@keyframes beadCore { 0%, 100% { opacity: .45 } 50% { opacity: 1 } }
.bead-glow { animation: beadGlow 6s ease-in-out infinite; will-change: opacity; }
.bead-core { animation: beadCore 6s ease-in-out infinite; will-change: opacity; }

/* 横向/竖向灯带：比灯珠更克制的呼吸（不喧宾夺主） */
@keyframes stripGlow { 0%, 100% { opacity: .08 } 50% { opacity: .30 } }
@keyframes stripCore { 0%, 100% { opacity: .30 } 50% { opacity: .75 } }
.strip-glow { animation: stripGlow 7s ease-in-out infinite; will-change: opacity; }
.strip-core { animation: stripCore 7s ease-in-out infinite; will-change: opacity; }

/* 焦点虚线方框：轨迹流动（marching dashes）+ 呼吸（透明度脉冲）。
   应用在 rect 上；GSAP 只控制外层 g 的整体淡入，互不冲突。 */
.kw-frame {
  stroke-dasharray: 14 12;
  animation: frameMarch 2.8s linear infinite, frameBreath 4.2s ease-in-out infinite;
}
@keyframes frameMarch { to { stroke-dashoffset: -26; } }
@keyframes frameBreath { 0%, 100% { opacity: .55 } 50% { opacity: .95 } }

/* ---------------- 一级展开「概念热线」----------------
   终点为具体概念节点的线路：亮蓝芯 + 低饱和呼吸辉光 + 单层彗尾光流。
   光流 = 长而淡的圆头 dash，dashoffset 从 --fo 匀速滚动一个周期 260px
   （纯 CSS 驱动，GSAP 只淡入整组透明度）；
   辉光呼吸只动 opacity —— 均不与时间线 reverse 冲突，回收随 #fx 清空精确消失。 */
.wire-flow {
  stroke-linecap: round;
  animation: wireFlow 5.8s linear infinite;   /* 慢速匀速流动（≈45px/s） */
  will-change: stroke-dashoffset;
}
@keyframes wireFlow {
  from { stroke-dashoffset: var(--fo, 0px); }
  to   { stroke-dashoffset: calc(var(--fo, 0px) - 260px); }
}

.wire-hot-glow { animation: wireHotGlow 4.8s ease-in-out infinite; will-change: opacity; }
@keyframes wireHotGlow { 0%, 100% { opacity: .09 } 50% { opacity: .20 } }

/* ---------------- 二级展开场景 ---------------- */
.sub-scene {
  position: absolute; inset: 0;
  visibility: hidden;
  pointer-events: none;
}
.sub-scene.active { visibility: visible; }

.sub-title {
  position: absolute;
  left: 9vw; top: 11vh;
  font-family: var(--mono);
  font-size: clamp(13px, 1.25vw, 18px);
  letter-spacing: .3em;
  color: var(--gray);
}
.sub-title::before {
  content: "";
  display: block;
  width: 46px; height: 1.5px;
  background: var(--ink);
  margin-bottom: 2vh;
}

/* —— 模式一：流程图（flow）—— */
.flow-track {
  position: absolute;
  left: 50%; top: 57%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 2.6vw;
  align-items: stretch;
}
.fstep {
  width: clamp(190px, 14.5vw, 260px);
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--faint);
  padding: 18px 18px 16px;
  position: relative;
  will-change: transform, opacity;
}
.fstep i {
  display: block;
  font-family: var(--mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--blue-d);
  margin-bottom: 12px;
}
.fstep b {
  display: block;
  font-size: clamp(14px, 1.2vw, 17px);
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--ink);
  margin-bottom: 7px;
}
.fstep span {
  display: block;
  font-size: clamp(11px, .95vw, 13px);
  color: var(--mid);
  line-height: 1.65;
  letter-spacing: .03em;
}

/* —— 模式二：回环曲线（loop）—— */
.lnode {
  position: absolute;
  left: 0; top: 0;
  width: clamp(190px, 16vw, 250px);
  will-change: transform, opacity;
}
.lnode b {
  display: block;
  font-size: clamp(15px, 1.3vw, 19px);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ink);
  margin-bottom: 6px;
}
.lnode b::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--blue-d);
  transform: rotate(45deg);
  margin-right: 10px;
  vertical-align: 1px;
}
.lnode span {
  display: block;
  font-size: clamp(11px, 1vw, 14px);
  color: var(--mid);
  line-height: 1.6;
  letter-spacing: .04em;
  padding-left: 18px;
}

/* —— 模式三：整页淡入淡出 + 缩放（zoom）—— */
.zoom-wrap {
  position: absolute;
  left: 50%; top: 52%;
  transform: translate(-50%, -50%);
}
.zoom-card {
  width: clamp(520px, 44vw, 760px);
  background: rgba(255, 255, 255, .78);
  border: 1px solid var(--faint);
  padding: 4.5vh 3.4vw;
  will-change: transform, opacity;
}
.z-title {
  font-family: var(--mono);
  font-size: clamp(12px, 1.1vw, 15px);
  letter-spacing: .32em;
  color: var(--gray);
  margin-bottom: 3.4vh;
}
.z-row {
  display: flex;
  align-items: baseline;
  gap: 2vw;
  padding: 1.7vh 0;
  border-top: 1px solid rgba(201, 206, 214, .5);
}
.z-row code {
  font-family: var(--mono);
  font-size: clamp(13px, 1.2vw, 17px);
  color: var(--ink);
  white-space: nowrap;
}
.z-row span {
  font-size: clamp(12px, 1.05vw, 15px);
  color: var(--mid);
  letter-spacing: .04em;
}
.z-note {
  margin-top: 3.2vh;
  font-size: clamp(12px, 1.1vw, 15px);
  color: var(--gray);
  line-height: 1.8;
  letter-spacing: .05em;
}

/* ---------------- M-TOC 菜单层（docs/01 §3.2：提纲层；形态源自已删除的 P-C 页） ----------------
   中央 IBC-Inter 虚线封装 + 8 章节芯片 + pinbus 排线；
   呼吸待选/突进闪烁复用关键词色块语言（@property --kw-a）。 */
#menuLayer {
  position: fixed; inset: 0;
  z-index: 6;               /* 幻灯片（z2）之上、驾驶舱 UI（z10）之下 */
  visibility: hidden; opacity: 0;
  pointer-events: none;     /* 进入菜单时由 JS 开启，退场 clearProps 归零 */
  will-change: transform, opacity;
}
.m-fx {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  overflow: visible;
}
.m-kicker {
  position: absolute;
  left: 9vw; top: 8vh;
  margin: 0;
}
.m-chip {
  position: absolute;
  left: 0; top: 0;
  padding: 12px 18px 11px;
  text-align: center;
  border: 1px solid var(--faint);
  --kw-a: 0;
  background:
    linear-gradient(transparent 72%, rgba(94, 99, 107, var(--kw-a)) 72%),
    rgba(255, 255, 255, .78);
  cursor: pointer;
  will-change: transform, opacity;
}
.m-chip code {
  display: block;
  font-family: var(--mono);
  font-size: clamp(15px, 1.5vw, 22px);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .04em;
  margin-bottom: 5px;
  white-space: nowrap;
}
.m-chip span {
  display: block;
  font-size: clamp(10px, .9vw, 12.5px);
  color: var(--mid);
  letter-spacing: .18em;
  white-space: nowrap;
}
/* 呼吸待选：缓慢呼吸的灰底"下划线"色块（关键词色块同族） */
.m-chip.target { animation: mBreath 3.4s ease-in-out infinite; border-color: var(--mid); }
@keyframes mBreath { 0%, 100% { --kw-a: .10 } 50% { --kw-a: .32 } }
/* 突进前闪烁确认（关键词预闪同族） */
.m-chip.pre-flash { animation: kwFlash .1s linear 4; }
.m-core {
  position: absolute;
  left: 0; top: 0;
  text-align: center;
  will-change: transform, opacity;
}
.m-core-t {
  font-family: var(--mono);
  font-size: clamp(30px, 3.2vw, 46px);
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--ink);
}
.m-core-s {
  margin-top: 1.4vh;
  font-size: clamp(12px, 1.05vw, 15px);
  color: var(--gray);
  letter-spacing: .34em;
  white-space: nowrap;
}