/**
 * Golden Eagle GS — World Map / Global Network System
 * Stage 4.5 — Luxury Visual Direction & Global Art Direction
 *
 * CREATIVE RESOLUTION (read this before assuming this is a literal
 * atlas map — see VISUAL_DIRECTION.md for the full reasoning):
 * this environment has no licensed cartographic asset and no way to
 * source one (no network access, no image-generation tool). Rather
 * than fabricate an inaccurate continent-silhouette SVG and present it
 * as production art, this system is built as an abstract graticule
 * (latitude/longitude grid) + accurately-projected city nodes +
 * connector arcs — a legitimate, premium "global network" visual
 * language in its own right, not a placeholder pretending to be a map.
 * Every node coordinate below is computed via the standard
 * equirectangular projection formula against each city's real
 * lat/long, so node placement is factually correct even though no
 * coastline art is present. A licensed continent-silhouette SVG layer
 * can be dropped in later using the exact same engraving technique
 * (§1 below) with zero changes to this file's mechanism.
 *
 * THE ENGRAVING TECHNIQUE (§1): a dual-offset drop-shadow filter pair
 * — one warm highlight offset up-left, one dark shadow offset
 * down-right — simulates light raking across a physically engraved
 * surface. This is a single static `filter` declaration, not a
 * per-frame animation, so it is GPU-composited once and costs nothing
 * on scroll or repaint. See MOTION_GUIDELINES.md's Performance Budget
 * for why this specific approach was chosen over box-shadow layering
 * (box-shadow cannot follow an SVG path's actual silhouette; filter:
 * drop-shadow can).
 *
 * LOADING: registered only (not sitewide) — see functions.php's
 * `ge_child_register_luxury_visual_assets()`. Enqueue on pages that
 * actually use the map (Home hero background, About, Contact — per
 * Stage 5's page build, not yet built).
 */

/* ==========================================================================
   1. THE ENGRAVING TECHNIQUE
   ========================================================================== */

.ge-worldmap {
  position: relative;
  width: 100%;
  overflow: hidden;
  pointer-events: none; /* Decorative — never intercepts clicks/taps. */
  user-select: none;
}

.ge-worldmap svg {
  width: 100%;
  height: auto;
  display: block;
  /* The engraving effect itself — see docblock. Two drop-shadows: a
     1px warm gold highlight top-left, a 1px navy-950 shadow
     bottom-right. Both are subpixel-offset and low-opacity so the
     effect reads as "carved" rather than "outlined". */
  filter:
    drop-shadow(-1px -1px 0 rgba(232, 200, 120, 0.25))
    drop-shadow(1px 1px 1px rgba(5, 11, 20, 0.6));
}

/* ==========================================================================
   2. GRATICULE (lat/long grid — the "engraved into navy" backdrop)
   ========================================================================== */

.ge-worldmap__graticule {
  stroke: var(--ge-color-gold-700);
  stroke-width: 0.5;
  opacity: 0.18;
  fill: none;
}

/* ==========================================================================
   3. OPTIONAL CONTINENT SILHOUETTE LAYER
   ========================================================================== */
/* If a licensed cartographic SVG is supplied later (see
   VISUAL_DIRECTION.md), its paths should carry this class — the
   engraving filter (§1) already applies to the whole <svg>, so no
   additional per-path work is needed, only this stroke/fill treatment. */

.ge-worldmap__landmass {
  fill: none;
  stroke: var(--ge-color-gold-500);
  stroke-width: 1;
  opacity: 0.35;
}

/* ==========================================================================
   4. CITY NODES (International Recruitment / Global Reach)
   ========================================================================== */

.ge-worldmap__node {
  fill: var(--ge-color-gold-300);
}

.ge-worldmap__node--hub {
  /* The Riyadh hub node — visually distinct (larger, brighter) since
     it represents both the recruitment destination AND the seat of
     the Government Services / Visa Processing narrative themes that
     have no separate geographic node of their own. */
  fill: var(--ge-color-gold-100);
}

.ge-worldmap__node-pulse {
  fill: none;
  stroke: var(--ge-color-gold-300);
  stroke-width: 1;
  opacity: 0;
  transform-origin: center;
  transform-box: fill-box;
  animation: ge-worldmap-pulse 3s var(--ge-ease-standard, ease) infinite;
}

/* Stagger a handful of nodes so the pulses don't all fire in unison —
   flat, mechanical simultaneity reads as less premium than gentle
   asynchrony. Six steps is enough variation for a handful of nodes;
   matches the Stage 2 stagger-step precedent (max 6 steps). */
.ge-worldmap__node-pulse:nth-of-type(1) { animation-delay: 0s; }
.ge-worldmap__node-pulse:nth-of-type(2) { animation-delay: 0.5s; }
.ge-worldmap__node-pulse:nth-of-type(3) { animation-delay: 1s; }
.ge-worldmap__node-pulse:nth-of-type(4) { animation-delay: 1.5s; }
.ge-worldmap__node-pulse:nth-of-type(5) { animation-delay: 2s; }
.ge-worldmap__node-pulse:nth-of-type(6) { animation-delay: 2.5s; }

@keyframes ge-worldmap-pulse {
  0% { opacity: 0.6; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.4); }
}

/* ==========================================================================
   5. CONNECTOR ARCS (recruitment corridors / visa & travel routes)
   ========================================================================== */

.ge-worldmap__connector {
  fill: none;
  stroke: var(--ge-color-gold-500);
  stroke-width: 0.75;
  stroke-dasharray: 2 3;
  opacity: 0.3;
}

/* ==========================================================================
   6. RESPONSIVE VISUAL BEHAVIOR
   ========================================================================== */
/* The map is a background/atmospheric element, never primary content —
   it simplifies (fewer visible details) rather than just shrinking as
   viewport narrows, since a full-detail graticule+node network at
   mobile width becomes visual noise, not signature branding. */

@media (max-width: 767px) {
  .ge-worldmap__graticule {
    opacity: 0.1; /* Fewer visible grid lines read at small size anyway. */
  }

  .ge-worldmap__connector {
    display: none; /* Corridors are a desktop storytelling detail. */
  }

  .ge-worldmap__node-pulse {
    display: none; /* Reduce motion + DOM cost on the device tier most
                       sensitive to both. */
  }
}

@media (min-width: 1024px) {
  .ge-worldmap {
    opacity: 0.9; /* Slightly more present at Laptop+ where it has
                     room to sit behind content without competing. */
  }
}

/* ==========================================================================
   7. ACCESSIBILITY & REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .ge-worldmap__node-pulse {
    animation: none;
    opacity: 0.25; /* Static presence instead of animated pulse — still
                      communicates "active node" without motion. */
  }
}

/* Decorative-only enforcement note: the SVG output by ge_worldmap_svg()
   (inc/worldmap.php) carries aria-hidden="true" at the markup level —
   this stylesheet has no accessibility responsibility beyond staying
   out of the way of `pointer-events`/`user-select` above, but the rule
   is documented here too since a future editor styling this file in
   isolation should know the map is never meant to be a focus target. */