/* DDA map fixes (loaded after the original CSS).
   The original CARTO basemaps now need an API key, so the maps use OpenFreeMap vector tiles (src/lib/map-tiles.ts):
   "positron" for the home map (same design as CARTO light_all) and "liberty", muted here to match CARTO Voyager, for
   the property and admin maps. Without WebGL they fall back to OpenStreetMap raster tiles, toned down the same way. */
.leaflet-gl-layer canvas.dda-gl-soft{filter:saturate(.62) brightness(1.03)}
.leaflet-layer.dda-tiles-light{filter:grayscale(1) brightness(1.1) contrast(.86)}
.leaflet-layer.dda-tiles-soft{filter:saturate(.5) brightness(1.05) contrast(.92)}

/* Clustered property pins (leaflet.markercluster, src/components/site/PropertyMap.tsx): gold circles with the number of
   properties; they split as you zoom in. Includes the plugin's animation rules (its own CSS file is not loaded). */
.ds-cluster { background: transparent; border: 0; }
.ds-cluster span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--primary-color, #d4af37);
  color: #111;
  font: 700 14px/1 Montserrat, sans-serif;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary-color, #d4af37) 28%, transparent), 0 6px 16px rgba(0, 0, 0, .25);
  transition: transform .25s ease;
}
.ds-cluster--lg span { font-size: 15px; }
.ds-cluster:hover span { transform: scale(1.08); }
.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; }
@media (prefers-reduced-motion: reduce) {
  .leaflet-cluster-anim .leaflet-marker-icon,
  .leaflet-cluster-anim .leaflet-marker-shadow,
  .leaflet-cluster-spider-leg { transition: none; }
}