/* Hero distribution map. A dotted world with thin routes between a hub and
   unlabelled nodes, built by tools/build-map.mjs and included inline so the
   routes can animate. Aspect ratio is the SVG's (1200 x 520). The routes draw
   in once the splash is gone, then a short light travels along each. */

.map {
  position: absolute;
  inset: auto 0 0;
  z-index: 0;
  width: min(100%, 80rem);
  margin: 0 auto;
  aspect-ratio: 1200 / 520;
  pointer-events: none;
}

.map svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Land: each dot is a zero length segment with a round cap. */
.map svg > path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 3.2;
  stroke-linecap: round;
}

.map g:first-of-type path {
  fill: none;
  stroke: var(--light-crimson);
  stroke-width: 1;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0.75;
}

.map g:last-of-type circle {
  fill: var(--light-crimson);
  opacity: 0;
}

/* Animation runs from the start but is held while the splash covers the page,
   the same gate entrance.css uses. */
.map g:first-of-type path {
  animation: route-draw 1.8s var(--ease-out) forwards;
  animation-delay: calc(0.4s + var(--i) * 0.14s);
}

.map g:last-of-type circle {
  animation: node-in 0.6s var(--ease-out) forwards;
  animation-delay: calc(0.6s + var(--i) * 0.14s);
}

html:has(.splash:not([hidden]):not(.is-leaving)) .map :is(path, circle) {
  animation-play-state: paused;
}

@keyframes route-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes node-in {
  to {
    opacity: 1;
  }
}

@media (max-width: 992px) {
  .map {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .map g:first-of-type path {
    stroke-dashoffset: 0;
    animation: none;
  }

  .map g:last-of-type circle {
    opacity: 1;
    animation: none;
  }
}