// Interactive map functionality document.addEventListener('DOMContentLoaded', function() { const oblasts = document.querySelectorAll('.oblast'); oblasts.forEach(oblast => { // Add click event for potential future functionality oblast.addEventListener('click', function(e) { e.preventDefault(); // Create a subtle visual feedback this.style.fill = '#d0d0d0'; setTimeout(() => { this.style.fill = ''; }, 200); }); // Enhanced hover effects oblast.addEventListener('mouseenter', function() { this.style.zIndex = '10'; }); oblast.addEventListener('mouseleave', function() { this.style.zIndex = ''; }); }); // Add smooth transitions const style = document.createElement('style'); style.textContent = ` .oblast { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .capital-dot { transition: all 0.2s ease; } .oblast:hover .capital-dot { r: 4; fill: #404040; } `; document.head.appendChild(style); });