:root {
    --animation-speed: 0.4s;
}

@media (max-width: 767.98px) {
    :root {
        --animation-speed: 0.6s; /* Reduced from 0.8s for a snappier feel on mobile */
    }
}

body {
    /* Smooth transition for theme colors */
    transition: background-color 0.4s ease, color 0.4s ease;
}

.theme-icon {
    cursor: pointer;
    display: inline-block;
    position: relative;
    z-index: 10;
    /* Performance hint: tells browser this element moves/animates */
    will-change: transform; 
}

#ripple-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--ripple-color);
    pointer-events: none;
    z-index: -1;
    /* clip-path is heavy; will-change forces GPU acceleration */
    clip-path: circle(0% at var(--ripple-x) var(--ripple-y));
    transition: clip-path var(--animation-speed) ease-out;
    will-change: clip-path;
}

@keyframes spinBounceGlow {
    0% {
        transform: rotate(0deg) scale(1);
        opacity: 1;
    }
    50% {
        transform: rotate(180deg) scale(0);
        /* Note: drop-shadow is very heavy during animation; 
           I have simplified the glow for performance */
        opacity: 0.7;
    }
    100% {
        transform: rotate(360deg) scale(1);
        opacity: 1;
    }
}

.theme-icon.animate {
    animation: spinBounceGlow var(--animation-speed) ease;
}