/* Spictra – animated global presence map */

/* Section wrapper: gives the map a container, brand-matched background
   panel and real vertical spacing, instead of the bare `py-16` utility
   class (unused in this Bootstrap-based theme, so it added no spacing
   at all) that left the map floating edge-to-edge between the contact
   form above and the red stats bar below. */
.spictra-world-map-section {
  position: relative;
  background: var(--cleanin-gray-bg, #f1f5f9);
  padding: 50px 0;
}

.sp-world-map {
  /* Matches the site's actual brand red (--cleanin-base, set in
     custom-spictra.css) instead of the original blue, which clashed
     with every red-branded section around it — including the stats
     bar immediately below that has its own dotted world-map
     watermark. */
  --wm-line: var(--cleanin-base, #d02e26);
  --wm-dot: var(--cleanin-base, #d02e26);
  --wm-hq: #ff7a6b;
  --wm-ring: rgba(var(--cleanin-base-rgb, 208, 46, 38), .18);
  --wm-label: #5b6576;
  --wm-hq-bg: var(--cleanin-base, #d02e26);
  --wm-hq-text: #fff;
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  aspect-ratio: 1000 / 380;
  background: url("world-dots.svg") center / 100% 100% no-repeat;
  font-family: inherit;
  user-select: none;
}

@media (max-width: 991px) {
  .spictra-world-map-section { padding: 80px 0; }
}

@media (max-width: 640px) {
  .spictra-world-map-section { padding: 60px 0; }
}

.sp-world-map svg.wm-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Arcs: drawn in, then a soft dashed flow keeps moving */
.wm-arc {
  fill: none;
  stroke: var(--wm-line);
  stroke-width: 1.2;
  stroke-linecap: round;
  opacity: .85;
}
.wm-arc-flow {
  fill: none;
  stroke: var(--wm-hq);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 6 14;
  opacity: 0;
  animation: wm-flow 1.6s linear infinite;
}
.sp-world-map.is-drawn .wm-arc-flow { opacity: .9; transition: opacity .6s; }
@keyframes wm-flow { to { stroke-dashoffset: -40; } }

/* Travelling pulse along each arc */
.wm-comet { fill: var(--wm-hq); filter: drop-shadow(0 0 3px var(--wm-hq)); }

/* Markers (HTML, so text stays crisp at any size) */
.wm-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 14px; height: 14px;
}
.wm-marker .wm-dot {
  position: absolute; inset: 3px;
  border-radius: 50%;
  background: var(--wm-dot);
  box-shadow: 0 0 0 3px #fff, 0 0 0 4.5px rgba(31, 78, 140, .55);
}
.wm-marker .wm-ring {
  position: absolute; inset: -12px;
  border-radius: 50%;
  border: 2px solid var(--wm-ring);
  animation: wm-ping 2.4s ease-out infinite;
}
.wm-marker .wm-ring + .wm-ring { animation-delay: 1.2s; }
@keyframes wm-ping {
  0%   { transform: scale(.4); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}
.wm-marker .wm-label {
  position: absolute;
  left: 22px; top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: clamp(11px, 1.5vw, 18px);
  color: var(--wm-label);
  text-shadow: 0 0 4px #fff, 0 0 4px #fff;
}
.wm-marker.label-left .wm-label { left: auto; right: 22px; }

/* Markers fade in when their arc arrives */
.wm-marker:not(.wm-hq) { opacity: 0; transition: opacity .5s, transform .5s; transform: translate(-50%, -50%) scale(.5); }
.wm-marker.is-visible  { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* Headquarters */
.wm-hq { z-index: 2; }
.wm-hq .wm-dot { background: var(--wm-hq); }
.wm-hq .wm-ring { border-color: rgba(59, 154, 225, .35); }
.wm-hq-tag {
  position: absolute;
  left: 50%; bottom: 28px;
  transform: translateX(-50%);
  background: var(--wm-hq-bg);
  color: var(--wm-hq-text);
  padding: .55em 1.1em;
  border-radius: 8px;
  font-size: clamp(11px, 1.4vw, 17px);
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(31, 78, 140, .25);
}

@media (max-width: 640px) {
  .wm-marker .wm-label { display: none; }   /* too crowded on phones */
  .wm-marker .wm-ring { inset: -8px; }
}

@media (prefers-reduced-motion: reduce) {
  .wm-arc-flow, .wm-marker .wm-ring { animation: none; }
  .wm-comet { display: none; }
}