/* انیمیشن تغییر رنگ حاشیه */
@keyframes colorChange {
    0%, 100% {
        border-color: #f3f3f3 #f3f3f3 #f3f3f3 #f3f3f3; /* فقط بالای دایره رنگی است */
        opacity: 0.6;
    }
    50% {
        opacity: 1;
        border-color: var(--style-accent-color) var(--style-accent-color) var(--style-accent-color) var(--style-accent-color); /* تمام حاشیه رنگی است */
    }
}

/* انیمیشن تغییر مقدار border-radius */
@keyframes borderRadiusChange {
    0%, 100% {
        border-radius: 10%; /* شروع و پایان با 5% */
    }
    50% {
        border-radius: 50%; /* وسط انیمیشن به 50% می‌رسد */
    }
}

@-webkit-keyframes mouse {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    50% {
        -webkit-transform: translateY(10px);
        transform: translateY(10px);
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes mouse {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    50% {
        -webkit-transform: translateY(10px);
        transform: translateY(10px);
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@-webkit-keyframes zoom {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes zoom {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}


@-webkit-keyframes wave {
    0% {
        -webkit-box-shadow: 0 0 0 0 var(--style-transparent-border-color);
        box-shadow: 0 0 0 0 var(--style-transparent-border-color);
    }

    100% {
        -webkit-box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
    }
}

@keyframes wave {
    0% {
        -webkit-box-shadow: 0 0 0 0 var(--style-transparent-border-color);
        box-shadow: 0 0 0 0 var(--style-transparent-border-color);
    }

    100% {
        -webkit-box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
        box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
    }
}