/* ============================================================================
   sections/markets.css — Real (equirectangular) golden world map
   ----------------------------------------------------------------------------
   Map markup is in sections/markets.html (viewBox 0 0 360 180, degree-space).
   assets/js/markets-map.js injects the routes + pins and toggles .is-drawn on
   the <svg> to animate the trade-route arcs outward from the Bangladesh hub.
   ========================================================================== */

.markets { position: relative; }
.markets .map-wrap {
  position: relative; margin-top: var(--space-5);
  max-width: 1040px; margin-inline: auto;
  padding: clamp(.75rem, 2.5vw, 1.75rem);
  border: 4.73px solid var(--line); border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(201,162,75,.06), transparent 60%),
    linear-gradient(180deg, rgba(2,7,26,.5), rgba(2,7,26,.2));
  box-shadow: var(--glow-gold);
}
.markets svg.world { width: 100%; height: auto; display: block; }

/* Lat/long graticule — barely-there gold grid. */
.markets .graticule path { fill: none; stroke: var(--gold-500); stroke-width: .25; opacity: .14; }

/* Landmasses — faint gold fill, gold coastline. */
.markets .land path {
  fill: rgba(201,162,75,.10);
  stroke: var(--gold-500); stroke-width: .5; stroke-linejoin: round;
  opacity: .85;
}

/* Trade-route arcs draw in via stroke-dashoffset (set inline by JS). */
.markets .route {
  fill: none; stroke: var(--gold-300); stroke-width: .7; opacity: .9;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.8s var(--ease);
}
.markets svg.is-drawn .route { stroke-dashoffset: 0 !important; }
/* the one arc that sails past the markets into the fisherman's net — fainter
   and slower than the trade routes: poetry, not data (ART-VISION #8) */
.markets .route--net {
  stroke: var(--gold-500); opacity: .45; stroke-width: .55;
  stroke-dasharray: none;
  transition: stroke-dashoffset 2.8s var(--ease) .9s;
}

/* Pins — layered glow / halo / core dot. */
.markets .pin-glow { fill: var(--gold-500); opacity: .18; animation: pin-pulse 2.6s ease-in-out infinite; }
.markets .pin-halo { fill: var(--gold-300); opacity: .35; }
.markets .pin { fill: var(--gold-300); cursor: pointer; transition: fill var(--dur-fast) var(--ease); }
.markets .pin:hover { fill: var(--gold-100); }
/* Keyboard affordance — pins are interactive (JS click), so they must show a
   focus ring, not rely on hover alone. */
.markets .pin-group:focus-visible { outline: none; }
.markets .pin-group:focus-visible .pin { fill: var(--gold-100); }
.markets .pin-group:focus-visible .pin-halo { opacity: .6; }
.markets .pin-group.is-hub .pin { fill: var(--rice-white); }
.markets .pin-group.is-hub .pin-glow { fill: var(--gold-300); opacity: .28; }

@keyframes pin-pulse { 0%,100% { opacity: .10; } 50% { opacity: .30; } }

/* Fallback / accessible legend of markets under the map. */
.market-legend { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: var(--space-5); }
.market-legend li { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-small); color: var(--text-muted-on-dark); }
.market-legend .flag { font-size: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .markets .route { stroke-dashoffset: 0; transition: none; }
  .markets .pin-glow { animation: none; }
}

/* ---- "See all markets" chip/button (shown when > 10 countries) -------- */
.see-all-markets {
  cursor: pointer; background: transparent; color: var(--gold-300);
  border: 1.35px dashed var(--gold-500); font: inherit; font-size: var(--fs-small);
  letter-spacing: .02em; border-radius: 999px; padding: .28rem .8rem;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.market-legend li .see-all-markets { padding: .1rem .55rem; }
.see-all-markets:hover { background: var(--gold-metallic); color: var(--navy-950); border-style: solid; }

/* NOTE: the .markets-modal styles deliberately live in components.css, NOT
   here. main.js can open that modal from ANY market chip row — hero, CTA band
   or footer — including on pages that never load this stylesheet, so it has to
   be global. Keeping a second copy here would just fight it on specificity. */


/* ===== The fisherman's cleared stage ====================================
   Like the tiger at Origin: the extra bottom padding IS the artwork's
   ground - he casts his net across cleared navy, under the world map,
   toward the one route that sails off its right edge. Do not fill it. */
#markets { padding-bottom: clamp(11rem, 20vw, 17rem); }
@media (max-width: 760px) { #markets { padding-bottom: var(--section-pad); } }