/* Animated Cape Town satellite coverage map (scoped) */
.ct-coverage-map {
  --ct-cov-bg: #050809;
  --ct-cov-panel: #0b1012;
  --ct-cov-line: #2de0d3;
  --ct-cov-line-faint: rgba(45, 224, 211, 0.26);
  --ct-cov-text: #eef7f6;
  --ct-cov-frame: #344043;
  position: relative;
  width: 100%;
  aspect-ratio: 1446 / 1062;
  background: #070a0b;
  border: none;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  color: var(--ct-cov-text);
}

.ct-coverage-map svg {
  display: block;
  width: 100%;
  height: 100%;
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
}

.ct-coverage-map .outer-frame {
  fill: #070a0b;
  stroke: none;
}

.ct-coverage-map .map-frame {
  fill: none;
  stroke: var(--ct-cov-frame);
  stroke-width: 1.25;
  shape-rendering: crispEdges;
}

.ct-coverage-map .map-shade {
  fill: rgba(3, 8, 10, 0.33);
}

.ct-coverage-map .map-shade-left {
  fill: url(#ctCovShadeLeft);
}

.ct-coverage-map .map-shade-top {
  fill: url(#ctCovShadeTop);
}

.ct-coverage-map .title {
  fill: var(--ct-cov-text);
  font-size: 28px;
  font-weight: 650;
  letter-spacing: 1.8px;
}

.ct-coverage-map .status {
  fill: var(--ct-cov-line);
  font-size: 15px;
  font-weight: 520;
  letter-spacing: 2.7px;
}

.ct-coverage-map .badge-box {
  fill: rgba(5, 13, 15, 0.88);
  stroke: rgba(45, 224, 211, 0.7);
  stroke-width: 1.25;
  shape-rendering: crispEdges;
}

.ct-coverage-map .badge-text {
  fill: var(--ct-cov-text);
  font-size: 13px;
  font-weight: 560;
  letter-spacing: 2.3px;
}

.ct-coverage-map .badge-dot {
  fill: var(--ct-cov-line);
  stroke: #eafffd;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.ct-coverage-map .area {
  opacity: 0.58;
  transition: opacity 280ms ease;
  cursor: pointer;
}

.ct-coverage-map .area.active {
  opacity: 1;
}

.ct-coverage-map .connector-set {
  shape-rendering: crispEdges;
}

.ct-coverage-map .connector {
  stroke: none;
  pointer-events: none;
}

.ct-coverage-map .connector-base {
  fill: rgba(45, 224, 211, 0.34);
}

.ct-coverage-map .connector-live {
  fill: var(--ct-cov-line);
  opacity: 0;
  transform-box: fill-box;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 620ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 180ms ease;
}

.ct-coverage-map .connector-live.connector-v {
  transform: scaleY(0);
  transform-origin: center top;
}

.ct-coverage-map .area.active .connector-live {
  opacity: 1;
  transform: none;
}

.ct-coverage-map .area.active .connector-live.connector-h {
  transition-delay: 90ms;
}

.ct-coverage-map .ring-static {
  fill: none;
  stroke: rgba(45, 224, 211, 0.34);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.ct-coverage-map .ring-pulse {
  fill: none;
  stroke: var(--ct-cov-line);
  stroke-width: 1.25;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  vector-effect: non-scaling-stroke;
}

.ct-coverage-map .area.active .ring-pulse.one {
  animation: ctCovSoftPulse 1.8s ease-out infinite;
}

.ct-coverage-map .area.active .ring-pulse.two {
  animation: ctCovSoftPulse 1.8s ease-out 500ms infinite;
}

@keyframes ctCovSoftPulse {
  0% {
    opacity: 0.65;
    transform: scale(0.58);
  }
  72% {
    opacity: 0.12;
  }
  100% {
    opacity: 0;
    transform: scale(1.62);
  }
}

.ct-coverage-map .core-halo {
  fill: rgba(45, 224, 211, 0.15);
  stroke: rgba(45, 224, 211, 0.58);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.ct-coverage-map .core {
  fill: #20aaa1;
  stroke: rgba(234, 255, 253, 0.76);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  transition: fill 240ms ease, stroke 240ms ease;
}

.ct-coverage-map .area.active .core {
  fill: var(--ct-cov-line);
  stroke: #f2fffe;
  filter: drop-shadow(0 0 8px rgba(45, 224, 211, 0.86));
}

.ct-coverage-map .callout-box {
  fill: rgba(5, 14, 16, 0.84);
  stroke: rgba(45, 224, 211, 0.45);
  stroke-width: 1.25;
  shape-rendering: crispEdges;
  transition: stroke 240ms ease, fill 240ms ease;
}

.ct-coverage-map .area.active .callout-box {
  fill: rgba(5, 16, 18, 0.96);
  stroke: var(--ct-cov-line);
  filter: none;
}

.ct-coverage-map .index-box {
  fill: rgba(45, 224, 211, 0.56);
}

.ct-coverage-map .area.active .index-box {
  fill: var(--ct-cov-line);
}

.ct-coverage-map .index-text {
  fill: #041112;
  font-size: 12px;
  font-weight: 760;
  letter-spacing: 0.2px;
}

.ct-coverage-map .label-text {
  fill: rgba(238, 247, 246, 0.76);
  font-size: 15px;
  font-weight: 560;
  letter-spacing: 1.15px;
}

.ct-coverage-map .area.active .label-text {
  fill: var(--ct-cov-text);
}

.ct-coverage-map .credit {
  fill: rgba(222, 237, 235, 0.57);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 1px;
}

.ct-coverage-map .control-panel {
  fill: var(--ct-cov-panel);
  stroke: none;
}

.ct-coverage-map .control {
  cursor: pointer;
  opacity: 0.78;
  transition: opacity 220ms ease;
  outline: none;
}

.ct-coverage-map .control:hover,
.ct-coverage-map .control:focus-visible,
.ct-coverage-map .control.active {
  opacity: 1;
}

.ct-coverage-map .control-box {
  fill: #091012;
  stroke: rgba(45, 224, 211, 0.42);
  stroke-width: 1.25;
  shape-rendering: crispEdges;
  transition: fill 220ms ease, stroke 220ms ease;
}

.ct-coverage-map .control.active .control-box {
  fill: #071719;
  stroke: var(--ct-cov-line);
}

.ct-coverage-map .control:focus-visible .control-box {
  stroke: #f2fffe;
}

.ct-coverage-map .control-text {
  fill: rgba(45, 224, 211, 0.72);
  font-size: 19px;
  font-weight: 480;
  letter-spacing: 0.65px;
  pointer-events: none;
}

.ct-coverage-map .control.active .control-text {
  fill: var(--ct-cov-line);
}

.ct-coverage-map .paused-mark {
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.ct-coverage-map.is-paused .paused-mark {
  opacity: 1;
}

.ct-coverage-map .pause-panel {
  fill: rgba(2, 7, 8, 0.76);
}

.ct-coverage-map .pause-text {
  fill: var(--ct-cov-text);
  font-size: 15px;
  font-weight: 560;
  letter-spacing: 2px;
}

.ct-coverage-map__live {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ct-pilot-map__visual--coverage {
  display: block;
  grid-column: 1 / -1;
  width: 100%;
  margin: 8px 0 0;
  height: auto !important;
  overflow: visible;
  border: none;
  background: transparent;
}

.ct-pilot-map__visual--coverage .ct-coverage-map {
  max-width: 100%;
  width: 100%;
  margin: 0;
  box-shadow: none;
}

.ct-pilot-map__visual--coverage .ct-coverage-map svg {
  display: block;
  width: 100%;
  height: auto;
}

.ct-pilot-map__visual--coverage img {
  height: auto !important;
  object-fit: unset !important;
  filter: none !important;
}

@media (max-width: 720px) {
  .ct-coverage-map .title {
    font-size: 22px;
  }

  .ct-coverage-map .status {
    font-size: 12px;
  }

  .ct-coverage-map .control-text {
    font-size: 14px;
  }

  .ct-coverage-map .label-text {
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ct-coverage-map *,
  .ct-coverage-map *::before,
  .ct-coverage-map *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}