/* ==========================================================
   VOGOW PREMIUM ANIMATIONS
   CSS Only
========================================================== */



/* ==========================
   SCROLL REVEAL
========================== */


.animate {

    opacity:0;

    transform:translateY(40px);

    transition:
    opacity .8s ease,
    transform .8s ease;

}



.animate.visible {

    opacity:1;

    transform:translateY(0);

}







/* ==========================
   FADE UP
========================== */


.fade-up {


    animation:

    fadeUp 1s ease forwards;


}




@keyframes fadeUp {


    from {


        opacity:0;

        transform:translateY(40px);


    }


    to {


        opacity:1;

        transform:translateY(0);


    }


}







/* ==========================
   FADE IN
========================== */


.fade-in {


    animation:

    fadeIn 1.2s ease forwards;


}



@keyframes fadeIn {


    from {


        opacity:0;


    }


    to {


        opacity:1;


    }


}








/* ==========================
   SCALE IN
========================== */


.scale-in {


    animation:

    scaleIn .8s ease forwards;


}



@keyframes scaleIn {


    from {


        opacity:0;

        transform:scale(.92);


    }


    to {


        opacity:1;

        transform:scale(1);


    }


}








/* ==========================
   FLOAT EFFECT
========================== */


.float {


    animation:

    floating 6s ease-in-out infinite;


}



@keyframes floating {


    0% {


        transform:translateY(0);


    }


    50% {


        transform:translateY(-15px);


    }


    100% {


        transform:translateY(0);


    }


}








/* ==========================
   BUTTON ANIMATION
========================== */


.primary-btn,
.secondary-btn,
.vogow-btn {


    position:relative;

    overflow:hidden;


}




.primary-btn::before,
.secondary-btn::before,
.vogow-btn::before {


    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;


    background:

    rgba(255,255,255,.25);


    transition:.4s ease;


}





.primary-btn:hover::before,
.secondary-btn:hover::before,
.vogow-btn:hover::before {


    left:100%;


}








/* ==========================
   CARD HOVER
========================== */


.feature-card,
.industry-card,
.partner-card,
.benefit-card {


    transition:

    transform .35s ease,
    box-shadow .35s ease;


}





.feature-card:hover,
.industry-card:hover,
.partner-card:hover,
.benefit-card:hover {


    transform:

    translateY(-10px);


}








/* ==========================
   DASHBOARD ANIMATION
========================== */


.dashboard-glass {


    animation:

    dashboardFloat 6s ease-in-out infinite;


}




@keyframes dashboardFloat {


    0% {


        transform:translateY(0);


    }


    50% {


        transform:translateY(-18px);


    }


    100% {


        transform:translateY(0);


    }


}








/* ==========================
   ICON HOVER
========================== */


.feature-card i,
.industry-card i,
.partner-card i {


    transition:.3s ease;


}



.feature-card:hover i,
.industry-card:hover i,
.partner-card:hover i {


    transform:

    scale(1.15);


}








/* ==========================
   TEXT GRADIENT EFFECT
========================== */


.gradient-text {


    background:

    linear-gradient(
    90deg,
    #0098da,
    #fc9f1c
    );


    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;


}








/* ==========================
   DELAY HELPERS
========================== */


.delay-1 {


    transition-delay:.15s;

}



.delay-2 {


    transition-delay:.30s;

}



.delay-3 {


    transition-delay:.45s;

}



.delay-4 {


    transition-delay:.60s;

}








/* ==========================
   REDUCED MOTION SUPPORT
========================== */


@media (prefers-reduced-motion:reduce){


    *,
    *::before,
    *::after {


        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;


    }


}