/* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Leaflet Customizations */
.leaflet-popup-content-wrapper { border-radius: 12px; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); }
.leaflet-popup-content { margin: 12px; font-family: 'Inter', sans-serif; }
#map { z-index: 1; }

/* Shimmer Animation */
@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}
.animate-shimmer {
    animation: shimmer 2s infinite linear;
    background: linear-gradient(to right, #f1f5f9 4%, #e2e8f0 25%, #f1f5f9 36%);
    background-size: 1000px 100%;
}

/* Fact Overlay Animation */
.fact-overlay-bg {
    background: linear-gradient(-45deg, #1e3a8a, #10b981, #0ea5e9, #0f172a);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
    position: relative;
    overflow: hidden;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.bubble {
    position: absolute;
    bottom: -20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    animation: bubbleUp 10s infinite ease-in;
    pointer-events: none;
}

@keyframes bubbleUp {
    0% { transform: translateY(0) scale(1); opacity: 0; }
    20% { opacity: 0.5; }
    100% { transform: translateY(-800px) scale(1.5); opacity: 0; }
}

#factText {
    transition: opacity 0.3s ease-in-out;
}

/* Animations */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up {
    animation: fadeInUp 0.5s ease-out forwards;
}

/* Dark Mode Transitions */
body {
    transition: background-color 0.3s, color 0.3s;
}