/* Only the world's surface and clouds rotate; the camera, emblem and rings stay fixed. */
.orbit-art { transform:none!important; transition:none; }
.orbit-art .orbital-image { animation:none; mask-image:none; width:100%; height:100%; object-fit:contain; }
.planet-canvas { position:absolute; inset:0; display:block; width:100%; height:100%; opacity:0; pointer-events:none; }
.planet-ready .planet-canvas { opacity:1; }
.planet-ready .orbital-image { opacity:0; }

/* Stationary anchors contain the entire 4px × 7px decorative drift. */
.orbit-node {
  --capsule-play:paused; --phase-x:0s; --phase-y:-3s;
  display:block; padding:10px 7px; min-height:74px; border:0;
  background:none; box-shadow:none; backdrop-filter:none; border-radius:999px;
  transform:none!important; font-size:14px; line-height:1.4;
}
.node-visibility { --phase-x:-4s; --phase-y:-7s; }
.node-automation { --phase-x:-8s; --phase-y:-11s; }
.node-float { display:block; pointer-events:none; animation:capsule-drift-x 12s ease-in-out infinite; animation-delay:var(--phase-x); animation-play-state:var(--capsule-play); }
.node-capsule {
  position:relative; isolation:isolate; display:flex; align-items:center; gap:10px;
  min-height:54px; padding:8px 16px 8px 9px; overflow:hidden;
  border:1px solid #8ca3c154; border-radius:999px; white-space:nowrap;
  background:radial-gradient(ellipse at 8% 0%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 66%),linear-gradient(155deg,#1c293bea,#0a101cf5 74%);
  box-shadow:inset 0 1px 0 #edf6ff24,inset 0 -1px 0 #02071199,0 8px 24px #0005;
  backdrop-filter:blur(10px); color:#eaf1fc; font-weight:500;
  animation:capsule-drift-y 12s ease-in-out infinite; animation-delay:var(--phase-y); animation-play-state:var(--capsule-play);
  transition:border-color .25s,box-shadow .25s;
}
.node-orb {
  position:relative; display:grid; place-items:center; width:34px; height:34px; flex:none;
  border:1px solid transparent; border-radius:50%; color:color-mix(in srgb,var(--accent) 30%,#f7fbff);
  background:radial-gradient(circle at 28% 17%,#dcefff30,transparent 44%) padding-box,
    radial-gradient(circle at 38% 28%,color-mix(in srgb,var(--accent) 36%,#243044),#111e2b 66%,#060c14) padding-box,
    conic-gradient(from -40deg,#eef5ffa6,#69798d 12%,#162436 35%,color-mix(in srgb,var(--accent) 65%,#d2eaff) 54%,#283c50 70%, #a4bacd) border-box;
  box-shadow:inset 0 1px 2px #effaff35,inset -2px -3px 5px #0009,0 0 12px color-mix(in srgb,var(--accent) 14%,transparent);
}
.node-orb::before { content:''; position:absolute; inset:2px; border-radius:50%; border:1px solid #e7f6ff12; border-top-color:#e7f6ff42; transform:rotate(-25deg); }
.node-orb svg { width:17px; height:17px; stroke-width:1.5; filter:drop-shadow(0 1px 1px #0009); }
.node-capsule .node-arrow { display:inline-block; margin-left:3px; font-size:17px; font-weight:400; color:#b3c5d9; transition:transform .25s,color .25s; }
.node-capsule::after { content:''; position:absolute; inset:-20% auto; left:0; width:35%; z-index:2; background:linear-gradient(90deg,transparent,#e5f7ff16,transparent); transform:translateX(-150%) skewX(-25deg); pointer-events:none; }
.capsules-active .orbit-node { --capsule-play:running; }
.orbit-node:hover,.orbit-node:focus-visible { --capsule-play:paused; }
.orbit-node:hover .node-capsule,.orbit-node:focus-visible .node-capsule { border-color:color-mix(in srgb,var(--accent) 65%,#d6e8f6); box-shadow:inset 0 1px 0 #edf6ff33,0 0 22px color-mix(in srgb,var(--accent) 12%,transparent),0 8px 24px #0005; }
.orbit-node:hover .node-arrow,.orbit-node:focus-visible .node-arrow { color:#f1f8ff; transform:translate(2px,-2px); }
.orbit-node:hover .node-capsule::after,.orbit-node:focus-visible .node-capsule::after { animation:capsule-glint .75s ease-out both; }
.orbit-node:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.motion-paused .orbit-node { --capsule-play:paused; }
/* Quarter-cycle offset makes the two smooth axes describe a shallow ellipse. */
@keyframes capsule-drift-x { 0%,100% { transform:translateX(-4px); } 50% { transform:translateX(4px); } }
@keyframes capsule-drift-y { 0%,100% { transform:translateY(-7px); } 50% { transform:translateY(7px); } }
@keyframes capsule-glint { to { transform:translateX(425%) skewX(-25deg); } }
@media(max-width:1100px) and (min-width:761px) { .orbit-node { font-size:13px; } .node-capsule { gap:8px; padding-right:13px; } .node-orb { width:32px; height:32px; } }
@media(max-width:760px) {
  .orbit-node { padding:3px; min-height:50px; font-size:11px; }
  .node-capsule { min-height:44px; padding:6px 10px 6px 6px; gap:7px; }
  .node-orb { width:27px; height:27px; } .node-orb svg { width:14px; height:14px; }
  .node-capsule .node-arrow { font-size:13px; margin-left:1px; }
}
@media(max-width:380px) { .orbit-node { font-size:10px; } .node-capsule { padding-right:8px; gap:5px; } .node-orb { width:25px; height:25px; } }
@media(prefers-reduced-motion:reduce),(hover:none),(pointer:coarse),(max-width:760px) { .node-float,.node-capsule { animation:none; transform:none; } }
@media(prefers-reduced-motion:reduce) { .node-capsule,.node-capsule .node-arrow { transition:none; } .orbit-node .node-capsule::after { animation:none!important; } }
.motion-paused .orbit-node .node-capsule::after { animation:none; }