/* ==========================================================================
   模板：09 · 宇宙星轨动态风 (Cosmic Orbit Motion Theme)
   ========================================================================== */

/* 星轨全屏底层画布 */
.cosmic-canvas-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

#cosmicCanvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* 宇宙星云氛围渐变底图 */
.nebula-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  opacity: 0.35;
  z-index: 1;
}

.nebula-1 {
  top: -150px;
  right: -100px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.5) 0%, rgba(139, 92, 246, 0.1) 70%, transparent 100%);
  animation: floatNebula 18s ease-in-out infinite alternate;
}

.nebula-2 {
  bottom: 10%;
  left: -200px;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.4) 0%, rgba(20, 184, 166, 0.1) 70%, transparent 100%);
  animation: floatNebula 24s ease-in-out infinite alternate-reverse;
}

@keyframes floatNebula {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, -30px) scale(1.08); }
  100% { transform: translate(-30px, 40px) scale(0.95); }
}

/* 3D 宇宙星轨模型装饰 (Hero Orbit Simulation) */
.hero-orbit-stage {
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 900px;
  height: 900px;
  z-index: 2;
  pointer-events: none;
  perspective: 1200px;
}

.orbit-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transform-style: preserve-3d;
  box-sizing: border-box;
}

/* 轨道一：近地快速轨道 (青蓝高光) */
.orbit-ring-1 {
  width: 480px;
  height: 480px;
  margin-top: -240px;
  margin-left: -240px;
  border: 1.5px solid rgba(56, 189, 248, 0.28);
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.15), inset 0 0 20px rgba(56, 189, 248, 0.08);
  transform: rotateX(68deg) rotateY(-22deg) rotateZ(0deg);
  animation: spinOrbit1 32s linear infinite;
}

/* 轨道二：中层偏心轨道 (紫罗兰霓虹虚线) */
.orbit-ring-2 {
  width: 700px;
  height: 700px;
  margin-top: -350px;
  margin-left: -350px;
  border: 1.5px dashed rgba(129, 140, 248, 0.22);
  box-shadow: 0 0 30px rgba(129, 140, 248, 0.12);
  transform: rotateX(72deg) rotateY(35deg) rotateZ(0deg);
  animation: spinOrbit2 52s linear infinite reverse;
}

/* 轨道三：外层宏大轨道 (深邃极光) */
.orbit-ring-3 {
  width: 940px;
  height: 940px;
  margin-top: -470px;
  margin-left: -470px;
  border: 1px solid rgba(192, 132, 252, 0.18);
  transform: rotateX(76deg) rotateY(-10deg) rotateZ(0deg);
  animation: spinOrbit3 80s linear infinite;
}

/* 轨道运转行星与发光节点 */
.orbit-node {
  position: absolute;
  border-radius: 50%;
}

.orbit-ring-1 .node-cyan {
  top: -8px;
  left: 50%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  background: radial-gradient(circle, #FFFFFF 0%, #38BDF8 60%, #0284C7 100%);
  box-shadow: 0 0 16px #38BDF8, 0 0 32px #38BDF8;
}

.orbit-ring-2 .node-purple {
  top: 50%;
  right: -7px;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  background: radial-gradient(circle, #FFFFFF 0%, #C084FC 60%, #7C3AED 100%);
  box-shadow: 0 0 16px #C084FC, 0 0 30px #A855F7;
}

.orbit-ring-3 .node-gold {
  bottom: 12%;
  left: 15%;
  width: 10px;
  height: 10px;
  background: radial-gradient(circle, #FFFBEB 0%, #FBBF24 80%);
  box-shadow: 0 0 14px #F59E0B;
}

@keyframes spinOrbit1 {
  from { transform: rotateX(68deg) rotateY(-22deg) rotateZ(0deg); }
  to { transform: rotateX(68deg) rotateY(-22deg) rotateZ(360deg); }
}

@keyframes spinOrbit2 {
  from { transform: rotateX(72deg) rotateY(35deg) rotateZ(0deg); }
  to { transform: rotateX(72deg) rotateY(35deg) rotateZ(360deg); }
}

@keyframes spinOrbit3 {
  from { transform: rotateX(76deg) rotateY(-10deg) rotateZ(0deg); }
  to { transform: rotateX(76deg) rotateY(-10deg) rotateZ(360deg); }
}

/* 星轨光芒线条 (Shooting Ray) */
.cosmic-ray {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, transparent, rgba(56, 189, 248, 0.15) 30%, rgba(129, 140, 248, 0.25) 50%, transparent 100%);
  transform: translateX(-50%);
  pointer-events: none;
}

/* 尊重减少动态设置 */
@media (prefers-reduced-motion: reduce) {
  .orbit-ring-1, .orbit-ring-2, .orbit-ring-3,
  .nebula-1, .nebula-2 {
    animation: none !important;
  }
}