/* map-canvas.css — the dotted-map backdrop, as a block any hero can drop in.
 *
 * Companion to parts/blocks/map_canvas.html and assets/js/mvp/worldmap_hero.js.
 * Loaded per page by whichever template renders a hero with a map in it, the
 * same way assets/css/mvp/strands.css is loaded by the heroes that draw strands.
 *
 * These classes are deliberately NOT .wm-hero__*: the worldwide home's hero owns
 * that namespace and is only one of five consumers. The block asks one thing of
 * its host — that the host is a positioned box — and fills it.
 *
 * Everything here is decorative: the wrapper is aria-hidden in the markup and
 * pointer-events:none, so the map never intercepts a tap meant for the copy
 * above it, and a hero renders complete with no JavaScript at all.
 */

.im-mapcanvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.im-mapcanvas__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* the land dots, drawn once per size; the lights animate above them */
.im-mapcanvas__map { z-index: 1; }
.im-mapcanvas__fx { z-index: 2; }
.im-mapcanvas__labels { position: absolute; inset: 0; z-index: 3; }

/* market name, shown only where the projection leaves room (see nameClear in
   worldmap_hero.js). Never rendered in focus mode: the H1 names the country. */
.wm-glab {
  position: absolute;
  transform: translate(-50%, -140%);
  font: 600 9.5px/1 var(--im-font-display);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--im-accent-200);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .5s ease;
  background: rgba(252, 251, 247, .72);
  padding: 3px 5px;
  border-radius: 2px;
}
.wm-glab.is-on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .wm-glab { transition: none; }
}

/* Stacked viewports. These two lived in worldmap_hero.css, which only `/` loads,
   so /destinations/ and /about/ shipped the block without them. They belong to
   the block's own classes and therefore to the block's own stylesheet. The
   labels go because there is no quiet side of a full-bleed copy column for them
   to sit in; the lights lift because the map is a ground behind the words here
   rather than a field beside them. */
@media (max-width: 991.98px) {
  .im-mapcanvas__fx { opacity: .85; }
  .im-mapcanvas__labels { display: none; }
}

/* ── Legibility, where the block sits behind editorial copy ──────────────────
 * A dot field is busier than the strands drawing .st-hero was scrimmed for, and
 * the measurement says where that actually matters. Over a single dot:
 *
 *   headline  --im-ink        10.1:1  (AA large needs 3.0)   passes
 *   lede      --im-text-200    6.5:1  (AA body needs 4.5)    passes
 *   creds     --im-text-muted  3.4:1  desktop, 3.1:1 phone   FAILS
 *
 * So this is one real accessibility defect (the credential strip, which carries
 * "Regulated by the SRA" on UK pages) and one legibility complaint about texture
 * behind type that already clears contrast. About 72% paper puts the credential
 * strip back over 4.5:1, and that is the number below.
 *
 * The wash is LOCAL to the copy rather than a wider scrim: spending 72% paper
 * across the whole hero would erase the map the copy is meant to sit on, which
 * is the thing this rollout is for. z-index -1 inside .st-hero__content (itself
 * positioned at z-index 2, so it owns a stacking context) puts the wash behind
 * the text and in front of the canvas — the same arrangement .wm-hero__copy uses
 * on the worldwide home. */
.st-hero:has(> .im-mapcanvas) .st-hero__content::before {
  content: "";
  position: absolute;
  inset: -28px -140px -24px -48px;
  z-index: -1;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--im-paper) 88%, transparent) 0%,
    color-mix(in srgb, var(--im-paper) 78%, transparent) 54%,
    color-mix(in srgb, var(--im-paper) 34%, transparent) 82%,
    transparent 100%);
}

/* Below 992px .st-hero hides its own canvas and scrim entirely ("keep a clean
   text-only hero", strands.css) — but this block is not that canvas, so the map
   kept rendering with no scrim at all and the credential strip sat at 3.1:1 on a
   phone. The map stays, deliberately: the worldwide home already carries one at
   this width. What it needed was the vertical-ramp mobile variant strands.css
   names as its own follow-up. A left-to-right ramp is no use here because the
   copy spans the full column and there is no quiet side to fade towards. */
@media (max-width: 991.98px) {
  .st-hero:has(> .im-mapcanvas) .st-hero__content::before {
    inset: -20px -12px -18px -12px;
    background: radial-gradient(132% 98% at 30% 42%,
      color-mix(in srgb, var(--im-paper) 90%, transparent) 32%,
      color-mix(in srgb, var(--im-paper) 76%, transparent) 64%,
      color-mix(in srgb, var(--im-paper) 30%, transparent) 88%,
      transparent 100%);
  }
}