.map-section {
  position: relative;
  max-width: 100%;
  margin: 0 auto;
}
/* Сохраняем пропорции 16:9 */
.map-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 9/16 = 56.25% */
  overflow: hidden;  
}
.layers-container, 
.active-cities {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; 
  transition: opacity 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity;
}
.marker-container {
  transition: transform 0.24s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0; 
  animation: none !important;  
  /* Гарантируем, что трансформации будут сглажены */
  will-change: opacity, transform;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}
/* Для анимации scale */
.layer.scale-anim {
    transform-origin: center center;
}
.road {
    transition-property: stroke-dashoffset;
    transition-timing-function: ease-out;
    will-change: stroke-dashoffset;
}
.roads {
  /*opacity: 1 !important;*/ 
  transition-property: stroke-dashoffset;
  transition-timing-function: ease-out;
  will-change: stroke-dashoffset;
}
/* Фикс для Safari анимаций */
@supports (-webkit-touch-callout: none) {
  .layer {
    transform: translateZ(0);
    backface-visibility: hidden;
  }
  .active-city {
    -webkit-transform: translate(-50%, -50%);
    -webkit-transform-origin: center;
  }
} 
.active-city {
  position: absolute;
  z-index: 100;
  transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
  transform: translate(-50%, -50%);
  display: block; 
  transform-origin: center;
  animation: pulse 3s infinite cubic-bezier(0.22, 0.61, 0.36, 1); 
} 
@keyframes pulse {
  0% {
    transform: scale(1);  
  }
  50% {
    transform: scale(1.04);  
  }
  100% {
    transform: scale(1);  
  }
}
.active-city svg {
  width: 100%;
  height: 100%;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.active-city:hover svg,
.active-city:focus svg {
  transform: scale(1.4);
}
.active-city:hover .marker-container {
  transform: scale(1.15);
  cursor: pointer;
}
.active-city:focus {
  outline: 2px solid #FF553B;
  outline-offset: 2px;
  z-index: 1000;
}
.active-special svg {
  width: 100%;
  height: 100%;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.active-special:hover svg,
.active-special:focus svg {
  transform: scale(1.4);
}
.active-special:hover .marker-container {
  transform: scale(1.15);
  cursor: pointer;
}
.active-special:focus {
  outline: 0;
  outline-offset: 0;
  z-index: 900;
}
/* Анимации */
@keyframes fadeIn {
  to { opacity: 1; }
}
@keyframes drawRoad {
  to { stroke-dashoffset: 0; }
}

/* Мобильная адаптация */
.mobile-city-selector {
  display: none;
  text-align: center;
  margin-top: 20px;
}
@media (max-width: 768px) {
  .map-container { 
    /*padding-top: 90%;*/
  }
  .layer {
    /* Упрощенные анимации для мобильных */
    animation: fadeInMobile 0.3s forwards;
  }  
  /* Упрощенная анимация дорог */
  .road {
    animation: drawRoadMobile 1s forwards;
  }
  /* Меньшие маркеры */
  .active-city {
    transform: translate(-50%, -50%) scale(0.9);
  }  
  .active-city:hover .marker-container {
    transform: scale(1.08);
  } 
}

@media (max-width: 480px) {
  .map-container { 
    padding-top: 216.5%;
  }
  #city-select:focus {
    outline: 3px solid #3a86ff;
  }
  .roads {
    opacity: 0;
    display: none;
  }
}  
.roads.initialized {
  opacity: 1 !important;
}