/* Sea to Believe Aquariums, v6: the Texas map in "Pick your aquarium".
   Geometry from v5 "Texas Trio"; everything visual is Surface (site.css?v=43fde0beb8 tokens). */

/* ---------- The map ---------- */
.txmap { position: relative; isolation: isolate; }
/* a soft blue shadow under the slab */
.txmap::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: 8% 4% 4%;
  background: radial-gradient(50% 42% at 55% 58%, rgba(29, 95, 209, .16), rgba(29, 95, 209, 0));
}
.txmap__stage { position: relative; aspect-ratio: 4 / 3; }

/* SVG fallback: keeps its own 678:643 box, centred in the stage */
/* The poster is the 3D map's own resting frame (scripts/poster.py), so it shows the instant the page
   paints and the live canvas takes over with no visible change. Without WebGL it simply stays. */
.txmap__poster { position: absolute; inset: 0; width: 100%; height: 100%; }
.txmap[data-mode="3d"] .txmap__poster { visibility: hidden; }

/* 3D: the canvas replaces the poster with its first frame (identical pixels, so no transition) */
.txmap__canvas { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.txmap__canvas canvas { display: block; width: 100%; height: 100%; }
.txmap[data-mode="3d"] .txmap__canvas { opacity: 1; }

/* ---------- Pins: sticker labels, same family as .stk ---------- */
/* positioned by --x/--y (percent of the stage, where the poster draws each pin) until 3D takes over
   and moves them by `translate` (px) as the map tilts */
.pins { position: absolute; inset: 0; pointer-events: none; }
.pin {
  --c: var(--sun); --rot: -3deg; --lift: 0px; --grow: 1;
  position: absolute; left: var(--x); top: var(--y); width: 0; height: 0;
  color: var(--ink); text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.txmap[data-mode="3d"] .pin { left: 0; top: 0; }
.pin[data-venue="austin"] { --c: var(--austin); }
.pin[data-venue="sanantonio"] { --c: var(--sa); --rot: 2deg; }
.pin[data-venue="houston"] { --c: var(--houston); --on: var(--ink); --rot: -2deg; }
.pin-hit {
  position: absolute; left: -22px; top: -22px; width: 44px; height: 44px;
  border-radius: 50%; pointer-events: auto; cursor: pointer;
}
.pin-label {
  position: absolute; white-space: nowrap; pointer-events: auto; cursor: pointer;
  padding: 6px 13px 5px;
  font: 600 var(--t-sm)/1.1 var(--f-display); color: var(--on, #fff);
  background: var(--c); border: 3px solid var(--paper); border-radius: var(--r-pill);
  box-shadow: var(--sh-sticker);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.pin--n .pin-label { left: 0; bottom: 26px; transform: translateX(-50%) translateY(var(--lift)) rotate(var(--rot)) scale(var(--grow)); }
.pin--w .pin-label { right: 26px; top: 0; transform: translateY(-50%) translateX(var(--lift)) rotate(var(--rot)) scale(var(--grow)); }
.pins:has(.is-active) .pin:not(.is-active) { --grow: .94; }
.pin.is-active { --rot: 0deg; --lift: -4px; --grow: 1.08; z-index: 1; }
.pin.is-active .pin-label { box-shadow: 0 3px 0 rgba(11, 27, 51, .16), 0 14px 22px -10px rgba(11, 27, 51, .45); }
.pin:focus-visible { outline: none; }
.pin:focus-visible .pin-label { outline: 3px solid var(--ink); outline-offset: 3px; }

.txmap__hint {
  display: flex; justify-content: center; align-items: center; gap: var(--s2);
  margin-top: var(--s2);
  font: 600 var(--t-sm)/1 var(--f-display); color: var(--ink-2);
}
.txmap__hint-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--sun); }

/* ---------- Venue cards answer the map ---------- */
.venue { transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.venue.is-active {
  transform: translateY(-6px);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 32%, transparent), var(--sh-card);
}
.venue.is-active .venue__media img { transform: scale(1.04); }
.venue.is-active .venue__tag { transform: rotate(0deg) translateY(-3px) scale(1.06); }

/* ---------- Responsive ---------- */
@media (max-width: 700px) {
  .pin-label { padding: 4px 9px 3px; font-size: var(--t-xs); border-width: 2px; }
  .pin--n .pin-label { bottom: 20px; }
  .pin--w .pin-label { right: 20px; }
  .txmap__hint { margin-top: 0; }
}
@media (max-width: 420px) {
  .pin-label { padding: 3px 8px 2px; font-size: .75rem; }
  /* Austin and Houston sit close at this size: tuck Houston's sticker nearer its pin */
  .pin[data-venue="houston"] .pin-label { bottom: 12px; }
}