/* The orbit scene: nebula, three star layers in depth, a tilted orbital plane,
   the octopus planet and moons. Markup contract: see site/dev/orbit.html. */
.orbit {
  --scale: 1;
  --cy: 50%;
  position: relative;
  height: 560px;
  overflow: hidden;
  perspective: 1000px;
  background:
    radial-gradient(ellipse at 25% 20%, #3B3B8F99, transparent 55%),
    radial-gradient(ellipse at 80% 75%, #5B3FA877, transparent 50%),
    radial-gradient(ellipse at 60% 10%, #7C95FF33, transparent 40%);
}

/* Stars: three layers at different depths, drifting slowly */
.orbit-field { position: absolute; inset: -20%; transform-style: preserve-3d; transition: transform .4s ease-out;
  transform: rotateX(var(--tilt-fx, 0deg)) rotateY(var(--tilt-fy, 0deg)); }
.orbit-field i { position: absolute; inset: 0; animation: orbit-drift linear infinite;
  background-image:
    radial-gradient(1px 1px at 10% 20%, #fff, transparent),
    radial-gradient(1px 1px at 30% 70%, var(--lavender), transparent),
    radial-gradient(1.5px 1.5px at 60% 30%, #fff, transparent),
    radial-gradient(1px 1px at 80% 80%, var(--rim), transparent),
    radial-gradient(1px 1px at 45% 50%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 90% 15%, var(--lavender-bright), transparent); }
.orbit-field .l1 { background-size: 110px 110px; opacity: .35; transform: translateZ(-400px) scale(1.4); animation-duration: 90s; }
.orbit-field .l2 { background-size: 170px 170px; opacity: .6; transform: translateZ(-150px) scale(1.15); animation-duration: 60s; }
.orbit-field .l3 { background-size: 260px 260px; opacity: .9; transform: translateZ(80px); animation-duration: 40s; }
@keyframes orbit-drift { to { background-position: 260px 130px; } }

/* The orbital plane */
.orbit-scene { position: absolute; left: 50%; top: var(--cy); width: 0; height: 0; transform-style: preserve-3d;
  transition: transform .4s ease-out; transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); }
.orbit-system { position: absolute; transform-style: preserve-3d; transform: scale(var(--scale)) rotateX(72deg); }

.ring { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); }
.ring.r1 { width: 520px; height: 520px; border: 1px dashed #E8D4F833; }
.ring.r2 { width: 400px; height: 400px; border: 1.5px solid #C9A0E866; box-shadow: 0 0 18px #7C95FF33; }
.ring.r3 { width: 270px; height: 270px; border: 1.5px solid #7C95FF55; }

/* Moons: one element each; the sphere is ::before, the text is the label.
   --r radius, --t period, --a start angle (also the resting angle under reduced motion). */
.moon { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 4px;
  font: 10px/1 var(--font-mono); color: var(--lavender-bright); white-space: nowrap; text-shadow: 0 0 6px var(--night); transform-style: preserve-3d;
  animation: orbit-moon var(--t, 26s) linear infinite;
  transform: rotateZ(var(--a, 0deg)) translateX(var(--r, 200px)) rotateZ(calc(-1 * var(--a, 0deg))) rotateX(-72deg) translate(-50%, -50%); }
.moon::before { content: ""; width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #F4ECFF, var(--tone) 35%, #2B2A78 80%); box-shadow: 0 0 14px var(--tone); }
.moon { --tone: var(--lavender); }
.moon[data-tone="rim"] { --tone: var(--rim); }
.moon[data-tone="mint"] { --tone: var(--mint); }
@keyframes orbit-moon {
  from { transform: rotateZ(var(--a, 0deg)) translateX(var(--r, 200px)) rotateZ(calc(-1 * var(--a, 0deg))) rotateX(-72deg) translate(-50%, -50%); }
  to { transform: rotateZ(calc(var(--a, 0deg) + 360deg)) translateX(var(--r, 200px)) rotateZ(calc(-1 * var(--a, 0deg) - 360deg)) rotateX(-72deg) translate(-50%, -50%); }
}

/* The planet: faces the viewer, with highlight, shaded edge and atmosphere */
.orbit-planet { position: absolute; width: 92px; height: 92px; border-radius: 50%;
  transform: translate(-50%, -50%) rotateX(-72deg); box-shadow: 0 0 40px 8px #7C95FF77; }
.orbit-planet img { display: block; width: 100%; height: 100%; border-radius: 50%; animation: orbit-bob 7s ease-in-out infinite; }
.orbit-planet::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle at 34% 28%, #ffffff55, transparent 28%),
    radial-gradient(circle at 70% 78%, transparent 45%, #0A092099 75%); }
@keyframes orbit-bob { 50% { transform: translateY(-5px); } }

/* Labels grow as the system scales down, so they stay about 9–10px on screen */
@media (max-width: 900px) { .orbit { --scale: .75; height: 460px; } .moon { font-size: 12px; } }
@media (max-width: 480px) { .orbit { --scale: .55; height: 360px; } .moon { font-size: 17px; } .moon[data-minor] { display: none; } }