/* loading 动画：星轨彗星（贴合「星寻记」主题）
   - 双层轨道反向旋转，彗尾用 conic-gradient 环 + mask 收成细环
   - 中心四角星脉冲发光，周围散布闪烁星尘
   - 日间 #25798A / 夜间 #4FB8C9（html.dark-mode 切换；实际加载阶段 dark.js 尚未应用，仅为兜底）
   - 已移除 alicdn iconfont 外部字体依赖（旧 rocket 图标专用，无其他引用） */
div#app {
  display: flex;
  align-items: center;
  justify-content: center;
}
.loader {
  position: relative;
  width: 160px;
  text-align: center;
  user-select: none;
}
.loader-stage {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 0 auto;
}

/* 轨道环 */
.orbit {
  position: absolute;
  border-radius: 50%;
  animation: orbit-spin 2.6s linear infinite;
}
.orbit.o1 { inset: 0; }
.orbit.o2 { inset: 22px; animation-duration: 1.7s; animation-direction: reverse; }
.orbit::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(37, 121, 138, 0.16);
}
.orbit::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0 76%,
    rgba(37, 121, 138, 0.06) 84%,
    rgba(37, 121, 138, 0.38) 94%,
    #25798A 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
}

/* 彗星头：位于环顶端，随轨道一起旋转 */
.orbit i {
  position: absolute;
  top: -4px;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: #25798A;
  box-shadow: 0 0 8px 2px rgba(37, 121, 138, 0.55);
}
.orbit.o2 i {
  top: -3px;
  width: 6px;
  height: 6px;
  margin-left: -3px;
}

/* 中心四角星 */
.core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%);
  background: #25798A;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter: drop-shadow(0 0 6px rgba(37, 121, 138, 0.6));
  animation: core-pulse 1.6s ease-in-out infinite;
}

/* 星尘 */
.loader-stage b {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #25798A;
  opacity: 0.2;
  animation: twinkle 2s ease-in-out infinite;
}
.loader-stage .s1 { top: 6%;    left: 8%;   animation-delay: 0.2s; }
.loader-stage .s2 { top: 14%;   right: 6%;  animation-delay: 1.1s; width: 3px; height: 3px; }
.loader-stage .s3 { top: 48%;   left: -5%;  animation-delay: 0.6s; width: 3px; height: 3px; }
.loader-stage .s4 { bottom: 8%; left: 15%;  animation-delay: 1.5s; }
.loader-stage .s5 { bottom: 0;  right: 20%; animation-delay: 0.9s; width: 3px; height: 3px; }
.loader-stage .s6 { top: 42%;   right: -7%; animation-delay: 1.8s; }

/* 站名 */
.loader-name {
  margin: 16px 0 0;
  font-size: 13px;
  color: #25798A;
  opacity: 0.75;
  animation: name-fade 2s ease-in-out infinite;
}

/* 夜间配色兜底 */
html.dark-mode .orbit::before { border-color: rgba(79, 184, 201, 0.18); }
html.dark-mode .orbit::after {
  background: conic-gradient(from 0deg,
    transparent 0 76%,
    rgba(79, 184, 201, 0.06) 84%,
    rgba(79, 184, 201, 0.4) 94%,
    #4FB8C9 100%);
}
html.dark-mode .orbit i { background: #4FB8C9; box-shadow: 0 0 8px 2px rgba(79, 184, 201, 0.5); }
html.dark-mode .core { background: #4FB8C9; filter: drop-shadow(0 0 6px rgba(79, 184, 201, 0.6)); }
html.dark-mode .loader-stage b { background: #4FB8C9; }
html.dark-mode .loader-name { color: #4FB8C9; }

@keyframes orbit-spin {
  to { transform: rotate(360deg); }
}
@keyframes core-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(0.75); opacity: 0.75; }
  50%      { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
}
@keyframes twinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.7); }
  50%      { opacity: 0.9;  transform: scale(1.15); }
}
@keyframes name-fade {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.85; }
}

/* 尊重系统减弱动态效果偏好 */
@media (prefers-reduced-motion: reduce) {
  .loader * { animation-duration: 6s; }
}