/* =========================
   ANIMAÇÕES GLOBAIS
========================= */

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

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

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

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 107, 53, .5);
    }

    70% {
        box-shadow: 0 0 0 20px rgba(255, 107, 53, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 107, 53, 0);
    }
}

@keyframes gradientMove {
    0% {
        background-position: 0%;
    }

    50% {
        background-position: 100%;
    }

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

@keyframes rotateSlow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* =========================
   CLASSES UTILITÁRIAS
========================= */

.fade-up {
    animation: fadeUp .8s ease forwards;
}

.fade-left {
    animation: fadeLeft .8s ease forwards;
}

.fade-right {
    animation: fadeRight .8s ease forwards;
}

.zoom-in {
    animation: zoomIn .8s ease forwards;
}

.float {
    animation: float 4s ease-in-out infinite;
}

.pulse {
    animation: pulse 2s infinite;
}

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

.hero-content {
    animation: fadeLeft 1s ease;
}

.hero-image {
    animation:
        fadeRight 1s ease,
        float 5s ease-in-out infinite;
}

/* =========================
   BOTÕES
========================= */

.btn-primary,
.btn-secondary {
    transition: .3s;
}

.btn-primary:hover,
.btn-secondary:hover {
    transform: translateY(-3px);
}

/* =========================
   CARDS
========================= */

.feature-card,
.plan-card,
.stat-card {
    transition: .35s;
}

.feature-card:hover,
.plan-card:hover,
.stat-card:hover {
    transform: translateY(-10px);
}

/* =========================
   CTA
========================= */

.cta {
    background-size: 300% 300%;
    animation: gradientMove 8s ease infinite;
}

/* =========================
   DASHBOARD MOCKUP
========================= */

.dashboard-preview img {
    animation:
        zoomIn 1s ease,
        float 6s ease-in-out infinite;
}

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

.logo-icon {
    animation: rotateSlow 20s linear infinite;
}

/* =========================
   FADE UP
========================= */

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-up {
    animation: fadeUp 0.8s ease forwards;
}


/* =========================
   FADE IN
========================= */

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn 1s ease forwards;
}


/* =========================
   ZOOM IN
========================= */

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.zoom-in {
    animation: zoomIn .8s ease forwards;
}


/* =========================
   FLOATING
========================= */

@keyframes floating {
    0% {
        transform: translateY(0px);
    }

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

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

.floating {
    animation: floating 4s ease-in-out infinite;
}


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

@keyframes glow {
    0% {
        box-shadow: 0 0 0 rgba(37,99,235,0);
    }

    50% {
        box-shadow: 0 0 35px rgba(37,99,235,.4);
    }

    100% {
        box-shadow: 0 0 0 rgba(37,99,235,0);
    }
}

.glow {
    animation: glow 3s infinite;
}


/* =========================
   GRADIENT
========================= */

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

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

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

.gradient-animated {
    background-size: 300% 300%;
    animation: gradientMove 8s ease infinite;
}


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

.btn-animate {
    transition: all .3s ease;
}

.btn-animate:hover {
    transform: translateY(-4px);
}


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

.card-animate {
    transition: .4s;
}

.card-animate:hover {
    transform: translateY(-10px);
}


/* =========================
   DELAYS
========================= */

.delay-1 {
    animation-delay: .2s;
}

.delay-2 {
    animation-delay: .4s;
}

.delay-3 {
    animation-delay: .6s;
}

.delay-4 {
    animation-delay: .8s;
}