/* =====================================================
   KORVA ANIMATIONS
===================================================== */


/* HERO */

@keyframes heroFadeUp {

    from {

        opacity: 0;

        transform:
            translateY(35px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


.hero-eyebrow {

    animation:
        heroFadeUp .8s ease both;

}


.hero-title {

    animation:
        heroFadeUp .9s .1s ease both;

}


.hero-description {

    animation:
        heroFadeUp .9s .2s ease both;

}


.hero-buttons {

    animation:
        heroFadeUp .9s .3s ease both;

}


/* ORBITS */

@keyframes orbitSpin {

    from {

        transform:
            rotate(0deg);

    }

    to {

        transform:
            rotate(360deg);

    }

}


.orbit-one {

    animation:
        orbitSpin 50s linear infinite;

}


.orbit-two {

    animation:
        orbitSpin 80s linear infinite reverse;

}


/* STATUS DOT */

@keyframes pulse {

    0%,
    100% {

        opacity: 1;

        transform:
            scale(1);

    }

    50% {

        opacity: .5;

        transform:
            scale(.7);

    }

}


.status-dot,
.ai-badge-dot {

    animation:
        pulse 2s ease-in-out infinite;

}


/* RELEASE GLOW */

@keyframes releasePulse {

    0%,
    100% {

        transform:
            scale(1);

        opacity: .6;

    }

    50% {

        transform:
            scale(1.15);

        opacity: 1;

    }

}


.release-pulse {

    animation:
        releasePulse 5s ease-in-out infinite;

}


/* AI GLOW */

@keyframes aiGlow {

    0%,
    100% {

        box-shadow:
            0 0 20px
            rgba(124,92,255,.15);

    }

    50% {

        box-shadow:
            0 0 60px
            rgba(124,92,255,.3);

    }

}


.ai-demo {

    animation:
        aiGlow 5s ease-in-out infinite;

}


/* BUTTON ARROW */

.button span {

    transition:
        transform .25s ease;

}


.button:hover span {

    transform:
        translateX(4px);

}


/* ARTICLE HOVER */

.article-image {

    transition:
        transform .5s ease;

}


.article-card:hover
.article-image {

    transform:
        scale(1.04);

}


/* SCROLL */

@keyframes scrollBounce {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(7px);

    }

}


.hero-scroll span:last-child {

    animation:
        scrollBounce 1.8s ease-in-out infinite;

}


/* REDUCED MOTION */

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

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

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

        scroll-behavior:
            auto !important;

    }

}

/* =====================================================
   CLICK EXPLOSION
===================================================== */

.click-effect {

    position: fixed;

    left: 0;

    top: 0;

    width: 10px;

    height: 10px;

    border:
        2px solid
        #7c5cff;

    border-radius: 50%;

    pointer-events: none;

    z-index: 99999;

    transform:
        translate(-50%, -50%);

    animation:
        clickExplosion
        .65s
        cubic-bezier(.2,.8,.2,1)
        forwards;

}


@keyframes clickExplosion {

    0% {

        width: 8px;

        height: 8px;

        opacity: 1;

        box-shadow:
            0 0 0
            rgba(124,92,255,0);

    }


    45% {

        opacity: .9;

        box-shadow:
            0 0 25px
            rgba(124,92,255,.55);

    }


    100% {

        width: 120px;

        height: 120px;

        opacity: 0;

        box-shadow:
            0 0 60px
            rgba(124,92,255,0);

    }

}