/* ==========================================================================
   Banexco Traders Inc. — css/markets.css
   Page-local styles for markets.html (§4.7 / §6-map). Additive: linked
   AFTER css/main.css. Tokens only — no token redefinition, no color literals.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page head
   -------------------------------------------------------------------------- */
.page-head { padding-bottom: 0; }
.page-head .lede { font-size: 1.125rem; max-width: 38rem; }

/* --------------------------------------------------------------------------
   Export map (§6) — inline SVG, ink-soft coastlines on paper
   -------------------------------------------------------------------------- */
.map-section { padding-top: clamp(2.5rem, 5vw, 4rem); }
.map-figure { margin: 0; }
.export-map { display: block; width: 100%; height: auto; }
/* Two compositions of the same geography: desktop single-line labels vs
   mobile large stacked labels. Only one renders at a time. */
.export-map--mobile { display: none; }
@media (max-width: 600px) {
  .export-map--desktop { display: none; }
  .export-map--mobile { display: block; }
}

/* Closed landmass shapes: quiet sage fill + thin ink-soft coast stroke.
   Filled land is what makes it read as geography, not line-work. */
.map-coast path {
  fill: var(--sage);
  fill-rule: evenodd; /* keeps narrow seas (Red Sea, Med) unfilled */
  fill-opacity: 0.14;
  stroke: var(--ink-soft);
  stroke-width: 1.1;
  stroke-opacity: 0.55;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.export-map--mobile .map-coast path { stroke-width: 2; }
/* The origin country carries the story — let the archipelago sit a touch
   heavier than the rest of the region. Same token, deeper tint. */
.map-coast .map-coast-ph { fill-opacity: 0.32; stroke-opacity: 0.75; }

.map-arc {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}
.export-map--mobile .map-arc { stroke-width: 3.5; }
.map-arc--japan { stroke: var(--pine); }
.map-arc--sage { stroke: var(--sage); }

.map-origin { fill: var(--pine); }
.map-origin-ring { fill: none; stroke: var(--pine); opacity: 0.35; }
.map-dot--pine { fill: var(--pine); }
.map-dot--sage { fill: var(--sage); }

.map-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px; /* SVG user units — scales with the viewBox */
  letter-spacing: 0.1em;
  text-transform: uppercase;
  fill: var(--ink);
  /* paper halo so labels stay legible across coastline strokes */
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 4px;
  stroke-linejoin: round;
}
.map-label--origin { font-size: 14px; fill: var(--ink-soft); }
/* Narrow-desktop band (601–820px): the SVG shrinks, so labels scale up */
@media (max-width: 820px) {
  .export-map--desktop .map-label { font-size: 20px; }
  .export-map--desktop .map-label--origin { font-size: 16px; }
}
/* Mobile: ≥11px effective at 360px viewport (svg ≈ 320px → ×0.333) */
.export-map--mobile .map-label,
.export-map--mobile .map-label--origin { font-size: 34px; letter-spacing: 0.06em; stroke-width: 8px; }

/* Draw sequence (§6). Trigger: page-local IntersectionObserver in markets.html
   adds .is-drawn once the figure is ≥40% in view. Paths carry pathLength="1".
   Each arc draws over 1.2s, staggered Japan → China → Middle East 0.25s apart;
   each destination dot + label fades in as its arc lands.
   Dash values: the gap (1.5) exceeds the period the offset travels and the
   hidden offset overshoots by 0.02 so the round linecap can never poke out as
   a seam-dot at the origin before its arc starts.
   No-JS default (no html.js) = fully drawn; reduced-motion = drawn. */
html.js .map-figure .map-arc {
  stroke-dasharray: 1 1.5;
  stroke-dashoffset: 1.02;
  transition: stroke-dashoffset 1.2s ease-out;
}
html.js .map-figure .map-arc--china   { transition-delay: 0.25s; }
html.js .map-figure .map-arc--mideast { transition-delay: 0.5s; }
html.js .map-figure.is-drawn .map-arc { stroke-dashoffset: 0; }

html.js .map-figure .map-dest {
  opacity: 0;
  transition: opacity 0.45s ease-out;
}
html.js .map-figure.is-drawn .map-dest--japan   { opacity: 1; transition-delay: 1.1s; }
html.js .map-figure.is-drawn .map-dest--china   { opacity: 1; transition-delay: 1.35s; }
html.js .map-figure.is-drawn .map-dest--mideast { opacity: 1; transition-delay: 1.6s; }

@media (prefers-reduced-motion: reduce) {
  html.js .map-figure .map-arc { stroke-dashoffset: 0; transition: none; }
  html.js .map-figure .map-dest { opacity: 1; transition: none; }
}

/* --------------------------------------------------------------------------
   Market sections — Japan / China / Middle East
   -------------------------------------------------------------------------- */
.market-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.market-body p { color: var(--ink-soft); }
.market-media { max-width: 26rem; width: 100%; justify-self: center; }
.market-media img { width: 100%; height: auto; border-radius: var(--radius); }

.market-grid--flip .market-body { order: 2; }
.market-grid--flip .market-media { order: 1; }

@media (max-width: 820px) {
  .market-grid { grid-template-columns: 1fr; }
  .market-grid--flip .market-body { order: 0; }
  .market-grid--flip .market-media { order: 1; }
  .market-media { justify-self: start; max-width: 22rem; }
}

/* --------------------------------------------------------------------------
   Stat band — prefix/suffix wrapper (#2 · ~75%) around the animated span.
   Outer .stat-number carries the type styles; inner animated span flows inline.
   -------------------------------------------------------------------------- */
.stat-number > .stat-number {
  display: inline;
  font-size: inherit;
  line-height: inherit;
}

/* --------------------------------------------------------------------------
   Testimonials — full set, grouped by market, sage-tint cards
   -------------------------------------------------------------------------- */
.quote-groups { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); }
.quote-group-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pine);
  margin: 0 0 1.1rem;
}
.market-quote { background: var(--sage-tint); margin: 0; }
.quote-grid > .quote-card:only-child { grid-column: 1 / -1; max-width: 44rem; }