@use "../../abstracts/index" as *;

@keyframes sliderShape {

    0%,
    100% {
        border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
        transform: translate3d(0, 0, 0) rotateZ(0.01deg);
    }

    34% {
        border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%;
        transform: translate3d(0, 5px, 0) rotateZ(0.01deg);
    }

    50% {
        transform: translate3d(0, 0, 0) rotateZ(0.01deg);
    }

    67% {
        border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%;
        transform: translate3d(0, -3px, 0) rotateZ(0.01deg);
    }
}

@keyframes tf-animate-zoom-in-out {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

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

@keyframes ripple-line {
    to {
        transform: scale(2);
        opacity: 0;
    }
}

@keyframes shine-reverse {
    0% {
        left: 100%;
    }

    100% {
        left: -100%;
    }
}


@-webkit-keyframes spinner-circleBounceDelay {

    0%,
    80%,
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

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

@keyframes spinner-circleBounceDelay {

    0%,
    80%,
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }

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

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.ani-zoom {
    animation: tf-animate-zoom-in-out 30s linear infinite;
}

@keyframes iconBounce {

    0%,
    100%,
    20%,
    50%,
    80% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }

    40% {
        -webkit-transform: translateY(-8px);
        -ms-transform: translateY(-8px);
        transform: translateY(-8px);
    }

    60% {
        -webkit-transform: translateY(-5px);
        -ms-transform: translateY(-5px);
        transform: translateY(-5px);
    }
}

@keyframes float1 {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-5px) rotate(-5deg);
    }
}

@keyframes float2 {

    0%,
    100% {
        transform: translateX(0) rotate(0deg);
    }

    50% {
        transform: translateX(5px) rotate(10deg);
    }
}

@keyframes float3 {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
    }

    50% {
        transform: scale(1.1) rotate(-8deg);
    }
}

@keyframes float4 {

    0%,
    100% {
        opacity: 0.6;
        transform: translateY(0);
    }

    50% {
        opacity: 1;
        transform: translateY(-8px);
    }
}

@keyframes float5 {

    0%,
    100% {
        transform: rotate(0deg) scale(1);
    }

    25% {
        transform: rotate(5deg) scale(1.05);
    }

    75% {
        transform: rotate(-5deg) scale(1.05);
    }
}

@keyframes bgMove {
    from {
        background-position: 200% 0;
    }

    to {
        background-position: 0% 0;
    }
}

@keyframes effect-send {
    0% {
        transform: translateX(0);
        opacity: 1;
    }

    49% {
        transform: translate3d(42px, -39px, 38px);
        opacity: 0;
    }

    50% {
        transform: translate3d(-42px, 39px, 38px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

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

    to {
        transform: rotate(360deg);
    }
}

@keyframes moveUp {
    0% {
        background-position-y: 0;
    }

    100% {
        background-position-y: -1000px;
    }
}

@keyframes objPosition {
    0% {
        object-fit: top;
    }

    100% {
        object-fit: bottom;
    }
}

.effectFade {
    opacity: 0;
}

.slick-slide,
.slick-track,
.flip-image,
.element,
.textFadeUp,
.textFadeUp2,
.textFadeUp3,
.scroll-fadeZoom,
.effectFade,
.animate-box,
.image-2,
.overflow-hidden>* {
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}