/* HouseHackers — reusable US map component styles (paired with js/usmap.js).
   Warm cream/forest/terracotta identity. */

.usmap {
  position: relative;
  width: 100%;
  aspect-ratio: 960 / 560; /* must match the viewBox in js/map-data.js */
  background: var(--cream-25);
  border: 1px solid var(--line-12);
  border-radius: var(--r-card);
  overflow: hidden;
}
.usmap__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.usmap__land {
  fill: #E9DEC9;
  stroke: rgba(42, 36, 26, .14);
  stroke-width: 1.25;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* dots — absolutely positioned by percentage over the map */
.usmap__dot {
  position: absolute;
  width: 18px; height: 18px;
  transform: translate(-50%, -50%);
  border: none; background: none; padding: 0; cursor: pointer;
  border-radius: 50%;
  z-index: 1;
}
.usmap__dot.is-active { z-index: 3; }
.usmap__dot::before { /* pulse ring */
  content: ""; position: absolute; inset: 1px; border-radius: 50%;
  background: var(--terracotta); opacity: .35;
  animation: usmapPulse 2.6s ease-out infinite;
}
.usmap__dot::after { /* solid core */
  content: ""; position: absolute; inset: 3px; border-radius: 50%;
  background: var(--terracotta); box-shadow: 0 0 0 3px var(--cream-25);
  transition: transform .15s ease;
}
.usmap__dot:nth-child(2n)::before { animation-delay: .8s; }
.usmap__dot:nth-child(3n)::before { animation-delay: 1.5s; }
.usmap__dot:hover::after,
.usmap__dot:focus-visible::after,
.usmap__dot.is-active::after { transform: scale(1.4); }
.usmap__dot:focus-visible { outline: none; }
.usmap__dot:focus-visible::after { box-shadow: 0 0 0 3px var(--cream-25), 0 0 0 6px rgba(33, 64, 44, .3); }
@keyframes usmapPulse { 0% { transform: scale(1); opacity: .4; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .usmap__dot::before { animation: none; opacity: .25; } }

/* tooltip */
.usmap__tip {
  position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--cream-50);
  border-radius: 8px; padding: 8px 12px; white-space: nowrap;
  opacity: 0; visibility: hidden; transition: opacity .15s ease; pointer-events: none; z-index: 5;
}
.usmap__tip::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--ink);
}
.usmap__dot:hover .usmap__tip, .usmap__dot:focus-visible .usmap__tip { opacity: 1; visibility: visible; }
.usmap__tip-t { display: block; font: 600 13px/1.2 var(--sans); }
.usmap__tip-m { display: block; font: 400 11.5px/1.2 var(--sans); color: rgba(247, 242, 231, .7); margin-top: 3px; }