/* ===========================
   Result animation
=========================== */

#result {

    opacity: 0;

    transform: translateY(40px) scale(.96);

    filter: blur(8px);

    pointer-events: none;

    transition: opacity .45s ease,
    transform .55s cubic-bezier(.22, 1, .36, 1),
    filter .45s ease;

}

#result.show {

    opacity: 1;

    transform: translateY(0) scale(1);

    filter: blur(0);

    pointer-events: auto;

}

/* ===========================
   Success check bounce
=========================== */

.success-check {

    animation: successBounce .8s ease;

}

@keyframes successBounce {

    0% {

        transform: scale(.4) rotate(-25deg);

        opacity: 0;

    }

    50% {

        transform: scale(1.2);

    }

    75% {

        transform: scale(.92);

    }

    100% {

        transform: scale(1);

        opacity: 1;

    }

}

/* ===========================
   CID glow
=========================== */

.cid-glow {

    animation: cidGlow .9s ease;

}

@keyframes cidGlow {

    0% {

        box-shadow: 0 0 0 rgba(16, 185, 129, 0);
        transform: scale(.98);

    }

    35% {

        box-shadow: 0 0 20px rgba(16, 185, 129, .45),
        0 0 45px rgba(16, 185, 129, .25);

        transform: scale(1.01);

    }

    100% {

        box-shadow: 0 0 0 rgba(16, 185, 129, 0);
        transform: scale(1);

    }

}

.gradient-button {

    background: linear-gradient(
            120deg,
            #2563eb,
            #06b6d4,
            #3b82f6,
            #0891b2,
            #2563eb
    );

    background-size: 300% 300%;

    animation: gradientMove 7s ease infinite;
    position: relative;
    overflow: hidden;

}

.gradient-button::before {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(
            110deg,
            transparent,
            rgba(255, 255, 255, .35),
            transparent
    );

    transform: translateX(-120%);

}

.gradient-button:hover::before {

    animation: shine .8s ease;

}

@keyframes shine {

    to {
        transform: translateX(120%);
    }

}

@keyframes gradientMove {

    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }

}

@keyframes gradientMove {

    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }

}

@keyframes gradientMove {

    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }

}