/* One orientation for surface, atmosphere and equatorial rings. */
.planet-visual {
  position: relative;
  flex: 0 0 auto;
  pointer-events: none;
  transition: transform 180ms ease;
}
.planet-visual-axis {
  position: absolute;
  inset: 0;
  transform: rotate(var(--planet-tilt, 0deg));
}
.planet-visual .planet-visual-sphere {
  position: absolute;
  inset: 0;
  background: none;
  animation: none;
  transform: none;
}
.planet-body:hover .planet-visual {
  transform: scale(1.2);
}
.planet-body:hover .planet-visual .planet-visual-sphere {
  transform: none;
}
.planet-visual-texture,
.planet-visual-clouds {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-size: 200% 100%;
  background-repeat: repeat-x;
  background-position: 0% center;
  animation: planetSurfaceSpin var(--planet-spin-duration, 32s) linear infinite;
  animation-delay: var(--planet-spin-delay, 0s);
}
.planet-visual-clouds {
  mix-blend-mode: screen;
  opacity: 0.8;
}
.planet-visual .planet-visual-shadow {
  position: absolute;
  inset: -25%;
  border-radius: 0;
  transform: rotate(var(--planet-untilt, 0deg));
  background: radial-gradient(circle at 32% 35%, rgba(255, 255, 255, 0.18), transparent 40%), linear-gradient(90deg, transparent 35%, rgba(0, 0, 0, 0.85) 85%);
}
.planet-visual--preview .planet-visual-shadow {
  background: radial-gradient(circle at 32% 32%, rgba(255, 255, 255, 0.25), transparent 42%), linear-gradient(125deg, transparent 36%, rgba(0, 0, 0, 0.7) 76%, rgba(0, 0, 0, 0.94) 100%);
}
.planet-visual-atmosphere {
  position: absolute;
  inset: -2%;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(122, 200, 255, 0.65), inset 0 0 3px rgba(145, 216, 255, 0.4);
}
.planet-visual--preview .planet-visual-atmosphere {
  box-shadow: 0 0 12px rgba(110, 195, 255, 0.6), inset 0 0 5px rgba(155, 218, 255, 0.5);
}
.planet-visual .planet-visual-rings,
.planet-body:hover .planet-visual .planet-visual-rings {
  transform: translate(-50%, -50%);
}
.preview-sphere-wrap--ringed {
  width: 280px;
  height: 224px;
}
@keyframes planetSurfaceSpin {
  from { background-position: 0% center; }
  to { background-position: -200% center; }
}
@media (prefers-reduced-motion: reduce) {
  .planet-visual-texture,
  .planet-visual-clouds {
    animation: none;
  }
  .planet-visual {
    transition: none;
  }
}