/* Confetti Fall Animation */
@keyframes confetti-fall {
    0% {
        opacity: 1;
        transform: translateY(0) rotate(0deg) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(300px) rotate(720deg) scale(0.3);
    }
}

.confetti-particle {
    animation: confetti-fall 1.5s ease-in forwards;
}

/* Pin Pulse Animation */
@keyframes pin-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.6);
    }
    70% {
        box-shadow: 0 0 0 20px rgba(255, 215, 0, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
    }
}

.pin-pulse {
    animation: pin-pulse 1.5s ease-out 3;
}

/* Leaflet circle marker pulse via SVG */
@keyframes marker-pulse-ring {
    0% {
        r: 8;
        opacity: 0.8;
        stroke-width: 3;
    }
    100% {
        r: 24;
        opacity: 0;
        stroke-width: 1;
    }
}

/* Announcement Slide In */
@keyframes announcement-enter {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-30px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

/* Announcement Slide Out */
@keyframes announcement-exit {
    0% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px) scale(0.95);
    }
}

.announcement.entering {
    animation: announcement-enter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.announcement.exiting {
    animation: announcement-exit 0.3s ease-in forwards;
}

/* Golden Ring Pulse on Announcement */
@keyframes ring-pulse {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}

/* Overlay Fade */
@keyframes overlay-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes overlay-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Marker Fade Out */
@keyframes marker-fade-out {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.5);
    }
}

/* Gentle float for offline icon */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.offline-icon {
    animation: float 3s ease-in-out infinite;
}