.water-feature.on {
    border-radius: 50%;
    fill: #00ccff;
    border: 2px solid #00ccff;
    width: 10px;
    height: 10px;
    text-align: center;
    position: relative;
    animation: blue-pulse 2s ease infinite;
}

.water-feature.off {
    border-radius: 50%;
    border: 2px solid #00ccff00;
    width: 10px;
    height: 10px;
    text-align: center;
    position: relative;
}

@-webkit-keyframes blue-pulse {
    0% {
        box-shadow: 0 0 0 #00ccff, inset 0 0 0 #00ccff;
    }
    50% {
        box-shadow: 0 0 16px #00ccff, inset 0 0 16px #00ccff;
    }
    100% {
        box-shadow: 0 0 0 #00ccff, inset 0 0 0 #00ccff;
    }
}

@-webkit-keyframes gold-pulse {
    0% {
        box-shadow: 0 0 0px #ffcc00, inset 0 0 0px #ffcc00;
    }
    50% {
        box-shadow: 0 0 32px #ffcc00, inset 0 0 32px #ffcc00;
    }
    100% {
        box-shadow: 0 0 0px #ffcc00, inset 0 0 0px #ffcc00;
    }
}

.shake {
    animation: gold-pulse 2s ease infinite;
}