/* ==========================================================================
   welcome.css — 欢迎动画（鹈鹕骑车 2D→3D）UI 层
   画布 #nj-intro-canvas 承载 three.js 场景；#nj-intro 只放加载 UI 与跳过钮。
   页面本身不动：html.nj-intro 锁滚动，结束由 welcome.js 摘除。
   ========================================================================= */

html.nj-intro { overflow: hidden; }

#nj-intro-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 9990;
  pointer-events: none;
  opacity: 1;
  transition: opacity .38s ease;
}
#nj-intro-canvas.is-out { opacity: 0; }

#nj-intro {
  position: fixed;
  inset: 0;
  z-index: 9991;
  background: var(--bg);
  pointer-events: none;
  transition: background-color .45s ease;
}
#nj-intro.is-live { background: transparent; }

/* 左下角：大号加载计数（Archivo Black，接首页 boot-num 的审美） */
.nj-intro-num {
  position: absolute;
  left: 4vw;
  bottom: calc(4vw + 14px);
  margin: 0;
  font-family: var(--font-display, var(--font-mono));
  font-size: clamp(64px, 12vw, 150px);
  line-height: .9;
  color: var(--text);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

/* 底部：细进度条（纸面轨道 + 墨色填充 + 橙红端头） */
.nj-intro-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--border-color);
}
.nj-intro-fill {
  height: 100%;
  width: 0%;
  background: var(--text);
  position: relative;
}
.nj-intro-fill::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 14px;
  background: var(--accent);
}

/* 左上：小字标语；右上：跳过 */
.nj-intro-mark {
  position: absolute;
  left: 4vw;
  top: 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .22em;
  color: var(--text);
  text-transform: uppercase;
}
.nj-intro-skip {
  position: absolute;
  right: 4vw;
  top: 16px;
  pointer-events: auto;
  appearance: none;
  border: 1px solid var(--text);
  background: transparent;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .18em;
  padding: 8px 16px;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.nj-intro-skip:hover,
.nj-intro-skip:focus-visible {
  background: var(--text);
  color: var(--on-accent, #fff);
  outline: none;
}

/* 开演后加载 UI 淡出 */
#nj-intro.is-live .nj-intro-num,
#nj-intro.is-live .nj-intro-bar,
#nj-intro.is-live .nj-intro-mark {
  opacity: 0;
  transition: opacity .4s ease;
}
.nj-intro-num,
.nj-intro-bar,
.nj-intro-mark { transition: opacity .4s ease; }

/* 调试快照模式（?intro=<秒>）：GL 结果以 <img> 直出，UI 硬隐藏绕开冻结的
   transition —— 只服务无头截图验收，正常访客不会走到这条路径 */
#nj-intro.is-shot { background: transparent; }
#nj-intro.is-shot .nj-intro-num,
#nj-intro.is-shot .nj-intro-bar,
#nj-intro.is-shot .nj-intro-mark,
#nj-intro.is-shot .nj-intro-skip { display: none; }
#nj-intro-shot {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  pointer-events: none;
}

/* 验收辅助（仅 ?intro= 快照模式出现） */
.nj-dbg-target { outline: 2px dashed #ff0000 !important; outline-offset: 2px; }
#nj-intro-dbg {
  position: fixed;
  left: 8px;
  bottom: 8px;
  z-index: 10000;
  margin: 0;
  font: 700 13px/1.4 Consolas, Menlo, monospace;
  color: #c00;
  background: rgba(255, 255, 255, .8);
  padding: 4px 8px;
  max-width: 90vw;
  white-space: pre-wrap;
}

/* 片尾：鹈鹕骑进大厅卡片时的高亮脉冲（只动阴影/描边，不碰布局 transform） */
.nj-hit {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  animation: nj-hit-glow .85s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes nj-hit-glow {
  0%   { box-shadow: 0 0 0 14px rgba(255, 77, 0, .32); }
  70%  { box-shadow: 0 0 0 4px  rgba(255, 77, 0, .12); }
  100% { box-shadow: 0 0 0 2px  rgba(255, 77, 0, 0);  }
}

@media (prefers-reduced-motion: reduce) {
  #nj-intro-canvas,
  #nj-intro,
  .nj-hit { transition: none; animation: none; }
}