@keyframes finkGradientShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes finkFloat {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(0, -8px, 0); }
}

.has-animated-gradient {
    background-size: 180% 180%;
    animation: finkGradientShift 14s ease infinite;
}

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease, transform .7s ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}


@keyframes heroGlowOne {

    0% {
        transform:
            translate3d(0, 0, 0)
            scale(0.95);
    }

    50% {
        transform:
            translate3d(170px, 55px, 0)
            scale(1.15);
    }

    100% {
        transform:
            translate3d(290px, 110px, 0)
            scale(1.03);
    }
}


@keyframes heroGlowTwo {

    0% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(-140px, -70px, 0)
            scale(1.16);
    }

    100% {
        transform:
            translate3d(-250px, -110px, 0)
            scale(1.05);
    }
}
@keyframes heroOrbitRotate {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}


.hero-device--laptop {

    animation:
        heroLaptopFloat
        7s
        ease-in-out
        infinite;
}


.hero-phone {

    animation:
        heroPhoneFloat
        6s
        ease-in-out
        infinite;
}


.hero-floating-card {

    animation:
        heroCardFloat
        5s
        ease-in-out
        infinite;
}


.hero-floating-card--shop {

    animation-delay:
        -1.5s;
}


.hero-floating-card--code {

    animation-delay:
        -2.7s;
}


@keyframes heroLaptopFloat {

    0%,
    100% {

        transform:
            perspective(1200px)
            rotateY(-4deg)
            rotateX(2deg)
            translateY(0);

    }

    50% {

        transform:
            perspective(1200px)
            rotateY(-4deg)
            rotateX(2deg)
            translateY(-8px);

    }

}


@keyframes heroPhoneFloat {

    0%,
    100% {

        transform:
            rotate(4deg)
            translateY(0);

    }

    50% {

        transform:
            rotate(4deg)
            translateY(-12px);

    }

}


@keyframes heroCardFloat {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-7px);

    }

}

/* =========================================================
   TECHNOLOGY TRUST MARQUEE
   ========================================================= */

@keyframes techTrustScroll {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}
@keyframes homeServicesGlowOne {
    from {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    to {
        transform:
            translate3d(200px, 80px, 0)
            scale(1.12);
    }
}


@keyframes homeServicesGlowTwo {
    from {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    to {
        transform:
            translate3d(-180px, -90px, 0)
            scale(1.15);
    }
}

/* =========================================================
   PROCESS ANIMATIONS
   ========================================================= */

@keyframes processLineFlow {

    0% {
        transform: scaleX(.08);
        opacity: .55;
    }

    100% {
        transform: scaleX(1);
        opacity: 1;
    }

}


@keyframes journeySignal {

    0% {
        left: -50%;
    }

    100% {
        left: 110%;
    }

}
/* =========================================================
   TECHNOLOGY CORE ANIMATIONS
   ========================================================= */

@keyframes stackOrbitSpin {

    from {
        transform:
            translate(-50%,-50%)
            rotate(0deg);
    }

    to {
        transform:
            translate(-50%,-50%)
            rotate(360deg);
    }

}


@keyframes stackOrbitSpinReverse {

    from {
        transform:
            translate(-50%,-50%)
            rotate(360deg);
    }

    to {
        transform:
            translate(-50%,-50%)
            rotate(0deg);
    }

}


@keyframes stackNodeFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

}

/* =========================================================
   FINAL CTA GLOW
   ========================================================= */

@keyframes finalCtaGlowOne {

    from {
        transform:
            translate3d(0,0,0)
            scale(1);
    }

    to {
        transform:
            translate3d(200px,80px,0)
            scale(1.14);
    }

}


@keyframes finalCtaGlowTwo {

    from {
        transform:
            translate3d(0,0,0)
            scale(1);
    }

    to {
        transform:
            translate3d(-180px,-90px,0)
            scale(1.16);
    }

}