.map-modal-trigger { font-weight: 500; }
.map-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 10, 16, 0.78);
  backdrop-filter: blur(0px);
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1), backdrop-filter 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity, backdrop-filter; 
}
.map-modal-overlay.is-open { opacity: 1; backdrop-filter: blur(6px); }
.map-modal {
  position: relative;
  width: 100%;
  max-width: 900px;
  background: var(--silver-box);
  border-radius: 16px;
  padding: 40px 32px 32px;
  box-shadow: 0 25px 70px rgba(0,0,0,0.55);
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}
html.dark .map-modal { background: radial-gradient(circle at top, #312e81, #020617 60%); }

@media (max-width: 767px) {
  .map-modal { padding: 36px 16px 20px; }
}

.map-modal-overlay.is-open .map-modal { transform: scale(1); }
.map-modal-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  z-index: 10;
}


.map-title { color: var(--text); }
.map-3d-container { position: relative; width: 100%; max-width: 820px; aspect-ratio: 820 / 512; margin: 0 auto; }

.map-link-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: block;
  pointer-events: none; /* важно: сами картинки больше не ловят hover */
  transition: transform 0.75s cubic-bezier(0.2, 1, 0.3, 1), filter 0.5s ease;
  will-change: transform, filter;
}
.map-link-wrapper img { display: block; width: 100%; height: auto; pointer-events: none; }
.map-link-wrapper.is-active { transform: translateY(-8px); filter: brightness(1.2); z-index: 999; }

.map-label {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7), 0 0 8px rgba(0,0,0,0.4);
  pointer-events: none; /* подписи не должны мешать hit-тесту */
  z-index: 1000;
  transition: transform 0.25s ease, font-size 0.25s ease;
  white-space: nowrap;
}
.map-label.is-active { font-size: 16px; transform: translate(-50%, -70%) scale(1.05); }

@media (max-width:991px){
  .map-label { font-size: 9px; font-weight: 300; }
  .map-label.is-active { font-size: 10px; }
  .map-label[data-region="herson"] { top: 56% !important; left: 35% !important; }
}

[data-animation="fade"] { opacity: 0; transition: opacity 0.8s ease-in-out; }
[data-animation="fade"].animated { opacity: 1; }