/* ==========================================
   GLOBAL ANIMATION VARIABLES
========================================== */

:root{

    --ease-premium:
        cubic-bezier(
            0.22,
            1,
            0.36,
            1
        );

    --duration-fast:
        .35s;

    --duration-medium:
        .7s;

    --duration-slow:
        1.2s;
}

/* ==========================================
   FADE ANIMATIONS
========================================== */

@keyframes fadeIn{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }
}

@keyframes fadeUp{

    from{
        opacity:0;
        transform:
            translateY(50px);
    }

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

@keyframes fadeDown{

    from{
        opacity:0;
        transform:
            translateY(-50px);
    }

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

@keyframes fadeLeft{

    from{
        opacity:0;
        transform:
            translateX(-60px);
    }

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

@keyframes fadeRight{

    from{
        opacity:0;
        transform:
            translateX(60px);
    }

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

/* ==========================================
   ZOOM ANIMATIONS
========================================== */

@keyframes zoomIn{

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

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

@keyframes zoomOut{

    from{
        opacity:0;
        transform:
            scale(1.2);
    }

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

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

@keyframes floatSlow{

    0%{
        transform:
            translateY(0);
    }

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

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

@keyframes floatMedium{

    0%{
        transform:
            translateY(0);
    }

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

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

@keyframes floatFast{

    0%{
        transform:
            translateY(0);
    }

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

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

.float-slow{
    animation:
        floatSlow 6s ease-in-out infinite;
}

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

.float-fast{
    animation:
        floatFast 3s ease-in-out infinite;
}

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

@keyframes pulseGlow{

    0%{

        box-shadow:
            0 0 0 rgba(124,58,237,.25),
            0 0 0 rgba(6,182,212,.15);
    }

    50%{

        box-shadow:
            0 0 50px rgba(124,58,237,.35),
            0 0 100px rgba(6,182,212,.15);
    }

    100%{

        box-shadow:
            0 0 0 rgba(124,58,237,.25),
            0 0 0 rgba(6,182,212,.15);
    }
}

.hero-image-wrapper{

    animation:
        pulseGlow 5s ease-in-out infinite;
}

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

@keyframes rotateGradient{

    from{
        transform:
            rotate(0deg);
    }

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

.rotating-gradient{

    position:relative;
}

.rotating-gradient::before{

    content:"";

    position:absolute;

    width:120%;
    height:120%;

    top:-10%;
    left:-10%;

    border-radius:50%;

    background:
        conic-gradient(
            from 0deg,
            var(--primary),
            var(--secondary),
            var(--accent),
            var(--primary)
        );

    filter:
        blur(100px);

    opacity:.2;

    animation:
        rotateGradient 20s linear infinite;

    z-index:-1;
}

/* ==========================================
   PRELOADER
========================================== */

@keyframes loaderSpin{

    from{
        transform:
            rotate(0deg);
    }

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

.loader{

    animation:
        loaderSpin 1s linear infinite;
}

/* ==========================================
   SHIMMER EFFECT
========================================== */

@keyframes shimmer{

    0%{
        transform:
            translateX(-100%);
    }

    100%{
        transform:
            translateX(200%);
    }
}

.shimmer{

    position:relative;
    overflow:hidden;
}

.shimmer::after{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:40%;
    height:100%;

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

    animation:
        shimmer 3s infinite;
}

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

@keyframes ripple{

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

    to{
        transform:
            scale(4);
        opacity:0;
    }
}

.btn{

    position:relative;
    overflow:hidden;
}

/* ==========================================
   BLOB ANIMATIONS
========================================== */

.blob{

    position:absolute;

    border-radius:50%;

    filter:blur(60px);

    opacity:.18;

    pointer-events:none;
}

.blob-1{

    width:300px;
    height:300px;

    top:10%;
    left:-100px;

    background:var(--primary);

    animation:
        blobMove1 12s ease-in-out infinite;
}

.blob-2{

    width:400px;
    height:400px;

    right:-120px;
    bottom:10%;

    background:var(--secondary);

    animation:
        blobMove2 15s ease-in-out infinite;
}

@keyframes blobMove1{

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

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

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

@keyframes blobMove2{

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

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

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

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

.hover-lift{

    transition:
        transform .4s var(--ease-premium),
        box-shadow .4s ease;
}

.hover-lift:hover{

    transform:
        translateY(-12px);

    box-shadow:
        0 25px 60px rgba(0,0,0,.18);
}

/* ==========================================
   CARD TILT EFFECT
========================================== */

.tilt-hover{

    transform-style:
        preserve-3d;

    transition:
        transform .4s ease;
}

.tilt-hover:hover{

    transform:
        perspective(1000px)
        rotateX(4deg)
        rotateY(-4deg);
}

/* ==========================================
   TEXT GRADIENT ANIMATION
========================================== */

@keyframes gradientText{

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

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

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

.animated-gradient-text{

    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--secondary),
            var(--accent),
            var(--primary)
        );

    background-size:
        300% 300%;

    -webkit-text-fill-color:transparent;

    animation:
        gradientText 6s linear infinite;
}

/* ==========================================
   COUNTER POP
========================================== */

@keyframes counterPop{

    0%{
        transform:scale(.8);
    }

    50%{
        transform:scale(1.15);
    }

    100%{
        transform:scale(1);
    }
}

.counter.animate{

    animation:
        counterPop .8s ease;
}

/* ==========================================
   NAVBAR REVEAL
========================================== */

@keyframes navbarSlide{

    from{

        opacity:0;

        transform:
            translateY(-30px);
    }

    to{

        opacity:1;

        transform:
            translateY(0);
    }
}

.header{

    animation:
        navbarSlide .7s ease;
}

/* ==========================================
   IMAGE PARALLAX READY
========================================== */

.parallax{

    transition:
        transform .2s linear;
}

/* ==========================================
   SECTION REVEAL HELPERS
========================================== */

.reveal-delay-1{
    transition-delay:.1s;
}

.reveal-delay-2{
    transition-delay:.2s;
}

.reveal-delay-3{
    transition-delay:.3s;
}

.reveal-delay-4{
    transition-delay:.4s;
}

.reveal-delay-5{
    transition-delay:.5s;
}

/* ==========================================
   SOFT BREATHING EFFECT
========================================== */

@keyframes breathe{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.03);
    }

    100%{
        transform:scale(1);
    }
}

.breathe{

    animation:
        breathe 4s ease-in-out infinite;
}

/* ==========================================
   PREMIUM UNDERLINE
========================================== */

.premium-underline{

    position:relative;
}

.premium-underline::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-8px;

    width:100%;
    height:3px;

    border-radius:20px;

    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--secondary)
        );

    transform:
        scaleX(0);

    transform-origin:left;

    transition:
        transform .4s ease;
}

.premium-underline:hover::after{

    transform:
        scaleX(1);
}

/* ==========================================
   END ANIMATIONS.CSS
========================================== */