/* ===== Global Reach section (index.html only) — dot-matrix rotating
   globe + orbiting glass chip rings. PLACEHOLDER CONTENT: copy is
   deliberately capability-language only (no client/country/coverage
   counts) pending real global-reach metrics — see NOTES.md. ===== */

.global-reach-section {
  --voxion-dark: #153A50;
  --voxion-mid: #7198AF;
  --voxion-light: #AAD0E2;
  position: relative;
  overflow: hidden;
  background: var(--voxion-dark);
  padding: var(--space-7) var(--space-3);
}

.gr-intro {
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin: 0 auto var(--space-6);
  text-align: center;
}

.gr-label-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: var(--space-2);
}

.gr-label {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--voxion-light);
  opacity: 0.8;
}

.gr-heading {
  font-size: clamp(32px, 4.5vw, 44px);
  line-height: 1.15;
  color: #ffffff;
  margin-bottom: var(--space-2);
}

.gr-heading-sans {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
}

.gr-heading-serif {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.05em;
}

.gr-subtext {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.65);
}

/* ----- Globe stage ----- */

.gr-globe-stage {
  position: relative;
  width: min(560px, 88vw);
  height: min(560px, 88vw);
  margin: 0 auto;
}

/* Three.js canvas (see js/global-reach.js) replaces the old CSS
   preserve-3d dot field entirely -- real WebGL depth/occlusion/fog
   instead of an approximation. */
.gr-globe-sphere {
  position: absolute;
  inset: 0;
}

.gr-globe-sphere canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Glass sphere overlay — static, does not rotate with the dots */

.gr-glass-sphere {
  position: absolute;
  inset: 6%;
  z-index: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    circle at 32% 28%,
    rgba(255, 255, 255, 0.22),
    rgba(170, 208, 226, 0.05) 45%,
    rgba(21, 58, 80, 0.12) 75%
  );
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
  box-shadow:
    0 0 60px 10px rgba(113, 152, 175, 0.35),
    inset 0 0 40px rgba(170, 208, 226, 0.12);
}

/* Connection arcs overlay (decorative SVG, fixed positions) */

.gr-arcs {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  color: var(--voxion-light);
}

/* Endpoints are fixed decorative positions, not tied to any literal
   dot on the (separately rotating) THREE.js globe -- so instead of a
   hard round-cap cutoff floating in empty space mid-sphere, each end
   fades to transparent. Each path carries its own inline
   `stroke: url(#grArcFadeN)`, one userSpaceOnUse gradient per arc
   whose x1/y1/x2/y2 match that arc's own real path endpoints exactly
   -- deliberately not a single shared objectBoundingBox gradient,
   which faded from the wrong point on at least one arc since its
   bbox-relative direction doesn't reliably track the curve's actual
   start->end vector. `stroke` here is just the pre-gradient-load
   fallback. */
.gr-arc {
  fill: none;
  stroke: var(--voxion-light);
  stroke-width: 1;
  stroke-linecap: round;
  opacity: 0;
}

/* ----- Orbiting chip rings ----- */

.gr-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: 0;
  height: 0;
  pointer-events: none;
}

.gr-chip {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  pointer-events: auto;
}

.gr-chip-outer {
  color: var(--voxion-light);
}

/* Mobile marquee fallback for the outer ring */

.gr-marquee {
  display: none;
  position: relative;
  z-index: 2;
  max-width: 100%;
  margin: var(--space-5) auto 0;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.gr-marquee-track {
  display: flex;
  width: max-content;
  gap: var(--space-2);
  animation: grMarquee 22s linear infinite;
}

.gr-marquee .gr-chip {
  position: static;
}

@keyframes grMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .gr-marquee-track {
    animation: none;
  }
}

@media (max-width: 900px) {
  .gr-globe-stage {
    width: min(360px, 78vw);
    height: min(360px, 78vw);
  }

  .gr-ring-outer {
    display: none;
  }

  .gr-marquee {
    display: block;
  }
}

@media (max-width: 480px) {
  .gr-globe-stage {
    width: 260px;
    height: 260px;
  }
}