/* ==========================================================================
   CODEORBIT — THE ORBIT (Home page)
   Each planet is one skill. Bigger planet = more progress. Crimson = finished.
   Three rings turn slowly; everything stops when reduced motion is on.
   ========================================================================== */
.home-orbit {
  --orbit-size: min(460px, 78vw); /* room for the tap area around edge planets */
  position: relative;
  width: var(--orbit-size);
  height: var(--orbit-size);
}

.orbit-star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: var(--text-primary);
  opacity: 0.25;
  animation: orbitTwinkle 5s ease-in-out infinite;
}

.orbit-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--border-light);
}

.orbit-ring.r1 {
  inset: 30%;
  border-color: var(--border);
}

.orbit-ring.r2 {
  inset: 15%;
}

.orbit-ring.r3 {
  inset: 0;
}

.orbit-spin {
  position: absolute;
  inset: 0;
  animation: orbitSpin var(--spin, 90s) linear infinite;
}

.orbit-ring.r2 .orbit-spin {
  animation-direction: reverse;
}

.orbit-planet {
  position: absolute;
  left: 50%;
  top: 50%;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--text-primary);
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: box-shadow var(--transition-fast);
}

/* Bigger invisible hit area so small planets are easy to tap (44px+). */
.orbit-planet::before {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 50%;
}

.orbit-planet:hover,
.orbit-planet.is-selected {
  box-shadow:
    0 0 0 4px var(--bg-main),
    0 0 0 5px var(--text-primary);
}

.orbit-planet.is-done.is-selected,
.orbit-planet.is-done:hover {
  box-shadow:
    0 0 0 4px var(--bg-main),
    0 0 0 5px var(--primary);
}

/* Hold still while someone is pointing at or choosing a planet. */
.home-orbit:hover .orbit-spin,
.home-orbit:focus-within .orbit-spin {
  animation-play-state: paused;
}

.orbit-detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  min-height: 3.2rem;
}

.orbit-detail[hidden] {
  display: none;
}

.orbit-detail-name {
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.orbit-detail-meta {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.orbit-planet.is-done {
  background: var(--primary);
  box-shadow: 0 0 0 7px var(--primary-subtle);
}

.orbit-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22%;
  height: 22%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
}

.orbit-core img {
  width: 58%;
  height: auto;
}

/* First-visit orbit: dashed, empty */
.home-orbit.is-empty .orbit-ring.r3 {
  border-style: dashed;
  border-color: var(--border-strong);
}

@keyframes orbitSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes orbitTwinkle {
  0%,
  100% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.9;
  }
}

@media (prefers-reduced-motion: reduce) {
  .orbit-spin,
  .orbit-star {
    animation: none;
  }
}