/* Styles for map.js (the "Where we've been" map) */
.ttw-map { position: relative; width: 100%; max-width: 100%; font-family: "Figtree", system-ui, sans-serif; color: #0E2A3B; }
.ttw-svg { display: block; width: 100%; height: auto; }
.ttw-map-pins .ttw-svg, .ttw-map-bubbles .ttw-svg { border-radius: 38px 64px 44px 70px / 56px 40px 70px 46px; }
.ttw-grab { cursor: grab; touch-action: pan-y; }
.ttw-grab:active { cursor: grabbing; }
.ttw-hit { cursor: pointer; outline: none; }
.ttw-hit:focus-visible { outline: none; }
.ttw-hit:focus-visible > g { filter: drop-shadow(0 0 0 #0E2A3B) drop-shadow(0 0 3px #007C89); }
.ttw-c { transition: fill .6s ease; }
.ttw-v:hover { filter: brightness(1.06); }

/* pins drop in with a bounce */
.ttw-pin { transform-box: fill-box; transform-origin: 50% 100%; }
.ttw-go .ttw-pin { animation: ttw-drop .9s cubic-bezier(.3,1.6,.5,1) both; }
.ttw-hit:hover .ttw-pin { transform: scale(1.25); transition: transform .2s; }
@keyframes ttw-drop { 0% { transform: translateY(-60px) scale(.6); opacity: 0 } 60% { opacity: 1 } 100% { transform: none; opacity: 1 } }

/* bubbles pop then bob */
.ttw-pop { transform-box: fill-box; transform-origin: 50% 50%; }
.ttw-go .ttw-pop { animation: ttw-popin .7s cubic-bezier(.3,1.7,.5,1) both; }
.ttw-bobble { animation: ttw-bob 4s ease-in-out infinite; }
.ttw-hit:hover .ttw-pop { transform: scale(1.12); transition: transform .2s; }
.ttw-popin { transform-box: fill-box; transform-origin: 50% 100%; animation: ttw-popin .55s cubic-bezier(.3,1.7,.5,1) both; }
@keyframes ttw-popin { 0% { transform: scale(0) } 100% { transform: scale(1) } }
@keyframes ttw-bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-5px) } }

/* ambient movement */
.ttw-drift { animation: ttw-drift 9s linear infinite; }
@keyframes ttw-drift { to { transform: translateX(60px) } }
.ttw-march { animation: ttw-march 1.2s linear infinite; }
@keyframes ttw-march { to { stroke-dashoffset: -16 } }
.ttw-float-x { animation: ttw-fx 22s ease-in-out infinite alternate; }
.ttw-float-x2 { animation: ttw-fx 30s ease-in-out infinite alternate-reverse; }
@keyframes ttw-fx { to { translate: 70px 0 } }
.ttw-spin { animation: ttw-spin 24s linear infinite; transform-box: fill-box; transform-origin: center; }
.ttw-spin-slow { animation: ttw-spin 40s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ttw-spin { to { rotate: 360deg } }
.ttw-sway { animation: ttw-sway 4s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 30% 100%; }
@keyframes ttw-sway { from { rotate: -4deg } to { rotate: 5deg } }
.ttw-bob { animation: ttw-bob 3s ease-in-out infinite; }
.ttw-pulse { animation: ttw-pulse 1.8s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ttw-pulse { 0% { scale: .6; opacity: .6 } 100% { scale: 2.4; opacity: 0 } }

/* popup card */
.ttw-card { position: absolute; z-index: 5; width: 250px; max-width: calc(100% - 16px); background: #FFFFFF; border-radius: 22px 22px 22px 6px; box-shadow: 0 14px 40px rgba(14,42,59,.18); overflow: hidden; animation: ttw-cardin .25s ease-out; }
@keyframes ttw-cardin { from { transform: translateY(8px); opacity: 0 } }
.ttw-card img { display: block; width: 100%; height: 120px; object-fit: cover; }
.ttw-cbody { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px 14px; }
.ttw-cbody b { font-size: 19px; font-weight: 800; }
.ttw-n { font-size: 13px; font-weight: 700; color: #C2185B; text-transform: uppercase; letter-spacing: .06em; }
.ttw-post { color: #0E2A3B; font-size: 14.5px; line-height: 1.35; text-decoration: none; font-weight: 600; }
.ttw-post:hover { text-decoration: underline; }
.ttw-all { color: #007C89; font-weight: 800; font-size: 14px; text-decoration: none; margin-top: 4px; }
.ttw-x { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); font-size: 19px; line-height: 1; cursor: pointer; color: #0E2A3B; }

/* globe controls */
.ttw-gctl { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.ttw-gctl button { font: inherit; font-weight: 800; font-size: 15px; border: 0; border-radius: 999px; padding: 10px 18px; cursor: pointer; background: #007C89; color: #FFFFFF; }
.ttw-gctl .ttw-prev { background: #D4F4F2; color: #007C89; padding: 10px 14px; }
.ttw-gctl button:focus-visible { outline: 3px solid #FF6B8B; outline-offset: 2px; }
.ttw-stop { font-weight: 700; font-size: 14px; color: #3A5566; min-width: 150px; text-align: center; font-variant-numeric: tabular-nums; }

/* globe zoom: region shortcuts and + / − */
.ttw-zoom { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.ttw-regions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.ttw-zoom button { font: inherit; font-weight: 800; font-size: 14px; border: 0; border-radius: 999px; padding: 9px 14px; cursor: pointer; background: #FFFFFF; color: #007C89; box-shadow: inset 0 0 0 2px #D4F4F2; }
.ttw-zoom button[aria-pressed="true"] { background: #007C89; color: #FFFFFF; box-shadow: none; }
.ttw-zk { display: flex; gap: 6px; }
.ttw-zk button { width: 40px; height: 40px; padding: 0; font-size: 22px; line-height: 1; background: #D4F4F2; box-shadow: none; }
.ttw-zoom button:focus-visible { outline: 3px solid #FF6B8B; outline-offset: 2px; }

/* phones: flat maps keep a readable size and swipe sideways */
@media (max-width: 640px) {
  .ttw-map-pins, .ttw-map-bubbles { overflow-x: auto; overscroll-behavior-x: contain; }
  .ttw-map-pins .ttw-svg, .ttw-map-bubbles .ttw-svg { width: 820px; max-width: none; }
  .ttw-map-pins::after, .ttw-map-bubbles::after { content: "← swipe the map →"; position: sticky; left: 0; display: block; width: 100%; text-align: center; font-size: 13px; font-weight: 700; color: #5C7582; padding-top: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .ttw-map * { animation: none !important; transition: none !important; }
}
.ttw-card [hidden] { display: none !important; }