/* Custom styles */
html {
    scroll-behavior: smooth;
}

/* Raindrop styling */
.raindrop {
    position: absolute;
    width: 2px;
    height: 15px;
    background: linear-gradient(to bottom, rgba(173, 216, 230, 0) 0%, rgba(173, 216, 230, 0.8) 50%, rgba(173, 216, 230, 0) 100%);
    border-radius: 50%;
    transform: rotate(15deg);
    opacity: 0; /* Will be animated to 1 by JS */
}

/* Splash effect for raindrops */
.splash {
    position: absolute;
    width: 10px;
    height: 3px;
    background-color: rgba(173, 216, 230, 0.7);
    border-radius: 50%;
    transform-origin: center;
    pointer-events: none; /* Do not interfere with clicks */
    opacity: 0; /* Will be animated by JS */
}

/* Basic shadows/effects for static city elements (optional) */
svg rect, svg path {
    /* Optional: Add a subtle shadow or border if you want more depth */
    /* filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.2)); */
}