/**
 * Career Map Particles – Stili base
 * WordPress Plugin v1.0.0
 */

.career-map-container {
  position: relative;
  display: block;
  overflow: hidden;
  box-sizing: border-box;
  min-height: 300px;

  /* Il cursore puntatore segnala l'interattività */
  cursor: crosshair;
}

.career-map-container canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  position: absolute;
  top: 0;
  left: 0;
}

/* ── Utility: sfondi brand ─────────────────────────── */

/* Sfondo blu notte profondo — consigliato per esaltare le particelle */
.career-map-dark {
  background-color: #0a0f1e;
}

/* Sfondo blu brand principale */
.career-map-brand {
  background-color: #004499;
}

/* Sfondo blu scuro palette */
.career-map-midnight {
  background-color: #112358;
}

/* ── Overlay testuale sopra l'animazione ───────────── */

/*
 * Usa questa classe su un div fratello del canvas per sovrapporre
 * contenuti testuali all'animazione. Es:
 *
 *   [career_map class="my-section"]
 *   <div class="career-map-overlay">
 *     <h2>Il tuo titolo</h2>
 *   </div>
 *
 * Oppure nel tuo tema CSS:
 *   .my-section { position: relative; }
 */
.career-map-overlay {
  position: relative;
  z-index: 10;
  pointer-events: auto;
}

/* ── Stato di caricamento ──────────────────────────── */

/* Il fade-in è gestito dal shader (globalOpacity), ma puoi aggiungere
   un placeholder visivo prima che WebGL sia pronto: */
.career-map-container::before {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 50%,
    rgba(17, 35, 88, 0.3) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}