/* The dot image (web/dot_image.py; owner, 2026-11-11: "stick to just orange and green ...
   consider moving away from the grid"): two colors, the data's evergreen (--accent) for power and Compass orange
   (--mark-load) for loads, the live map's own, so the brand picture and the map read as one system. Linked from
   the map landing and About only. */

/* About's header picture (partials/_dots_us.html): our clusters where they are, larger where more MW; the land
   between keeps a faint blue-noise texture in the map line (styles.css `.about-dots__map .dots-land`). */
.about-dots__map .dots-power { stroke: var(--accent); }
.about-dots__map .dots-loads { stroke: var(--mark-load); }

/* The map's loading field (partials/_map_loading.html, js/map_loading.js): a canvas over the whole map, drawn for
   whatever view the map opens on, and a band that steps west to east (by transform), its own canvas showing its
   slice of a lit copy of the colored dots, so the lit dots stay on the map. styles.css `.map-loading`
   places, fades and removes the field; the band's rules are here in full so this file stands alone. */
.map-loading__canvas, .map-loading__lit { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.map-loading__band {
  position: absolute; top: 0; bottom: 0; left: 0; width: 18%; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent); /* taste-skill-ignore: the band's soft edge, a mask, not a fill */
  mask-image: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent); /* taste-skill-ignore: the band's soft edge, a mask, not a fill */
  transform: translateX(-100%);
}
.map-loading:not(.is-sweeping) .map-loading__band { display: none; }