.animate { transition: all 0.6s ease-in-out; transition-delay: 0.1s; }

.animate.opacity { opacity: 0; }
.animate.opacity[data-state="hide"] { opacity: 0; }
.animate.opacity[data-state="show"] { opacity: 1; }

.animate.translateTop { transform: translateY(-100%); }
.animate.translateTop[data-state="hide"] { transform: translateY(-100%); }
.animate.translateTop[data-state="show"] { transform: translateY(0); }

.animate.translateBottom { transform: translateY(100%); }
.animate.translateBottom[data-state="hide"] { transform: translateY(100%); }
.animate.translateBottom[data-state="show"] { transform: translateY(0); }

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes circleScale {
    0%, 100% {
        transform: scale(0.8);
    }
    50% {
        transform: scale(1);
    }
}

.custom-icons .container .grid .icon.gear img { animation: rotate 20s linear infinite; }
.custom-icons .container .grid .icon.circle img { 
    animation: circleScale 3s linear infinite;
}