/* ============================================================
   PLANETS.CSS — Galaxia de planetas (subdominios/proyectos)
   Reemplaza el grid de tarjetas: cada proyecto es un planeta
   flotando en posiciones orgánicas (no grid), generadas por
   planets.js. Ver ese archivo para el algoritmo de distribución.
   ============================================================ */

.galaxy-field {
  position: relative;
  width: 100%;
  max-width: 1100px;
  height: 620px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

@media (max-width: 768px) {
  .galaxy-field {
    height: 900px;
  }
}

#galaxy-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: default;
  touch-action: manipulation;
}

#galaxy-canvas.is-hovering {
  cursor: pointer;
}

.planet-label {
  position: fixed;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--text-primary);
  background: rgba(5, 6, 10, 0.75);
  padding: 4px 10px;
  border: 1px solid rgba(123, 47, 255, 0.45);
  border-radius: 3px;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 6px);
  transition: opacity var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
  pointer-events: none;
  z-index: 20;
}

.planet-label.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 640px) {
  .planet-label {
    font-size: 0.65rem;
  }
}