/* Rendered globes retain their true proportions: the orbit cannot squash them. */
.planet-art {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  -webkit-user-drag: none;
}

.living-universe .planet-stage { opacity: 1; }
.living-universe .lunar-planet { display: none; }
.travelling-planet {
  filter: drop-shadow(0 0 18px #a899d714);
  transform-origin: center;
}
.travelling-planet .planet-art { opacity: .8; }
.planet-stage-resting .travelling-planet,
.motion-paused .travelling-planet { animation-play-state: paused !important; }
@keyframes planet-journey {
  0% { opacity: 0; transform: translate3d(var(--x0),var(--y0),0) scale(.86); }
  10% { opacity: .52; }
  50% { opacity: .58; transform: translate3d(var(--x1),var(--y1),0) scale(1); }
  90% { opacity: .52; }
  100% { opacity: 0; transform: translate3d(var(--x2),var(--y2),0) scale(.86); }
}
@supports (offset-path: path("M 0 0 L 1 1")) {
  .travelling-planet {
    offset-path: var(--flight-path);
    offset-anchor: 0 0;
    offset-rotate: 0deg;
    animation-name: planet-curved-journey;
  }
}
@keyframes planet-curved-journey {
  0% { opacity: 0; offset-distance: 0%; transform: scale(.86); }
  10% { opacity: .52; }
  50% { opacity: .58; offset-distance: 50%; transform: scale(1); }
  90% { opacity: .52; }
  100% { opacity: 0; offset-distance: 100%; transform: scale(.86); }
}

.sky-orbit {
  --orbit-x: clamp(210px, 33vw, 550px);
  --orbit-y: clamp(100px, 20vh, 220px);
  --orbit-time: 58s;
  --orbit-phase: -29s;
  --planet-size: clamp(155px, 13vw, 205px);
  inset: auto;
  left: 91%;
  top: 26%;
  width: calc(var(--orbit-x) * 2);
  height: calc(var(--orbit-y) * 2);
  max-width: none;
  max-height: none;
  transform: translate(-50%, -50%);
  perspective: none;
  border: 1px solid #c1b4e010;
  border-radius: 50%;
  box-shadow: none;
}
.sky-orbit-1 {
  --orbit-x: clamp(190px, 31vw, 490px);
  --orbit-y: clamp(90px, 17vh, 170px);
  --orbit-time: 73s;
  --orbit-phase: -5s;
  --planet-size: clamp(100px, 9vw, 145px);
  left: 7%;
  top: 73%;
}
.sky-satellite {
  position: absolute;
  display: block;
  inset: auto;
  left: 50%;
  top: 50%;
  width: var(--planet-size);
  height: var(--planet-size);
  opacity: .84;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform-origin: center;
  filter: drop-shadow(0 0 16px #a898d218);
  will-change: transform;
  animation: planet-ellipse-fallback var(--orbit-time) linear var(--orbit-phase) infinite;
}
.satellite-neptune { animation-direction: reverse; }
.sky-satellite .planet-art { opacity: .8; }
/* The motion path rotates neither the image nor its baked-in direction of light. */
@supports (offset-path: ellipse(50% 50% at 50% 50%)) {
  .sky-satellite {
    left: 0;
    top: 0;
    offset-path: ellipse(50% 50% at 50% 50%);
    offset-anchor: center;
    offset-rotate: 0deg;
    animation-name: planet-ellipse-path;
  }
}
@keyframes planet-ellipse-path {
  0% { offset-distance: 0%; transform: scale(.96); opacity: .88; }
  25% { offset-distance: 25%; transform: scale(1.09); opacity: .96; }
  50% { offset-distance: 50%; transform: scale(.96); opacity: .88; }
  75% { offset-distance: 75%; transform: scale(.84); opacity: .68; }
  100% { offset-distance: 100%; transform: scale(.96); opacity: .88; }
}
/* Compatibility fallback: translate the billboard around a sixteen-point ellipse. */
@keyframes planet-ellipse-fallback {
  0%,100% { transform: translate(var(--orbit-x),0) translate(-50%,-50%) scale(.96); }
  6.25% { transform: translate(calc(var(--orbit-x)*.924),calc(var(--orbit-y)*.383)) translate(-50%,-50%) scale(1); }
  12.5% { transform: translate(calc(var(--orbit-x)*.707),calc(var(--orbit-y)*.707)) translate(-50%,-50%) scale(1.05); }
  18.75% { transform: translate(calc(var(--orbit-x)*.383),calc(var(--orbit-y)*.924)) translate(-50%,-50%) scale(1.08); }
  25% { transform: translate(0,var(--orbit-y)) translate(-50%,-50%) scale(1.09); }
  31.25% { transform: translate(calc(var(--orbit-x)*-.383),calc(var(--orbit-y)*.924)) translate(-50%,-50%) scale(1.08); }
  37.5% { transform: translate(calc(var(--orbit-x)*-.707),calc(var(--orbit-y)*.707)) translate(-50%,-50%) scale(1.05); }
  43.75% { transform: translate(calc(var(--orbit-x)*-.924),calc(var(--orbit-y)*.383)) translate(-50%,-50%) scale(1); }
  50% { transform: translate(calc(var(--orbit-x)*-1),0) translate(-50%,-50%) scale(.96); }
  56.25% { transform: translate(calc(var(--orbit-x)*-.924),calc(var(--orbit-y)*-.383)) translate(-50%,-50%) scale(.91); }
  62.5% { transform: translate(calc(var(--orbit-x)*-.707),calc(var(--orbit-y)*-.707)) translate(-50%,-50%) scale(.87); }
  68.75% { transform: translate(calc(var(--orbit-x)*-.383),calc(var(--orbit-y)*-.924)) translate(-50%,-50%) scale(.85); }
  75% { transform: translate(0,calc(var(--orbit-y)*-1)) translate(-50%,-50%) scale(.84); }
  81.25% { transform: translate(calc(var(--orbit-x)*.383),calc(var(--orbit-y)*-.924)) translate(-50%,-50%) scale(.85); }
  87.5% { transform: translate(calc(var(--orbit-x)*.707),calc(var(--orbit-y)*-.707)) translate(-50%,-50%) scale(.87); }
  93.75% { transform: translate(calc(var(--orbit-x)*.924),calc(var(--orbit-y)*-.383)) translate(-50%,-50%) scale(.91); }
}
@media (max-width: 760px) {
  .sky-orbit {
    --orbit-x: 42vw;
    --orbit-y: 15vh;
    --planet-size: 132px;
    left: 94%;
    top: 25%;
  }
  .sky-orbit-1 {
    --orbit-x: 39vw;
    --orbit-y: 13vh;
    --planet-size: 94px;
    left: 4%;
    top: 76%;
  }
  .travelling-planet { filter: none; }
  .travelling-planet .planet-art { opacity: .78; }
  .sky-satellite .planet-art { opacity: .62; }
}
@media (prefers-reduced-motion: reduce) {
  body:not(.motion-forced) .sky-satellite { animation: none !important; }
}