/* Jukebox, bust, back, and mute button hover and click effects */
#jukebox-button:hover .jukebox-img,
#bust-button:hover .bust-img,
#home-back-button:hover .back-img,
#play-back-button:hover .back-img,
#mute-button:hover .mute-img {
    filter: brightness(1.1);
}

#jukebox-button:active .jukebox-img,
#bust-button:active .bust-img,
#home-back-button:active .back-img,
#play-back-button:active .back-img,
#mute-button:active .mute-img {
    filter: brightness(1.3);
}

#jukebox-button:active .jukebox-img {
    transform: rotate(5deg);
}

#bust-button:active .bust-img {
    transform: rotate(-5deg);  /* Mirror: tilt left */
}

#home-back-button:active .back-img,
#play-back-button:active .back-img {
    transform: rotate(-5deg);  /* Rotate left like bust button */
}

#mute-button:active .mute-img {
    transform: rotate(5deg);  /* Rotate right like jukebox button */
    filter: brightness(1.3) drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));  /* Glow effect */
}

#mute-button:active {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);  /* Glow around button */
}

/* Animation keyframes for click effect */
@keyframes jukebox-click {
    0% {
        transform: rotate(0deg);
        filter: brightness(1);
    }
    50% {
        transform: rotate(5deg);
        filter: brightness(1.3);
    }
    100% {
        transform: rotate(0deg);
        filter: brightness(1);
    }
}

@keyframes bust-click {
    0% {
        transform: scaleX(-1) rotate(0deg);
        filter: brightness(1);
    }
    50% {
        transform: scaleX(-1) rotate(-5deg);
        filter: brightness(1.3);
    }
    100% {
        transform: scaleX(-1) rotate(0deg);
        filter: brightness(1);
    }
}

@keyframes back-click {
    0% {
        transform: rotate(0deg);
        filter: brightness(1);
    }
    50% {
        transform: rotate(-5deg);
        filter: brightness(1.3);
    }
    100% {
        transform: rotate(0deg);
        filter: brightness(1);
    }
}

@keyframes mute-click {
    0% {
        transform: rotate(0deg);
        filter: brightness(1);
    }
    50% {
        transform: rotate(5deg);
        filter: brightness(1.3) drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
    }
    100% {
        transform: rotate(0deg);
        filter: brightness(1);
    }
}

@keyframes mute-button-glow {
    0% {
        box-shadow: 0 0 0 rgba(255, 255, 255, 0);
    }
    50% {
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
    }
    100% {
        box-shadow: 0 0 0 rgba(255, 255, 255, 0);
    }
}

/* Apply animation when clicked */
#jukebox-button.clicked .jukebox-img {
    animation: jukebox-click 0.3s ease;
}

#bust-button.clicked .bust-img {
    animation: bust-click 0.3s ease;
}

#home-back-button.clicked .back-img,
#play-back-button.clicked .back-img {
    animation: back-click 0.3s ease;
}

#mute-button.clicked .mute-img {
    animation: mute-click 0.3s ease;
}

#mute-button.clicked {
    animation: mute-button-glow 0.3s ease;
}

.jukebox-img, .bust-img, .back-img, .mute-img {
    transition: all 0.15s ease;
}

/* Horizontally flip bust image */
.bust-img {
    transform: scaleX(-1);
}