html { scroll-behavior: smooth; }

/* ============ 背景：纯黑 + 极淡 vignette ============ */
.vignette {
  background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.6) 100%);
}

/* ============ 穿越白光层 ============ */
.flash {
  position: fixed;
  inset: 0;
  z-index: 60;
  /* 深空溶解：以深墨黑为主 + 中心一缕极淡冷光，绝不刺眼，呼应 deck 的暗色调 */
  background:
    radial-gradient(circle at 50% 46%, rgba(74,82,104,0.42) 0%, rgba(18,20,28,0) 42%),
    #06070b;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--flash-dur, 350ms) cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============ 网络 mode 概念点题：让人一眼看懂 ============ */
.stage-intro {
  opacity: 0;
  animation: introIn 1.3s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}
@keyframes introIn {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
body.mode-atom .stage-intro {
  opacity: 0 !important;
  animation: none;
  transition: opacity 300ms ease;
}

/* ============ Mode 切换 ============ */
#stage {
  height: 92vh;
  min-height: 520px;
  transition: height 1200ms cubic-bezier(0.65, 0, 0.35, 1);
}
.atom-content {
  opacity: 0;
  transform: translateY(30px);
  pointer-events: none;
  transition: opacity 700ms 500ms ease, transform 700ms 500ms cubic-bezier(0.65, 0, 0.35, 1);
}
body.mode-atom #stage {
  height: 52vh;
  min-height: 360px;
}
body.mode-atom .atom-content {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
body.mode-atom .stage-hint {
  opacity: 0;
  transition: opacity 300ms ease;
}
body.mode-network .stage-watermark {
  opacity: 0;
}
body.mode-atom .stage-watermark {
  opacity: 1;
  transition: opacity 600ms 700ms ease;
}
body.mode-atom .back-btn {
  opacity: 1 !important;
  pointer-events: auto !important;
  transition: opacity 500ms 600ms ease;
}
body.mode-network .back-btn {
  opacity: 0;
  pointer-events: none;
}
body.mode-atom #atom-name-tag {
  opacity: 1;
  transition: opacity 500ms 800ms ease;
}

/* ============ Cursor 状态 (drag) ============ */
#stage { cursor: grab; }
#stage.dragging { cursor: grabbing; }
body.mode-atom #stage { cursor: default; }

/* ============ 远景星尘：纯白真星空 ============ */
.dust-star {
  fill: #ffffff;
  animation: twinkle var(--tw-dur, 5s) ease-in-out infinite;
  animation-delay: var(--tw-delay, 0s);
}
@keyframes twinkle {
  0%, 100% { opacity: var(--tw-low, 0.20); }
  50%      { opacity: var(--tw-high, 0.95); }
}
/* 极少数有微弱冷色调（蓝白星）或微弱暖色调（红巨星）—— 像真夜空 */
.dust-star.blue  { fill: #cfe5ff; }
.dust-star.amber { fill: #ffe6c2; }

/* ============ 链接：默认极淡白线，hover 一颗原子时它的链接亮起 ============ */
.link {
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 0.4;
  pointer-events: none;
  transition: stroke 600ms ease, stroke-width 600ms ease;
}
.link.active {
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 0.7;
}
body.mode-atom .link {
  opacity: 0;
  transition: opacity 400ms ease;
}

/* ============ 链接上的 Agent 消息（hover 时浮现） ============ */
.agent-msg {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  fill: rgba(255, 255, 255, 0.85);
  pointer-events: none;
  opacity: 0;
  transition: opacity 350ms ease;
  letter-spacing: 0.04em;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.85);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.agent-msg.show { opacity: 1; }

/* ============ 原子：白热核 ============ */
.atom {
  cursor: help;
  transform-origin: center;
  transform-box: fill-box;
  animation: breathe var(--br-dur, 8s) ease-in-out infinite;
  animation-delay: var(--br-delay, 0s);
  transition: opacity 700ms ease;
}
.atom .core {
  fill: #ffffff;
  transition: r 800ms cubic-bezier(0.65, 0, 0.35, 1), filter 600ms ease;
  filter:
    drop-shadow(0 0 3px rgba(255,255,255,0.95))
    drop-shadow(0 0 9px rgba(255,255,255,0.55))
    drop-shadow(0 0 22px rgba(255,255,255,0.30));
}
/* 个别原子带微弱冷色 / 暖色光晕，模拟真恒星的温度差 */
.atom.tint-blue .core {
  filter:
    drop-shadow(0 0 3px rgba(207,229,255,1))
    drop-shadow(0 0 9px rgba(160,200,255,0.55))
    drop-shadow(0 0 22px rgba(120,180,255,0.30));
}
.atom.tint-amber .core {
  filter:
    drop-shadow(0 0 3px rgba(255,235,200,1))
    drop-shadow(0 0 9px rgba(255,210,150,0.55))
    drop-shadow(0 0 22px rgba(255,200,140,0.30));
}
@keyframes breathe {
  0%, 100% { opacity: var(--op-low, 0.78);  transform: scale(1); }
  50%      { opacity: var(--op-high, 1);    transform: scale(1.12); }
}

/* real 原子的金色视角环：极淡，缓慢明灭（缩放交给父 .atom 的 breathe） */
.atom-ring {
  fill: none;
  stroke: rgba(231, 200, 124, 0.45);
  stroke-width: 0.8;
  filter: drop-shadow(0 0 3px rgba(231, 200, 124, 0.55));
  animation: ring-fade 5s ease-in-out infinite;
}
@keyframes ring-fade {
  0%, 100% { opacity: 0.32; }
  50%      { opacity: 0.62; }
}

/* 真实原子可点 + 更亮 */
.atom.real { cursor: pointer; }
.atom.real .core {
  filter:
    drop-shadow(0 0 4px rgba(255,255,255,1))
    drop-shadow(0 0 12px rgba(255,255,255,0.7))
    drop-shadow(0 0 30px rgba(255,255,255,0.45))
    drop-shadow(0 0 60px rgba(255,255,255,0.18));
}
.atom.real:hover .core {
  filter:
    drop-shadow(0 0 5px rgba(255,255,255,1))
    drop-shadow(0 0 16px rgba(255,255,255,0.9))
    drop-shadow(0 0 36px rgba(255,255,255,0.6))
    drop-shadow(0 0 80px rgba(255,255,255,0.28));
}
.atom.real:hover { animation-play-state: paused; }

/* 潜伏原子 */
.atom.latent {
  opacity: 0.55;
  cursor: default;
}
.atom.latent:hover {
  opacity: 0.85;
  animation-play-state: paused;
}

/* atom 模式下：除主原子全部淡出 */
body.mode-atom .atom:not(.active) { opacity: 0 !important; pointer-events: none; }

/* ============ Tooltip ============ */
.atom-tooltip {
  position: fixed;
  pointer-events: none;
  z-index: 30;
  background: rgba(8, 8, 12, 0.92);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 11px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: #fff;
  letter-spacing: 0.05em;
  opacity: 0;
  transform: translate(-50%, -130%);
  transition: opacity 200ms ease;
  white-space: nowrap;
}
.atom-tooltip.show { opacity: 1; }
.atom-tooltip .sub {
  display: block;
  color: #94a3b8;
  font-size: 9px;
  margin-top: 3px;
  letter-spacing: 0.15em;
}

@media (prefers-reduced-motion: reduce) {
  .dust-star, .atom, .atom-content, #stage {
    animation: none !important;
    transition: none !important;
  }
}