/* =========================================================
   INTERESSI — sistema orbitale
   ========================================================= */
.interessi-hero { --hero-glow: rgb(240 181 110 / 10%); }

.orbit-hint { margin-top: 1.4rem; color: var(--ink-mute); font-size: .8rem; }

.orbits {
  position: relative;
  justify-self: center;
  width: min(100%, 560px);
  aspect-ratio: 1;
  margin: 2rem;
}

.sun {
  position: absolute;
  top: 50%; left: 50%;
  display: grid;
  width: 92px; height: 92px;
  place-items: center;
  border-radius: 50%;
  color: var(--amber);
  background: radial-gradient(circle, rgb(255 216 164 / 22%), rgb(240 181 110 / 6%) 55%, transparent 72%);
  box-shadow: 0 0 80px rgb(240 181 110 / 28%);
  transform: translate(-50%, -50%);
  animation: breathe 5s ease-in-out infinite;
}
@keyframes breathe { 50% { box-shadow: 0 0 120px rgb(240 181 110 / 40%); } }

.orbit {
  position: absolute;
  top: 50%; left: 50%;
  width: calc(var(--r) * 2);
  aspect-ratio: 1;
  border: 1px solid rgb(184 214 255 / 11%);
  border-radius: 50%;
  translate: -50% -50%;
  animation: spin var(--t) linear infinite;
  animation-delay: calc(var(--t) * var(--phase) * -1);
  transition: border-color .4s;
  pointer-events: none;
}
@keyframes spin { to { transform: rotate(360deg); } }

.planet {
  position: absolute;
  top: 0; left: 50%;
  display: block;
  translate: -50% -50%;
  border-radius: 50%;
  text-decoration: none;
  pointer-events: auto;
}
.planet-body {
  position: relative;
  display: grid;
  width: 58px; height: 58px;
  place-items: center;
  border: 1px solid rgb(var(--pc) / 45%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgb(255 255 255 / 22%), transparent 42%),
    radial-gradient(circle, rgb(var(--pc) / 30%), rgb(var(--pc) / 8%) 70%);
  box-shadow: 0 0 28px rgb(var(--pc) / 22%);
  animation: spin var(--t) linear infinite reverse;
  animation-delay: calc(var(--t) * var(--phase) * -1);
  transition: scale .5s var(--ease-out), box-shadow .4s, border-color .4s;
}
.planet-emoji { font-size: 1.55rem; line-height: 1; }
.planet-label {
  position: absolute;
  top: calc(100% + .55rem);
  left: 50%;
  padding: .3rem .7rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgb(2 3 7 / 85%);
  color: var(--ink);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .06em;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -6px);
  transition: opacity .3s, transform .4s var(--ease-out);
  pointer-events: none;
}

/* ferma tutto quando il puntatore o il focus sono su un pianeta */
.orbits:has(.planet:hover) .orbit,
.orbits:has(.planet:hover) .planet-body,
.orbits:focus-within .orbit,
.orbits:focus-within .planet-body { animation-play-state: paused; }

.orbit:has(.planet:hover), .orbit:has(.planet:focus-visible) { border-color: rgb(240 181 110 / 45%); }
.planet:hover .planet-body, .planet:focus-visible .planet-body {
  border-color: rgb(var(--pc));
  box-shadow: 0 0 44px rgb(var(--pc) / 55%);
  scale: 1.22;
}
.planet:hover .planet-label, .planet:focus-visible .planet-label { opacity: 1; transform: translate(-50%, 0); }
.planet:focus-visible { outline-offset: 8px; border-radius: 50%; }

/* su schermi touch le etichette restano visibili */
@media (hover: none) {
  .planet-label { opacity: .9; transform: translate(-50%, 0); font-size: .64rem; }
}

@media (max-width: 900px) {
  .orbits { width: min(100%, 440px); margin: 1rem auto 0; }
}
@media (max-width: 600px) {
  .orbits { width: min(88vw, 360px); }
  .planet-body { width: 46px; height: 46px; }
  .planet-emoji { font-size: 1.2rem; }
  .sun { width: 70px; height: 70px; }
}

@media (prefers-reduced-motion: reduce) {
  .orbit, .planet-body { animation: none; }
  .orbit { transform: rotate(calc(var(--phase) * 360deg)); }
  .planet-body { transform: rotate(calc(var(--phase) * -360deg)); }
}