/* Transform-only motion: the illustration stays vector sharp at every size. */
.orbit-illustration {
  width: min(100%, 340px);
  justify-self: center;
  display: grid;
  justify-items: center;
}
.orbit-illustration .opensource-mark {
  width: 100%;
  max-width: none;
  perspective: 900px;
  isolation: auto;
}
.orbit-scene {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--orbit-tilt-x, 8deg)) rotateY(var(--orbit-tilt-y, -8deg));
  transition: transform 650ms cubic-bezier(.2,.7,.2,1);
}
.orbit-scene .orbit {
  box-shadow: 0 1px 0 #fff8;
  pointer-events: none;
}
.orbit-scene .orbit-two { opacity: .8; }
.orbit-core {
  position: absolute;
  inset: 32%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 3px 0 #191c18, 0 16px 28px -18px #24272166, inset 0 1px 0 #ffffff18;
  transform: translateZ(22px);
  animation: orbit-hover 6s ease-in-out infinite;
}
.orbit-core img { width: 67%; height: 67%; }
.orbit-core::before {
  content: '';
  position: absolute;
  inset: -9%;
  border: 1px solid #ffad1f;
  border-radius: inherit;
  opacity: 0;
  animation: orbit-beacon 6s ease-out infinite;
}
.orbit-revolution {
  position: absolute;
  inset: 17%;
  transform: rotate(var(--phase));
  transform-style: preserve-3d;
  animation: orbit-revolve 36s linear infinite;
  pointer-events: none;
}
.orbit-scene .orbit-minion {
  left: 50%;
  top: 0;
  width: 25%;
  border: 3px solid var(--paper);
  box-shadow: 0 4px 0 -2px #25292322, 0 12px 18px -14px #25292370;
  transform: translate(-50%, -50%) rotate(calc(-1 * var(--phase))) translateZ(12px);
  animation: orbit-upright 36s linear infinite;
}
.orbit-scene .orbit-minion::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(145deg, #ffffff10, transparent 60%);
  box-shadow: inset 0 1px 0 #ffffff15;
}
.orbit-scene .orbit-minion .icon { stroke-width: 1.5; }
.orbit-outer {
  inset: 3%;
  animation-duration: 54s;
  animation-direction: reverse;
}
.orbit-scene .orbit-node {
  top: 0;
  left: 50%;
  width: 3.72%;
  transform: translate(-50%, -50%);
}
.orbit-scene .orbit-node-amber { background: var(--amber); border: 0; }
.orbit-scene .orbit-node-sage { background: #9eaa81; border: 0; }
.orbit-is-paused .orbit-scene *, .orbit-is-paused .orbit-scene *::before { animation-play-state: paused; }
@keyframes orbit-revolve {
  from { transform: rotate(var(--phase)); }
  to { transform: rotate(calc(var(--phase) + 360deg)); }
}
@keyframes orbit-upright {
  from { transform: translate(-50%, -50%) rotate(calc(-1 * var(--phase))) translateZ(12px); }
  to { transform: translate(-50%, -50%) rotate(calc(-1 * var(--phase) - 360deg)) translateZ(12px); }
}
@keyframes orbit-hover {
  0%, 100% { transform: translateZ(22px) translateY(0); }
  50% { transform: translateZ(28px) translateY(-4px); }
}
@keyframes orbit-beacon {
  0%, 15% { transform: scale(.92); opacity: 0; }
  24% { opacity: .22; }
  70%, 100% { transform: scale(1.38); opacity: 0; }
}
@media (max-width: 640px) {
  .orbit-illustration { width: min(100%, 280px); }
}
@media (prefers-reduced-motion: reduce) {
  .orbit-scene { transform: none; transition: none; }
  .orbit-scene *, .orbit-scene *::before { animation: none !important; }
  .orbit-core { transform: none; }
}