script.js

// 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);
});