/**
 * Dekaii Logo Color Animation
 * Animates the logo color through: original → light blue → cyan → blue → red → original
 * Uses CSS filter hue-rotate for smooth color transitions
 */

/* Color cycling animation keyframes */
@keyframes dekaii-logo-color-cycle {
    0% {
        filter: hue-rotate(0deg) brightness(1);
    }

    20% {
        filter: hue-rotate(180deg) brightness(1.2);
        /* Light blue */
    }

    40% {
        filter: hue-rotate(160deg) brightness(1.1);
        /* Cyan */
    }

    60% {
        filter: hue-rotate(220deg) brightness(1);
        /* Blue */
    }

    80% {
        filter: hue-rotate(-30deg) brightness(1.1);
        /* Red */
    }

    100% {
        filter: hue-rotate(0deg) brightness(1);
    }
}

/* Apply animation to all logo instances */
.qodef-header-logo-link img,
.qodef-sticky-header-logo-link img,
.qodef-mobile-header-logo-link img {
    animation: dekaii-logo-color-cycle 6s ease-in-out infinite;
    /* Smooth transitions */
    will-change: filter;
}

/* Optional: Pause animation on hover for interactivity */
.qodef-header-logo-link:hover img,
.qodef-sticky-header-logo-link:hover img,
.qodef-mobile-header-logo-link:hover img {
    animation-play-state: paused;
}