/* =====================================================
   PEMEXA WORLDWIDE
   ANIMATIONS.CSS
===================================================== */

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

@keyframes heroFadeUp {

    from {

        opacity:0;
        transform:translateY(40px);

    }

    to {

        opacity:1;
        transform:translateY(0);

    }

}

.hero-badge{

    animation:heroFadeUp .8s ease forwards;

}

.hero h1{

    animation:heroFadeUp 1s ease forwards;

}

.hero p{

    animation:heroFadeUp 1.2s ease forwards;

}

.hero-actions{

    animation:heroFadeUp 1.4s ease forwards;

}

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

@keyframes floatGlow {

    0%{

        transform:
            translateY(0)
            translateX(0);

    }

    25%{

        transform:
            translateY(-30px)
            translateX(15px);

    }

    50%{

        transform:
            translateY(10px)
            translateX(-15px);

    }

    75%{

        transform:
            translateY(-15px)
            translateX(20px);

    }

    100%{

        transform:
            translateY(0)
            translateX(0);

    }

}

.glow-1{

    animation:
        floatGlow 12s ease-in-out infinite;

}

.glow-2{

    animation:
        floatGlow 16s ease-in-out infinite;

}

.glow-3{

    animation:
        floatGlow 20s ease-in-out infinite;

}

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

@keyframes cardLift {

    from{

        transform:
            translateY(0);

    }

    to{

        transform:
            translateY(-8px);

    }

}

/* =====================================================
   GOLD SHIMMER
===================================================== */

@keyframes shimmer {

    0%{

        background-position:
            -400px 0;

    }

    100%{

        background-position:
            400px 0;

    }

}

.hero-badge{

    position:relative;

    overflow:hidden;

}

.hero-badge::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.15),
            transparent
        );

    background-size:400px 100%;

    animation:
        shimmer 6s linear infinite;

}

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

@keyframes pulseGlow {

    0%{

        box-shadow:
            0 0 0 rgba(0,87,184,.4);

    }

    50%{

        box-shadow:
            0 0 30px rgba(0,87,184,.45);

    }

    100%{

        box-shadow:
            0 0 0 rgba(0,87,184,.4);

    }

}

.btn-primary{

    animation:
        pulseGlow 4s infinite;

}

/* =====================================================
   STAT COUNTERS
===================================================== */

@keyframes statAppear {

    from{

        opacity:0;

        transform:
            translateY(25px);

    }

    to{

        opacity:1;

        transform:
            translateY(0);

    }

}

.stat-card{

    animation:
        statAppear .8s ease forwards;

}

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

.feature-card,
.quick-card{

    position:relative;

    overflow:hidden;

}

.feature-card::before,
.quick-card::before{

    content:"";

    position:absolute;

    top:-120%;

    left:-120%;

    width:250%;

    height:250%;

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

    transition:.8s;

}

.feature-card:hover::before,
.quick-card:hover::before{

    top:-30%;
    left:-30%;

}

/* =====================================================
   NAV LINK GLOW
===================================================== */

.nav-links a:hover{

    text-shadow:
        0 0 10px rgba(255,255,255,.6);

}

/* =====================================================
   SCROLL REVEAL
===================================================== */

.reveal{

    opacity:0;

    transform:
        translateY(40px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

.reveal.active{

    opacity:1;

    transform:
        translateY(0);

}

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

@keyframes borderGlow {

    0%{

        border-color:
            rgba(243,182,31,.15);

    }

    50%{

        border-color:
            rgba(243,182,31,.7);

    }

    100%{

        border-color:
            rgba(243,182,31,.15);

    }

}

.quick-card:hover,
.feature-card:hover{

    animation:
        borderGlow 2s infinite;

}

/* =====================================================
   FOOTER LINKS
===================================================== */

.footer a{

    position:relative;

}

.footer a::after{

    content:"";

    position:absolute;

    bottom:-2px;

    left:0;

    width:0;

    height:1px;

    background:white;

    transition:.3s;

}

.footer a:hover::after{

    width:100%;

}