.promo-svg {
  width: 100%;
  height: 100%;
  transform: scale(1.8);
}
.promo-svg #MAP {
  animation: slide-bottom 2s ease-in-out forwards;
}

.promo-svg #MAP .cls-2 {
  stroke: var(--primary);
}

@keyframes slide-bottom {
  0% {
    opacity: 0;
    transform: translateY(-40px);
  }
  33% {
    opacity: 1;
    transform: translateY(20px);
  }
  66% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}
.promo-svg #CITY .cls-4 {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash-1 2s linear forwards;
  animation-delay: 2s;
}

@keyframes dash-1 {
  0% {
    stroke-dashoffset: 1000;
  }
  75% {
    stroke-dashoffset: 500;
  }
  100% {
    stroke-dashoffset: 0;
  }
}


.promo-svg #CITY *:not(.cls-4),
.promo-svg image {
  animation: opacity-1 .1s linear forwards;
  animation-delay: 4.5s;
  opacity: 0;
}

@keyframes opacity-1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
