/* The route globe (route-globe.js): the landing page's hero and the one
   beside the trip builder. Both hang it in a dark band, so these colours are
   the same in both colour schemes. Line widths and label sizes are multiplied
   by --k, the viewBox units per screen pixel, so they keep their size however
   big the globe is drawn. */

/* Soft round edge, for when the globe leans in close on a short trip. At its
   normal size nothing reaches the fade. route-globe.js keeps its labels
   inside the solid part (SOLID there is 61% of this). */
.route-globe {
  display: block; width: 100%; height: 100%; overflow: visible;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 61%, transparent 71%);
          mask-image: radial-gradient(circle at 50% 50%, #000 61%, transparent 71%);
}

.lg-grat { fill: none; stroke: rgba(122, 88, 52, 0.16); stroke-width: calc(1px * var(--k, 1)); }
.lg-land {
  fill: none; stroke: #8a6a45; stroke-width: calc(1.1px * var(--k, 1));
  stroke-linejoin: round; stroke-linecap: round;
}
.lg-arc-base {
  fill: none; stroke: rgba(216, 31, 38, 0.38);
  stroke-width: calc(1.2px * var(--k, 1));
  stroke-dasharray: calc(3px * var(--k, 1)) calc(4px * var(--k, 1));
}
.lg-arc {
  fill: none; stroke: #e0282f; stroke-width: calc(2px * var(--k, 1));
  stroke-linecap: round; stroke-linejoin: round;
}
.lg-comet {
  fill: none; stroke: #ff3b33; stroke-width: calc(3.4px * var(--k, 1));
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgba(255, 59, 51, 0.8));
}
.lg-head {
  fill: #fff6ec; stroke: #ff3b33; stroke-width: calc(1.6px * var(--k, 1));
  filter: drop-shadow(0 0 4px rgba(255, 59, 51, 0.9));
}
.lg-pt { fill: #e0282f; stroke: #fff8ee; stroke-width: calc(1.5px * var(--k, 1)); }
.lg-dest { fill: #e0282f; stroke: #fff8ee; stroke-width: calc(2px * var(--k, 1)); }
.lg-pulse {
  fill: none; stroke: #e0282f; stroke-width: calc(2px * var(--k, 1));
  transform-box: fill-box; transform-origin: center;
  animation: lg-pulse 1.9s ease-out infinite;
}
@keyframes lg-pulse { from { transform: scale(1); opacity: 0.9; } to { transform: scale(3.4); opacity: 0; } }
.lg-paused .lg-pulse { animation-play-state: paused; }
.lg-lab {
  font-family: var(--display); font-weight: 700; fill: #241c12;
  font-size: calc(15px * var(--k, 1));
  paint-order: stroke; stroke: #fbefdc; stroke-width: calc(4px * var(--k, 1));
  stroke-linejoin: round;
}
.lg-code {
  font-family: var(--mono); font-weight: 600; fill: #d81f26;
  font-size: calc(11.5px * var(--k, 1)); letter-spacing: 0.06em;
  paint-order: stroke; stroke: #fbefdc; stroke-width: calc(4px * var(--k, 1));
  stroke-linejoin: round;
}
.lg-fade { transition: opacity 0.35s ease; }