/* ============================================================
   YYKK ORBITAL ARCHIVE — 开屏模块样式 v2（方向 03 fusion）
   全部规则 scoped 在 .yykk-intro 命名空间下，
   不污染主站样式；零圆角 / 1.5px 描边 / 32px 网格 /
   禁 box-shadow、text-shadow、backdrop-filter。
   v2：3D 场景全部在 canvas.fx 上绘制（真实点云 + 蓝图描线），
   DOM 仅保留 HUD / 面板 / 按钮。
   ============================================================ */

.yykk-intro{
  /* 设计令牌（局部作用域，不外泄） */
  --bg:#191919; --surface:#1F1F22; --surface2:#29292D;
  --ink:#FFFFFF; --dim:#999999;
  --yel:#FFFA00; --mag:#FF1AAC; --cyn:#00FFA2;
  --mono:"Space Grotesk","Cascadia Mono",Consolas,monospace;
  --cjk:"Noto Sans SC","Microsoft YaHei",sans-serif;

  position:fixed; inset:0; z-index:9990;
  background:#0B0B0B;
  font-family:var(--mono); color:var(--ink);
  -webkit-font-smoothing:antialiased;
  opacity:1; transition:opacity .55s ease;
}
/* dismiss() 触发的整层淡出 */
.yykk-intro.is-out{ opacity:0; pointer-events:none; }

.yykk-intro *{ margin:0; padding:0; box-sizing:border-box; border-radius:0; }

/* ---- 单屏舞台：铺满视口，32px 工程网格（canvas 首帧前的兜底底纹） ---- */
.yykk-intro .stage{
  position:absolute; inset:0;
  background:var(--bg);
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:32px 32px;
  overflow:hidden;
  cursor:default;
}
/* 3D 场景画布：蓝图描线 / 点云 / 标注全部在此绘制（不透明，覆盖底纹） */
.yykk-intro canvas.fx{ position:absolute; inset:0; width:100%; height:100%; display:block; }

/* ---- HUD ---- */
.yykk-intro .hud{
  position:absolute; font-family:var(--mono); letter-spacing:.08em;
  z-index:6; pointer-events:none;
}
.yykk-intro .hud.tl{ top:12px; left:14px; font-size:9px; color:var(--dim); }
.yykk-intro .hud.tl b{ color:var(--ink); font-weight:700; }
.yykk-intro .hud.tag{
  top:12px; right:14px; font-size:9px; color:#0B0B0B;
  background:var(--yel); padding:3px 8px; font-weight:700;
}
.yykk-intro .hud.br{
  bottom:12px; right:14px; font-size:8px; color:var(--dim);
  text-align:right; line-height:1.7;
}
.yykk-intro .hud.counter{
  bottom:64px; left:14px; font-size:10px; color:var(--ink);
  background:var(--surface); border:1.5px solid var(--surface2);
  padding:4px 10px; letter-spacing:.14em;
}
.yykk-intro .hud.counter b{ color:var(--yel); font-weight:700; }
.yykk-intro .hud.readout{
  bottom:14px; left:14px; font-size:9px; color:var(--ink);
  background:var(--surface); border-left:3px solid var(--yel);
  padding:5px 10px; min-width:300px;
  transition:opacity .1s linear;
}
.yykk-intro .hud.readout .sub{ color:var(--dim); font-size:8px; margin-top:2px; }
.yykk-intro .progress{
  position:absolute; left:0; bottom:0; height:2px; width:0%;
  background:var(--yel); z-index:6;
}

/* ---- 模块清单面板（真实 IA + 真实点数） ---- */
.yykk-intro .panel{
  position:absolute; top:64px; right:14px; width:236px; z-index:6;
  pointer-events:none; font-family:var(--mono);
}
.yykk-intro .phead{
  background:var(--yel); color:#0B0B0B; font-size:9px; font-weight:700;
  padding:3px 8px; letter-spacing:.08em;
}
.yykk-intro .psub{
  font-size:8px; color:var(--dim); padding:4px 2px 5px;
  letter-spacing:.12em; border-bottom:1px solid var(--surface2);
}
.yykk-intro .prow{
  font-family:Consolas,"Noto Sans SC","Microsoft YaHei",monospace;
  font-size:8.5px; color:var(--ink); opacity:.85;
  padding:2.5px 2px; border-bottom:1px solid rgba(255,255,255,.07);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.yykk-intro .prow .pid{ color:var(--dim); font-size:7.5px; margin-right:6px; letter-spacing:.05em; }
.yykk-intro .prow.hot{ color:var(--yel); opacity:1; }

/* ---- 扫描线 ---- */
.yykk-intro .scan{
  position:absolute; left:0; right:0; top:-2px; height:1px;
  background:var(--cyn); opacity:.3; z-index:5; display:none;
  animation:yykk-intro-scanmove 1.9s linear infinite;
}
.yykk-intro .scan.on{ display:block; }
@keyframes yykk-intro-scanmove{ from{ transform:translateY(0); } to{ transform:translateY(110vh); } }

/* ---- 控制按钮 ---- */
.yykk-intro .btn{
  position:absolute; z-index:8; font-family:var(--mono); font-size:10px;
  letter-spacing:.15em; padding:7px 14px; cursor:pointer;
  border:1.5px solid var(--ink); background:transparent; color:var(--ink);
  transition:background .15s, color .15s, border-color .15s;
}
.yykk-intro .btn:hover{ background:var(--yel); color:#0B0B0B; border-color:var(--yel); }
.yykk-intro .btn.skip{ top:38px; right:14px; }
.yykk-intro .btn.replay{
  left:50%; top:80%; transform:translateX(-50%);
  background:var(--yel); color:#0B0B0B; border-color:var(--yel); font-weight:700;
  display:none;
}
.yykk-intro .btn.replay:hover{ background:var(--ink); border-color:var(--ink); }
.yykk-intro .btn.replay.show{ display:block; }

/* ---- 亮版（v3 明暗双版）：挂载时按 localStorage['yykk-site-tone']==='light' 定型。
   令牌级覆盖即可整体换肤（按钮/面板/进度条全部走 var）；canvas 侧由 intro.js
   PAL_LIGHT 调色板负责（深色线/点云 + 琥珀标签）。 ---- */
.yykk-intro.tone-light{
  --bg:#FAFAFA; --surface:#FFFFFF; --surface2:#D8D8D8;
  --ink:#191919; --dim:#6E6E6E;
  --yel:#E6C800; --mag:#C41488; --cyn:#00996B;
  background:#FAFAFA;
}
.yykk-intro.tone-light .stage{
  background:#FAFAFA;
  background-image:
    linear-gradient(rgba(25,25,25,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(25,25,25,.05) 1px, transparent 1px);
}
.yykk-intro.tone-light .hud.tag{ color:#191919; }
.yykk-intro.tone-light .phead{ color:#191919; }
.yykk-intro.tone-light .prow{ border-bottom:1px solid rgba(25,25,25,.08); }
.yykk-intro.tone-light .btn:hover{ color:#191919; }
.yykk-intro.tone-light .btn.replay{ color:#191919; }

@media (prefers-reduced-motion: reduce){
  .yykk-intro .scan{ animation:none; display:none !important; }
  .yykk-intro .btn{ transition:none; }
  .yykk-intro{ transition:opacity .2s linear; }
}

/* ============================================================
   移动端适配（工位 M · v3.4）：窄屏 ≤560px / 粗指针小屏。
   等宽小字分级缩小、SKIP 触控目标 ≥44px、面板/读出器避让，
   全部 scoped 在媒体查询内，桌面端零影响。
   ============================================================ */
@media (max-width:560px), (pointer:coarse) and (max-width:900px) and (max-aspect-ratio:1/1){
  .yykk-intro .hud.tl{ top:10px; left:10px; font-size:8px; max-width:58vw; line-height:1.5; }
  .yykk-intro .hud.tag{ top:10px; right:10px; font-size:8px; padding:2px 6px; }
  .yykk-intro .hud.br{ bottom:10px; right:10px; font-size:7px; line-height:1.6; max-width:38vw; }
  .yykk-intro .hud.counter{
    bottom:56px; left:10px; font-size:9px; padding:3px 8px; letter-spacing:.1em;
  }
  .yykk-intro .hud.readout{
    bottom:12px; left:10px; font-size:8px; min-width:0; max-width:56vw; padding:4px 8px;
  }
  .yykk-intro .hud.readout .sub{ font-size:7px; }
  .yykk-intro .panel{ width:176px; top:96px; right:10px; }
  .yykk-intro .phead{ font-size:8px; }
  .yykk-intro .psub{ font-size:7px; }
  .yykk-intro .prow{ font-size:7.5px; padding:2px 2px; }
  .yykk-intro .prow .pid{ font-size:7px; }
  /* 触控目标：SKIP / REPLAY ≥44px */
  .yykk-intro .btn{
    min-height:44px; min-width:44px; padding:12px 16px; font-size:9px; letter-spacing:.12em;
    touch-action:manipulation;
  }
  .yykk-intro .btn.skip{ top:34px; right:10px; }
  .yykk-intro .btn.replay{ top:78%; }
}

/* 触屏无 hover：去掉悬停换色（避免点按后粘滞高亮），改用 :active 反馈 */
@media (hover:none){
  .yykk-intro .btn:hover{ background:transparent; color:var(--ink); border-color:var(--ink); }
  .yykk-intro .btn:active{ background:var(--yel); color:#0B0B0B; border-color:var(--yel); }
  .yykk-intro.tone-light .btn:hover{ color:var(--ink); }
  .yykk-intro .btn.replay:active{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
}