=====================================================
 FIXXX - ANIMATIONS
 animations.css
===================================================== */


/* =====================
   HERO BACKGROUND MOTION
===================== */


.gradient-orb {

    animation:
    orbMove 18s ease-in-out infinite alternate;

}


.orb-two {

    animation-delay:
    -8s;

}



@keyframes orbMove {


    0% {

        transform:
        translate(0,0)
        scale(1);

    }


    50% {

        transform:
        translate(80px,40px)
        scale(1.15);

    }


    100% {

        transform:
        translate(-40px,80px)
        scale(.95);

    }

}





/* =====================
   GRID BACKGROUND
===================== */


.grid-overlay {


    animation:
    gridMove 30s linear infinite;


}



@keyframes gridMove {


    from {

        background-position:
        0 0;

    }


    to {

        background-position:
        120px 120px;

    }


}






/* =====================
   LOGO GLOW
===================== */


.logo-mark {


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


}



@keyframes logoPulse {


    0%,
    100% {

        box-shadow:
        0 0 25px
        rgba(
            79,
            140,
            255,
            .35
        );

    }


    50% {

        box-shadow:
        0 0 50px
        rgba(
            124,
            58,
            237,
            .7
        );

    }


}






/* =====================
   DASHBOARD ANIMATION
===================== */


.dashboard {


    animation:
    dashboardFloat 8s ease-in-out infinite;


}



@keyframes dashboardFloat {


    0% {

        transform:
        translateY(0);

    }


    50% {

        transform:
        translateY(-8px);

    }


    100% {

        transform:
        translateY(0);

    }


}






/* =====================
   CHART ANIMATION
===================== */


.chart div {


    transform-origin:
    bottom;


    animation:
    chartGrow 2s ease forwards;


}



.chart div:nth-child(2) {

    animation-delay:
    .2s;

}



.chart div:nth-child(3) {

    animation-delay:
    .4s;

}



.chart div:nth-child(4) {

    animation-delay:
    .6s;

}



.chart div:nth-child(5) {

    animation-delay:
    .8s;

}




@keyframes chartGrow {


    from {

        transform:
        scaleY(0);

    }


    to {

        transform:
        scaleY(1);

    }


}






/* =====================
   BUTTON EFFECTS
===================== */


.button {


    position:
    relative;


    overflow:hidden;


}



.button::before {


    content:"";


    position:absolute;


    top:0;


    left:-120%;


    width:100%;


    height:100%;


    background:


    linear-gradient(

        120deg,

        transparent,

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

        transparent

    );


    transition:
    .6s;


}



.button:hover::before {


    left:120%;


}






/* =====================
   GLASS HOVER LIGHT
===================== */


.glass {


    position:
    relative;


    overflow:hidden;


}



.glass::before {


    content:"";


    position:absolute;


    inset:0;


    background:


    linear-gradient(

        120deg,

        transparent,

        rgba(
            255,
            255,
            255,
            .08
        ),

        transparent

    );


    transform:
    translateX(-100%);


    transition:
    .8s;


}



.glass:hover::before {


    transform:
    translateX(100%);


}






/* =====================
   SERVICE CARD MOTION
===================== */


.service-card {


    transition:
    transform .4s ease,
    border-color .4s ease,
    box-shadow .4s ease;


}



.service-card:hover {


    border-color:
    rgba(
        79,
        140,
        255,
        .5
    );


    box-shadow:


    0 25px 70px
    rgba(
        79,
        140,
        255,
        .2
    );


}






/* =====================
   TIMELINE DOTS
===================== */


.timeline-number {


    animation:
    timelinePulse 3s infinite;


}



@keyframes timelinePulse {


    0% {


        box-shadow:
        0 0 0
        rgba(
            79,
            140,
            255,
            .5
        );


    }


    50% {


        box-shadow:
        0 0 35px
        rgba(
            79,
            140,
            255,
            .8
        );


    }


    100% {


        box-shadow:
        0 0 0
        rgba(
            79,
            140,
            255,
            .5
        );


    }

}






/* =====================
   REVEAL STAGGER
===================== */


.reveal:nth-child(2) {

    transition-delay:
    .15s;

}


.reveal:nth-child(3) {

    transition-delay:
    .3s;

}


.reveal:nth-child(4) {

    transition-delay:
    .45s;

}


.reveal:nth-child(5) {

    transition-delay:
    .6s;

}






/* =====================
   BADGE STATUS
===================== */


.badge span {


    animation:
    statusBlink 2s infinite;


}



@keyframes statusBlink {


    0%,
    100% {

        opacity:
        1;

    }


    50% {

        opacity:
        .3;

    }

}






/* =====================
   INPUT FOCUS
===================== */


.contact-box input:focus,
.contact-box textarea:focus {


    border-color:
    var(--blue);


    box-shadow:


    0 0 25px
    rgba(
        79,
        140,
        255,
        .25
    );


}






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


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


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


        animation-duration:
        .01ms !important;


        animation-iteration-count:
        1 !important;


        scroll-behavior:
        auto !important;


    }


}