/* =====================================================
   BLOOMSERVE ANIMATIONS
===================================================== */

/* =====================================
   GLOBAL TRANSITIONS
===================================== */

a,
button,
.btn,
.card,
.service-card,
.why-card,
.process-card,
.industry-card,
.download-card,
.testimonial-card,
.trust-item{

    transition:all .35s cubic-bezier(.4,0,.2,1);

}

/* =====================================
   FADE UP
===================================== */

.fade-up{

    opacity:0;

    transform:translateY(40px);

    transition:all .8s ease;

}

.fade-up.show{

    opacity:1;

    transform:translateY(0);

}

/* =====================================
   FADE LEFT
===================================== */

.fade-left{

    opacity:0;

    transform:translateX(-40px);

    transition:all .8s ease;

}

.fade-left.show{

    opacity:1;

    transform:translateX(0);

}

/* =====================================
   FADE RIGHT
===================================== */

.fade-right{

    opacity:0;

    transform:translateX(40px);

    transition:all .8s ease;

}

.fade-right.show{

    opacity:1;

    transform:translateX(0);

}

/* =====================================
   SCALE
===================================== */

.scale-up{

    opacity:0;

    transform:scale(.9);

    transition:all .7s ease;

}

.scale-up.show{

    opacity:1;

    transform:scale(1);

}

/* =====================================================
   FLOATING ANIMATION
===================================================== */

@keyframes floatY{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

.hero-dashboard{

    animation:floatY 6s ease-in-out infinite;

}

/* =====================================
   GLOW PULSE
===================================== */

@keyframes glowPulse{

    0%{

        box-shadow:0 20px 50px rgba(11,134,213,.12);

    }

    50%{

        box-shadow:0 35px 70px rgba(11,134,213,.22);

    }

    100%{

        box-shadow:0 20px 50px rgba(11,134,213,.12);

    }

}

.dashboard-window{

    animation:glowPulse 5s ease-in-out infinite;

}

/* =====================================
   BUTTON SHINE
===================================== */

.btn{

    position:relative;

    overflow:hidden;

}

.btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:60%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transition:left .7s ease;

}

.btn:hover::before{

    left:140%;

}

/* =====================================
   CARD HOVER
===================================== */

.why-card:hover,
.service-card:hover,
.process-card:hover,
.industry-card:hover,
.download-card:hover,
.testimonial-card:hover,
.trust-item:hover{

    transform:translateY(-10px);

}

/* =====================================
   IMAGE ZOOM
===================================== */

img{

    transition:transform .35s ease;

}

.image-hover{

    overflow:hidden;

    border-radius:24px;

}

.image-hover:hover img{

    transform:scale(1.05);

}

/* =====================================
   LINK UNDERLINE
===================================== */

a{

    transition:color .3s ease;

}

/* =====================================
   REDUCE MOTION
===================================== */

@media (prefers-reduced-motion:reduce){

*{

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

}