/* The persistent tilted ground plane. Sits between the hue flood (body) and the card content. */

condition-map {
  position: absolute; inset: 0; z-index: 1;
  overflow: hidden; pointer-events: none;
  --map-hue: var(--card-accent);
}

.map-tilt {
  position: absolute; inset: -25%;                 /* bleed so tilt/pan never shows an edge */
  perspective: 1400px;
  transform: translateY(var(--pan-y, 0%)) rotateX(var(--tilt, 55deg));
  transform-style: preserve-3d;
  will-change: transform;
}
.map-camera {
  position: absolute; inset: 0;
  transform: rotateZ(var(--rot, 0deg)) scale(var(--zoom, 1)) translate(var(--tx, 0%), var(--ty, 0%));
  transform-origin: 50% 50%;
  will-change: transform;
}
.map-drift { position: absolute; inset: 0; }
.map-drift.is-drifting { animation: map-drift 18s ease-in-out infinite alternate; }
.map-drift.is-paused { animation-play-state: paused; }   /* per-slide `settle` — rests in place */

/* slow breathing orbit: pan + rotate + a hint of scale so the plane never feels frozen */
@keyframes map-drift {
  from { transform: translate(-1.8%, -1.1%) rotate(-1.6deg) scale(1.012); }
  to   { transform: translate(1.8%, 1.1%) rotate(1.6deg) scale(1.028); }
}

condition-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* the hexbin card draws its own tilted plane, so the shell map steps aside while it's active */
condition-map { transition: opacity var(--dur) var(--ease-out); }
condition-map[data-hidden] { opacity: 0; }
condition-map[data-suppressed] { display: none; }

/* neighborhood polygons — faint linework by default */
.hood {
  fill: color-mix(in srgb, var(--card-fg) 4%, transparent);
  stroke: color-mix(in srgb, var(--sf-bay-teal) 64%, var(--paper));
  stroke-width: 1.2;
  stroke-opacity: 0.56;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: fill var(--dur), stroke var(--dur), stroke-opacity var(--dur);
}
.map-major-roads {
  display: inline;
  opacity: 0.72;
}
.map-major-road {
  fill: none;
  stroke: color-mix(in srgb, var(--card-fg) 52%, transparent);
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity var(--dur), stroke var(--dur);
}
.map-major-road--major { stroke-width: 1.15; opacity: 0.34; }
.map-major-road--fwy { stroke-width: 1.8; opacity: 0.48; }
[data-style="choropleth"] .map-major-road,
[data-style="drain"] .map-major-road {
  stroke: color-mix(in srgb, var(--paper) 58%, transparent);
}
[data-style="dots"] .map-major-roads {
  opacity: 0.36;
}
.map-label {
  fill: var(--paper);
  stroke: color-mix(in srgb, var(--ink) 84%, transparent);
  stroke-width: 4;
  paint-order: stroke;
  vector-effect: non-scaling-stroke;
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-anchor: middle;
  text-transform: uppercase;
  dominant-baseline: middle;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.45));
}
/* active hood: filled + glowing in the map hue */
[data-style="filled"] .hood.is-active,
[data-style="outline"] .hood.is-active {
  fill: color-mix(in srgb, var(--map-hue) 42%, transparent);
  stroke: var(--map-hue);
  stroke-width: 2;
  stroke-opacity: 0.9;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--map-hue) 70%, transparent));
}
/* pins mode: dim polygons, the pin carries the meaning */
[data-style="pins"] .hood { fill: transparent; stroke: color-mix(in srgb, var(--sf-bay-teal) 52%, var(--paper)); stroke-opacity: 0.36; }
[data-style="pins"] .hood.is-active { fill: transparent; stroke: color-mix(in srgb, var(--map-hue) 55%, transparent); stroke-opacity: 0.72; filter: none; }

.map-focus-hex { display: none; }
.map-focus-hex.is-on { display: inline; }
.map-focus-hex__halo {
  fill: color-mix(in srgb, var(--map-hue) 18%, transparent);
  stroke: color-mix(in srgb, var(--map-hue) 35%, transparent);
  stroke-width: 12;
  filter: drop-shadow(0 0 20px color-mix(in srgb, var(--map-hue) 80%, transparent));
  vector-effect: non-scaling-stroke;
}
.map-focus-hex__outline {
  fill: transparent;
  stroke: var(--paper);
  stroke-width: 2.4;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.map-pin {
  fill: var(--map-hue);
  filter: drop-shadow(0 0 10px var(--map-hue));
  animation: pin-pulse 1.8s ease-in-out infinite;
}
@keyframes pin-pulse { 0%,100% { r: 6; opacity: 1; } 50% { r: 9; opacity: .75; } }

.map-dots circle { opacity: .85; }

/* v2 streets basemap (Insight 3) — texture under the photo dots; hidden unless a card turns it on */
.map-streets { display: none; }
.map-streets.is-on { display: inline; }
.map-street { fill: none; stroke: var(--card-fg); vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.map-street--local { stroke-width: 0.6; opacity: 0.16; }
.map-street--major { stroke-width: 1.1; opacity: 0.32; }
.map-street--fwy   { stroke-width: 1.6; opacity: 0.40; }

/* v2 photo dots (Insight 3) — one per photo. Pop in on --d; once the group is lit, the clean
   ones turn green on --g (the 43%). Flagged photos stay a quiet grey: the message is "clean". */
.map-photodots { display: none; }
.map-photodots.is-on { display: inline; }
.map-photodot {
  fill: color-mix(in srgb, var(--card-fg) 55%, transparent); opacity: 0;
  transform-box: fill-box; transform-origin: center;
  animation: photodot-pop 360ms ease-out forwards; animation-delay: var(--d, 0ms);
  transition: fill 900ms ease; transition-delay: var(--g, 0ms);
}
@keyframes photodot-pop {
  0% { opacity: 0; transform: scale(.2); }
  70% { opacity: 1; transform: scale(1.6); }
  100% { opacity: 1; transform: scale(1); }
}
.map-photodots.is-lit .map-photodot.is-clean { fill: #6fdc9a; }
.map-photodots.no-trans .map-photodot { animation: none; opacity: 1; transition: none; }

@media (prefers-reduced-motion: reduce) {
  .map-drift.is-drifting { animation: none; }
  .map-pin { animation: none; }
  .map-photodot { animation: none; opacity: 1; transition: none; }
  .map-tilt, .map-camera { transition: none !important; }
}

/* phones: lift the plane into the clear band above the bottom-docked panel */
@media (max-width: 700px) {
  .map-tilt { translate: 0 -6%; }
}