/* Triggers the animation when the parent (.group) is hovered */
.group:hover .map-popup {
    animation: map-popup 0.5s forwards;
}

/* The animation definition: Slides up, fades in, and scales up */
@keyframes map-popup {
    0% {
        bottom: 120px;
        visibility: visible;
        opacity: 0;
        transform: scale(0.95);
    }

    100% {
        bottom: 140px;
        /* Moves up */
        opacity: 1;
        /* Fades in */
        transform: scale(1);
    }
}

/* Mobile Media Query adjustments for the popup */
@media only screen and (max-width: 639px) {
    @keyframes map-popup {
        0% {
            bottom: 90px;
            visibility: visible;
            opacity: 0;
            transform: scale(0.95);
        }

        100% {
            bottom: 100px;
            opacity: 1;
            transform: scale(1);
        }
    }
}