/* ==========================================================================
   TESSERA MUNDI — lo sciame dei punti sull'Atlante
   --------------------------------------------------------------------------
   Quando due città sono troppo vicine per essere distinte, i loro punti si
   chiudono in un cerchio solo con dentro il numero delle tessere. Allargando
   la mappa si riaprono.

   Le prime due regole vengono da Leaflet.markercluster (MarkerCluster.css,
   licenza MIT): servono solo a far muovere i punti quando si aprono e si
   chiudono. Il resto è nostro.
   ========================================================================== */

.leaflet-cluster-anim .leaflet-marker-icon,
.leaflet-cluster-anim .leaflet-marker-shadow{
  transition:transform .3s ease-out, opacity .3s ease-in;
}
.leaflet-cluster-spider-leg{
  transition:stroke-dashoffset .3s ease-out, stroke-opacity .3s ease-in;
}

/* --------------------------------------------- una città, una tessera sola
   Prima era un cerchio disegnato dentro la mappa; ora è un punto come gli
   altri, perché solo così può entrare nello sciame. L'alone, che prima era
   un secondo cerchio, adesso è l'ombra. */
.leaflet-marker-icon.punto-uno{
  box-sizing:border-box;
  background:#2F5D4F;
  border:2px solid #FBF7EE;
  border-radius:50%;
  box-shadow:0 0 0 7px rgba(47,93,79,.16);
  cursor:pointer;
}

/* ------------------------------------------------------------- lo sciame
   Vuoto al centro, non pieno: si distingue dal punto di una città con più
   tessere, che si apre con un clic invece di allargarsi. */
.leaflet-marker-icon.punto-sciame{
  display:flex; align-items:center; justify-content:center;
  box-sizing:border-box;
  background:#FBF7EE;
  color:#2F5D4F;
  border:2px solid #2F5D4F;
  border-radius:50%;
  box-shadow:0 0 0 8px rgba(47,93,79,.14);
  font-family:var(--sans, system-ui, sans-serif);
  font-size:.9rem; font-weight:500; line-height:1;
  cursor:pointer;
  transition:box-shadow .2s ease;
}
.punto-sciame span{ transform:translateY(.5px); }
.punto-sciame:hover{ box-shadow:0 0 0 12px rgba(47,93,79,.2); }

@media (prefers-reduced-motion: reduce){
  .leaflet-cluster-anim .leaflet-marker-icon,
  .leaflet-cluster-anim .leaflet-marker-shadow,
  .leaflet-cluster-spider-leg,
  .punto-sciame{ transition:none; }
}