/*=========================================================
  Electronic Jacquard Sales & Services
  File : animations.css
  Version : 1.0.0
  Description : Animation Library
=========================================================*/


/*=========================================================
  FADE ANIMATIONS
=========================================================*/


@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}



@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



@keyframes fadeDown{

    from{

        opacity:0;

        transform:translateY(-40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



@keyframes fadeLeft{

    from{

        opacity:0;

        transform:translateX(-50px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}



@keyframes fadeRight{

    from{

        opacity:0;

        transform:translateX(50px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}



/*=========================================================
  ZOOM ANIMATION
=========================================================*/


@keyframes zoomIn{

    from{

        opacity:0;

        transform:scale(.85);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}



/*=========================================================
  FLOATING EFFECT
=========================================================*/


@keyframes floating{

    0%{

        transform:translateY(0);

    }


    50%{

        transform:translateY(-15px);

    }


    100%{

        transform:translateY(0);

    }

}


.floating{

    animation:floating 4s ease-in-out infinite;

}



/*=========================================================
  SLOW FLOAT
=========================================================*/


@keyframes floatingSlow{


    0%,
    100%{

        transform:translateY(0);

    }


    50%{

        transform:translateY(-30px);

    }

}


.floating-slow{

    animation:floatingSlow 7s ease-in-out infinite;

}



/*=========================================================
  ROTATION
=========================================================*/


@keyframes rotate{

    from{

        transform:rotate(0);

    }


    to{

        transform:rotate(360deg);

    }

}


.rotate{

    animation:rotate 10s linear infinite;

}



/*=========================================================
  LOADER
=========================================================*/


@keyframes loaderRotate{

    from{

        transform:rotate(0deg);

    }


    to{

        transform:rotate(360deg);

    }

}



/*=========================================================
  GRADIENT ANIMATION
=========================================================*/


@keyframes gradientMove{


    0%{

        background-position:0% 50%;

    }


    50%{

        background-position:100% 50%;

    }


    100%{

        background-position:0% 50%;

    }

}



.gradient-animation{

    background-size:200% 200%;

    animation:gradientMove 8s ease infinite;

}



/*=========================================================
  BUTTON SHINE EFFECT
=========================================================*/


@keyframes shine{


    from{

        transform:translateX(-100%);

    }


    to{

        transform:translateX(100%);

    }

}



.shine{

    position:relative;

    overflow:hidden;

}



.shine::after{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:40%;

    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.5),
        transparent
    );

    animation:shine 3s infinite;

}



/*=========================================================
  GLOW EFFECT
=========================================================*/


@keyframes glow{


    0%{

        box-shadow:
        0 0 5px var(--clr-primary);

    }


    50%{

        box-shadow:
        0 0 25px var(--clr-primary);

    }


    100%{

        box-shadow:
        0 0 5px var(--clr-primary);

    }


}


.glow{

    animation:glow 3s infinite;

}



/*=========================================================
  BLOB BACKGROUND
=========================================================*/


@keyframes blobMove{


    0%{

        border-radius:
        40% 60% 70% 30%
        /
        40% 30% 70% 60%;

    }


    50%{

        border-radius:
        60% 40% 30% 70%
        /
        60% 70% 30% 40%;

    }


    100%{

        border-radius:
        40% 60% 70% 30%
        /
        40% 30% 70% 60%;

    }

}



.blob{

    animation:blobMove 10s ease-in-out infinite;

}



/*=========================================================
  PARALLAX HELPERS
=========================================================*/


.parallax{

    transform:translateZ(0);

    will-change:transform;

}



.parallax-slow{

    animation:parallaxSlow 12s ease-in-out infinite;

}



@keyframes parallaxSlow{


    0%{

        transform:translateY(0);

    }


    50%{

        transform:translateY(-25px);

    }


    100%{

        transform:translateY(0);

    }

}



/*=========================================================
  IMAGE HOVER ZOOM
=========================================================*/


.image-zoom{

    overflow:hidden;

}



.image-zoom img{

    transition:transform .6s ease;

}



.image-zoom:hover img{

    transform:scale(1.1);

}



/*=========================================================
  TEXT REVEAL
=========================================================*/


.text-reveal{

    overflow:hidden;

}


.text-reveal span{

    display:inline-block;

    animation:textReveal .8s ease forwards;

}



@keyframes textReveal{


    from{

        transform:translateY(100%);

        opacity:0;

    }


    to{

        transform:translateY(0);

        opacity:1;

    }

}



/*=========================================================
  AOS FALLBACK CLASSES
=========================================================*/


.reveal{

    animation:fadeUp 1s ease forwards;

}



/*=========================================================
  DELAYS
=========================================================*/


.delay-1{

    animation-delay:.2s;

}


.delay-2{

    animation-delay:.4s;

}


.delay-3{

    animation-delay:.6s;

}


.delay-4{

    animation-delay:.8s;

}



/*=========================================================
  REDUCED MOTION SUPPORT
=========================================================*/


@media(prefers-reduced-motion:reduce){


    *,
    *::before,
    *::after{

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

    }


}