/* ============================================================
 * SatScene — real Esri satellite basemap + analytics overlays.
 * Shared by the Hero brief map and the Capabilities map visuals.
 * ============================================================ */
.sat {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #0a0e14;
}
.sat__canvas {
  position: absolute;
  inset: 0;
}

/* Sticky nav is z-index:40. Leaflet declares stacking contexts well
   above that (panes 200–700, controls 800–1000), so without this the
   map can punch through the nav on scroll. Cap the container to 0 and
   isolate, then let internal panes flow normally inside it. */
.sat .leaflet-container {
  z-index: 0 !important;
  isolation: isolate;
  background: #0a0e14 !important;
}
.sat .leaflet-pane,
.sat .leaflet-top,
.sat .leaflet-bottom,
.sat .leaflet-control {
  z-index: auto !important;
}

/* Flat darken + vignette — tones the bright optical imagery so the neon
   overlays pop, WITHOUT a CSS filter on the tile layer (filters on the
   Leaflet tile canvas blanked the software renderer and jank real devices).
   This is just a div background: cheap and always paints. */
.sat::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(rgba(5, 8, 13, 0.24), rgba(5, 8, 13, 0.24)),
    radial-gradient(130% 100% at 50% 45%, transparent 52%, rgba(5, 8, 13, 0.52) 100%);
}

/* Optional flat darkening wash (for busy bright imagery under text). */
.sat__dim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: #05080d;
}

/* Imagery credit — required for Esri, kept subtle. */
.sat__attrib {
  position: absolute;
  left: 9px;
  bottom: 7px;
  z-index: 5;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.52);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

/* Analytics overlay layer — transparent SVG sat ON TOP of the tiles,
   sharing the component's original viewBox so AOI brackets / change
   boxes / chrome keep their composition. */
.sat-ovl {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;

  /* Analytics roles map to the BeyondEx design-system spatial-signal tokens
     (colors_and_type.css / DESIGN.md) so the landing speaks the product's
     visual language. Overlays use `currentColor` driven by these, so the
     mapping lives HERE — not as hardcoded hexes in each component. */
  --ax-aoi: var(--signal-cyan);      /* area of interest / footprint */
  --ax-build: var(--signal-coral);   /* new construction / change */
  --ax-sink: var(--signal-coral);    /* InSAR: subsiding (negative velocity) */
  --ax-mid: var(--signal-sodium);    /* InSAR: moderate ground motion */
  --ax-stable: var(--signal-cyan);   /* InSAR: stable ground */
}