/*====================================================
    PREMIUM ANIMATIONS
====================================================*/

/* Floating Background Circles */

.hero::before {
    animation: heroGlow1 14s ease-in-out infinite alternate;
}

.hero::after {
    animation: heroGlow2 18s ease-in-out infinite alternate;
}

@keyframes heroGlow1 {

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

    50% {
        transform: translate(80px, -40px) scale(1.15);
    }

    100% {
        transform: translate(-40px, 40px) scale(.9);
    }

}

@keyframes heroGlow2 {

    0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(-70px, 50px);
    }

    100% {
        transform: translate(40px, -20px);
    }

}

/*====================================================
    CARD HOVER
====================================================*/

.card {

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

}

.card:hover {

    transform:
        translateY(-15px) rotateX(3deg);

}

.card .icon {

    transition: .45s;

}

.card:hover .icon {

    transform:
        scale(1.15) rotate(8deg);

}

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

.btn-primary,
.btn-outline {

    position: relative;

    overflow: hidden;

}

.btn-primary::before,
.btn-outline::before {

    content: '';

    position: absolute;

    top: 0;

    left: -120%;

    width: 70%;

    height: 100%;

    background:
        linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, .45),
            transparent);

}

.btn-primary:hover::before,
.btn-outline:hover::before {

    left: 150%;

    transition: 1s;

}

/*====================================================
    ICON FLOAT
====================================================*/

.icon {

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

}

@keyframes iconFloat {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-8px);

    }

    100% {

        transform: translateY(0);

    }

}

/*====================================================
    HERO TEXT
====================================================*/

.hero-content {

    animation: fadeUp 1s ease;

}

@keyframes fadeUp {

    from {

        opacity: 0;

        transform: translateY(40px);

    }

    to {

        opacity: 1;

        transform: none;

    }

}