/* Click Event */

.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    z-index: 1;
    /* animation: blur-in 0.5s 0ms forwards; */
}

/* Let's define an animation: */
@keyframes blur-in {
    from {
        backdrop-filter: blur(0px);
        background: rgba(255, 255, 255, 0);
    }
    to {
        backdrop-filter: blur(8px);
        background: rgba(255, 255, 255, 0.75);
    }
}

@keyframes blur-out {
    from {
        backdrop-filter: blur(8px);
        background: rgba(255, 255, 255, 0.75);
    }
    to {
        backdrop-filter: blur(0px);
        background: rgba(255, 255, 255, 0);
    }
}

.blur-in {
    animation: blur-in 0.5s 0ms forwards;
}

.blur-out {
    animation: blur-out 0.5s 0ms forwards;
}

.scaled-city {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* .scaled * {
    transform: scale(1.5); 
} */

.svg-foreground {
    display: none;
    position: fixed;
    top: 10%;
    left: 5%;
    transform: scale(2.5, 2.5) translate(-50%, -50%);
    z-index: 2;
    transition: opacity 0.15s ease;
}

.svg-foreground:hover {
    opacity: 0.3;
}

.opacity-change {
    transition: opacity 1.0s ease;
}

/* 将动画应用到具体的元素上 */
.radius-change {
    animation: expandRadius 1s ease-out;
}