/* ============================================================
   首页 · 星图  专属样式
   ============================================================ */

/* 星系标题+介绍面板（设计稿：left 50, 星系标题 top 220） */
.galaxy-info {
  left: 50px;
  top: 220px;
  width: 384px;
  min-height: 200px;
}
.galaxy-info .panel-title { font-size: 26px; }

/* 默认提示（无 hover 时） */
.hint {
  position: absolute;
  left: 50px;
  top: 240px;
  width: 384px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-dim);
  letter-spacing: 1px;
  animation: ui-rise 0.6s 0.3s ease both;
}

/* 星系层 */
.galaxy-layer { position: absolute; inset: 0; }

/* 单个星系节点 */
.galaxy-node {
  position: absolute;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;       /* 以 data 中的 x/y 为中心 */
  --star-glow: #38d6ff;          /* 由 JS 按光谱型覆盖 */
  cursor: pointer;
  transition: transform 0.3s ease, filter 0.3s ease;
  filter: drop-shadow(0 0 10px var(--star-glow));
}
.galaxy-node img {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  animation: galaxy-spin 60s linear infinite;   /* 自转放在 img 上，避免与节点缩放冲突 */
}
.galaxy-node .g-label {
  position: absolute;
  left: 50%;
  bottom: -22px;
  transform: translateX(-50%) translateY(6px);
  white-space: nowrap;
  font-size: 13px;
  color: var(--text-dim);
  letter-spacing: 1px;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
/* 悬停光环：在节点四周泛起一圈按光谱型着色的脉动光晕 */
.galaxy-node::after {
  content: "";
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  border: 1px solid var(--star-glow);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.galaxy-node:hover {
  transform: scale(1.25);
  filter: drop-shadow(0 0 26px var(--star-glow));
}
.galaxy-node:hover .g-label { opacity: 1; transform: translateX(-50%) translateY(0); }
.galaxy-node:hover::after { opacity: 0.5; animation: halo-pulse 1.8s ease-in-out infinite; }
@keyframes halo-pulse {
  0%, 100% { transform: scale(1.04); opacity: 0.45; }
  50%      { transform: scale(1.22); opacity: 0.12; }
}

/* 每个星系自转速度略有差异，制造层次感 */
@keyframes galaxy-spin { to { transform: rotate(360deg); } }
.galaxy-node:hover { animation-play-state: paused; }