/* ==========================================
   GENESIS ANIMATIONS
========================================== */

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

@keyframes heroFade{

    from{

        opacity:0;

        transform:translateY(50px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@keyframes floatLogo{

    0%{

        transform:
            translateY(0)
            rotate(0deg);

    }

    25%{

        transform:
            translateY(-12px)
            rotate(1deg);

    }

    50%{

        transform:
            translateY(0);

    }

    75%{

        transform:
            translateY(10px)
            rotate(-1deg);

    }

    100%{

        transform:
            translateY(0);

    }

}

/* ===============================
   ROTATING RING
================================ */

@keyframes ring{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

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

@keyframes ambient{

    0%{

        transform:scale(.95);

        opacity:.45;

    }

    50%{

        transform:scale(1.05);

        opacity:.9;

    }

    100%{

        transform:scale(.95);

        opacity:.45;

    }

}

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

@keyframes pulseButton{

    0%{

        box-shadow:
            0 0 0 rgba(255,0,60,0);

    }

    50%{

        box-shadow:
            0 0 35px rgba(255,0,60,.35);

    }

    100%{

        box-shadow:
            0 0 0 rgba(255,0,60,0);

    }

}

/* ===============================
   CARD FLOAT
================================ */

@keyframes cardFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

/* ===============================
   ICON PULSE
================================ */

@keyframes iconPulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.08);

    }

    100%{

        transform:scale(1);

    }

}

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

@keyframes gradientShift{

    0%{

        background-position:0% 50%;

    }

    50%{

        background-position:100% 50%;

    }

    100%{

        background-position:0% 50%;

    }

}

/* ===============================
   SCROLL INDICATOR
================================ */

@keyframes scroll{

    0%{

        transform:translateY(0);

        opacity:1;

    }

    100%{

        transform:translateY(12px);

        opacity:0;

    }

}

/* ===============================
   PARTICLE DRIFT
================================ */

@keyframes particle{

    0%{

        transform:
            translateY(0)
            translateX(0);

        opacity:.2;

    }

    50%{

        opacity:1;

    }

    100%{

        transform:
            translateY(-250px)
            translateX(60px);

        opacity:0;

    }

}

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

.reveal{

    opacity:0;

    transform:translateY(60px);

    transition:

        opacity .9s ease,

        transform .9s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

/* ===============================
   HOVER EFFECTS
================================ */

.service-box:hover{

    animation:cardFloat 2s ease-in-out infinite;

}

.service-box:hover i{

    animation:iconPulse 1s infinite;

}

.stat-card:hover{

    transform:
        translateY(-10px)
        scale(1.03);

}

.hero-logo{

    animation:

        floatLogo 6s ease-in-out infinite;

}

.btn-primary{

    animation:

        pulseButton 3s infinite;

}
/* ==========================================
   REVEAL
========================================== */

.reveal{

    opacity:0;

    transform:translateY(70px);

    transition:

        opacity .9s ease,

        transform .9s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

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

.ripple{

    position:absolute;

    width:12px;

    height:12px;

    border-radius:50%;

    background:rgba(255,255,255,.45);

    transform:translate(-50%,-50%) scale(0);

    animation:ripple .6s linear;

}

@keyframes ripple{

    to{

        transform:translate(-50%,-50%) scale(25);

        opacity:0;

    }

}

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

.mouse-glow{

    position:fixed;

    width:260px;

    height:260px;

    border-radius:50%;

    pointer-events:none;

    background:radial-gradient(

        circle,

        rgba(255,0,70,.15),

        transparent 70%

    );

    transform:translate(-50%,-50%);

    transition:

        left .08s linear,

        top .08s linear;

    z-index:0;

}

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

.hero-logo{

    animation:heroFloat 6s ease-in-out infinite;

}

@keyframes heroFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

}
/* ==========================================
   SCROLL PROGRESS
========================================== */

.scroll-progress{

    position:fixed;

    top:0;

    left:0;

    width:0;

    height:4px;

    z-index:99999;

    background:linear-gradient(
        90deg,
        #ff003c,
        #8c00ff
    );

    box-shadow:

        0 0 20px rgba(255,0,70,.5);

}

/* ==========================================
   PAGE LOAD
========================================== */

body{

    opacity:0;

    transition:opacity .6s ease;

}

body.loaded{

    opacity:1;

}

/* ==========================================
   SMOOTH CARD TRANSITION
========================================== */

.service-box,

.process-card,

.why-card,

.stat-card{

    transform-style:preserve-3d;

    will-change:transform;

}

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

.hero-logo{

    filter:

        drop-shadow(0 0 20px rgba(255,0,70,.30))

        drop-shadow(0 0 40px rgba(140,0,255,.18));

}

/* ==========================================
   ICON ANIMATION
========================================== */

.service-box:hover i,

.process-card:hover i,

.why-card:hover i{

    animation:iconBounce .6s ease;

}

@keyframes iconBounce{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.18) rotate(-8deg);

    }

    100%{

        transform:scale(1);

    }

}