/* ======================================================
   SEAN B SOLUTIONS
   GLOBAL ANIMATIONS
   /assets/css/home/animations.css

   Professional Website Motion System
====================================================== */


/* ======================================================
   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);

    }

}



/* ======================================================
   SCALE / ZOOM
====================================================== */


@keyframes zoomIn{

    from{

        opacity:0;

        transform:

        scale(.85);

    }


    to{

        opacity:1;

        transform:

        scale(1);

    }

}



@keyframes zoomOut{

    from{

        opacity:0;

        transform:

        scale(1.15);

    }


    to{

        opacity:1;

        transform:

        scale(1);

    }

}



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


@keyframes floating{


    0%{

        transform:

        translateY(0);

    }


    50%{

        transform:

        translateY(-12px);

    }


    100%{

        transform:

        translateY(0);

    }

}



/* ======================================================
   PULSE EFFECT
====================================================== */


@keyframes pulse{


    0%{

        transform:

        scale(1);

    }


    50%{

        transform:

        scale(1.05);

    }


    100%{

        transform:

        scale(1);

    }

}



/* ======================================================
   ROTATE
====================================================== */


@keyframes rotateSlow{


    from{

        transform:

        rotate(0deg);

    }


    to{

        transform:

        rotate(360deg);

    }

}



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


@keyframes shine{


    from{

        left:-100%;

    }


    to{

        left:150%;

    }

}



/* ======================================================
   SLIDE LINE
====================================================== */


@keyframes slideLine{


    from{

        width:0;

    }


    to{

        width:100%;

    }

}



/* ======================================================
   ANIMATION UTILITIES
====================================================== */


.animate-fade{

    animation:

    fadeIn .8s ease both;

}



.animate-up{

    animation:

    fadeUp .8s ease both;

}



.animate-down{

    animation:

    fadeDown .8s ease both;

}



.animate-left{

    animation:

    fadeLeft .8s ease both;

}



.animate-right{

    animation:

    fadeRight .8s ease both;

}



.animate-zoom{

    animation:

    zoomIn .8s ease both;

}



.animate-float{

    animation:

    floating 4s ease-in-out infinite;

}



.animate-pulse{

    animation:

    pulse 2s ease-in-out infinite;

}



/* ======================================================
   STAGGER ANIMATIONS
====================================================== */


.delay-1{

    animation-delay:.15s;

}


.delay-2{

    animation-delay:.3s;

}


.delay-3{

    animation-delay:.45s;

}


.delay-4{

    animation-delay:.6s;

}


.delay-5{

    animation-delay:.75s;

}



/* ======================================================
   HOVER MOTION
====================================================== */


.hover-lift{

    transition:

    transform .35s ease,
    box-shadow .35s ease;

}



.hover-lift:hover{

    transform:

    translateY(-8px);

    box-shadow:

    0 20px 50px rgba(0,0,0,.12);

}



.hover-grow{

    transition:

    transform .35s ease;

}



.hover-grow:hover{

    transform:

    scale(1.05);

}



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


.btn-animation{

    position:relative;

    overflow:hidden;

}



.btn-animation::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:80%;

    height:100%;

    background:

    rgba(255,255,255,.25);

    transform:

    skewX(-25deg);

}



.btn-animation:hover::before{

    animation:

    shine .8s ease;

}



/* ======================================================
   CARD REVEAL
====================================================== */


.reveal-card{

    opacity:0;

    transform:

    translateY(30px);

    animation:

    fadeUp .7s ease forwards;

}



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


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


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


    animation-duration:.01ms !important;

    animation-iteration-count:1 !important;

    transition-duration:.01ms !important;


}


}