/* 
 * Menu Animation Fix for Settings and Contact pages
 * Ensures menu icons have the same purple/blue animation as the logo
 */

/* Light mode styling for menu icons with purple/blue gradient */
body:not(.dark) .menu-toggle i,
body:not(.dark) .sidebar_menu .menu ul li a i {
    background: linear-gradient(120deg, #3f51b5, #8e24aa, #5c6bc0, #9c27b0);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    animation: gradientMove 8s ease infinite;
}

/* Dark mode styling for menu icons with cosmic gradient */
body.dark .menu-toggle i,
body.dark .sidebar_menu .menu ul li a i {
    background: linear-gradient(270deg, #35a79c, #209cb3, #1e4a69, #35a79c);
    background-size: 800% 800%;
    animation: cosmic-gradient 8s ease infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    text-shadow: none;
}

/* Define gradientMove animation if not present */
@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Define cosmic-gradient animation if not present */
@keyframes cosmic-gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}