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

@keyframes particleFloat {

    from{
        transform:
        translateY(0);
    }

    to{
        transform:
        translateY(-1200px);
    }
}

@keyframes float {

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

    25% {
        transform:
        translateY(-20px)
        translateX(10px);
    }

    50% {
        transform:
        translateY(-40px)
        translateX(-10px);
    }

    75% {
        transform:
        translateY(-20px)
        translateX(15px);
    }

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

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

.reveal {

    opacity:0;

    transform:
    translateY(60px);

    transition:

    opacity .9s ease,
    transform .9s ease;
}

.reveal.active {

    opacity:1;

    transform:
    translateY(0);
}

/* =====================================
   FADE LEFT
===================================== */

.reveal-left {

    opacity:0;

    transform:
    translateX(-100px);

    transition:
    all .9s ease;
}

.reveal-left.active {

    opacity:1;

    transform:
    translateX(0);
}

/* =====================================
   FADE RIGHT
===================================== */

.reveal-right {

    opacity:0;

    transform:
    translateX(100px);

    transition:
    all .9s ease;
}

.reveal-right.active {

    opacity:1;

    transform:
    translateX(0);
}

/* =====================================
   SCALE
===================================== */

.scale-in {

    opacity:0;

    transform:
    scale(.85);

    transition:
    all .9s ease;
}

.scale-in.active {

    opacity:1;

    transform:
    scale(1);
}

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

.blur-reveal {

    opacity:0;

    filter:blur(20px);

    transform:
    translateY(50px);

    transition:
    all 1s ease;
}

.blur-reveal.active {

    opacity:1;

    filter:blur(0);

    transform:
    translateY(0);
}

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

.hero h1 {

    animation:
    titleReveal 1.5s ease forwards;
}

@keyframes titleReveal {

    from {

        opacity:0;

        transform:
        translateY(80px);

        filter:
        blur(15px);
    }

    to {

        opacity:1;

        transform:
        translateY(0);

        filter:
        blur(0);
    }
}

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

.hero p {

    animation:
    textAppear 1.8s ease forwards;
}

@keyframes textAppear {

    from {

        opacity:0;

        transform:
        translateY(30px);
    }

    to {

        opacity:1;

        transform:
        translateY(0);
    }
}

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

.hero-buttons {

    animation:
    buttonAppear 2s ease forwards;
}

@keyframes buttonAppear {

    from {

        opacity:0;

        transform:
        translateY(40px);
    }

    to {

        opacity:1;

        transform:
        translateY(0);
    }
}

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

@keyframes glowPulse {

    0% {

        box-shadow:
        0 0 10px rgba(255,212,0,.1);
    }

    50% {

        box-shadow:
        0 0 50px rgba(255,212,0,.4);
    }

    100% {

        box-shadow:
        0 0 10px rgba(255,212,0,.1);
    }
}

.btn-primary {

    animation:
    glowPulse 4s infinite;
}

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

@keyframes orbGlow {

    0% {

        filter:
        blur(20px);

        opacity:.7;
    }

    50% {

        filter:
        blur(40px);

        opacity:1;
    }

    100% {

        filter:
        blur(20px);

        opacity:.7;
    }
}

.glass-orb {

    animation:

    float 8s ease-in-out infinite,
    orbGlow 5s ease infinite;
}

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

.service-card::after,
.advantage::after {

    content:"";

    position:absolute;

    top:-100%;

    left:-100%;

    width:300%;

    height:300%;

    background:

    linear-gradient(
    45deg,
    transparent,
    rgba(255,255,255,.05),
    transparent);

    transition:1s;

    pointer-events:none;
}

.service-card:hover::after,
.advantage:hover::after {

    top:100%;
    left:100%;
}

/* =====================================
   STATS COUNTER
===================================== */

@keyframes statReveal {

    from {

        opacity:0;

        transform:
        scale(.8);
    }

    to {

        opacity:1;

        transform:
        scale(1);
    }
}

.stat {

    animation:
    statReveal 1s ease;
}

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

@keyframes ctaFloat {

    0% {
        transform:
        translateY(0);
    }

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

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

.cta-box {

    animation:
    ctaFloat 6s ease-in-out infinite;
}

/* =====================================
   MARQUEE
===================================== */

@keyframes marqueeMove {

    from {

        transform:
        translateX(0);
    }

    to {

        transform:
        translateX(-50%);
    }
}

/* =====================================
   BACKGROUND BLURS
===================================== */

@keyframes blurMove1 {

    0% {

        transform:
        translate(0,0);
    }

    50% {

        transform:
        translate(120px,-60px);
    }

    100% {

        transform:
        translate(0,0);
    }
}

@keyframes blurMove2 {

    0% {

        transform:
        translate(0,0);
    }

    50% {

        transform:
        translate(-120px,80px);
    }

    100% {

        transform:
        translate(0,0);
    }
}

.blur-1 {

    animation:
    blurMove1 18s ease infinite;
}

.blur-2 {

    animation:
    blurMove2 22s ease infinite;
}

.blur-3 {

    animation:
    blurMove1 30s ease infinite;
}

/* =====================================
   CASE IMAGE ZOOM
===================================== */

.case-card img {

    transition:
    transform 1.2s ease;
}

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

@keyframes shimmer {

    0% {

        background-position:
        -200% center;
    }

    100% {

        background-position:
        200% center;
    }
}

.hero-badge {

    background:

    linear-gradient(
    90deg,
    rgba(255,255,255,.05),
    rgba(255,255,255,.15),
    rgba(255,255,255,.05));

    background-size:
    300% 100%;

    animation:
    shimmer 5s linear infinite;
}

/* =====================================
   SPOTLIGHT
===================================== */

@keyframes spotlight {

    0% {

        opacity:.3;
    }

    50% {

        opacity:.8;
    }

    100% {

        opacity:.3;
    }
}

.cursor-glow {

    animation:
    spotlight 4s ease infinite;
}

/* =====================================
   NAVBAR SCROLL
===================================== */

.header.scrolled {

    background:
    rgba(0,0,0,.85);

    backdrop-filter:
    blur(30px);

    box-shadow:
    0 10px 30px rgba(0,0,0,.4);
}

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

.gradient-text {

    background:

    linear-gradient(
    90deg,
    #ffffff,
    #ffd400,
    #ffffff);

    background-size:
    200% auto;

    color:transparent;

    -webkit-background-clip:text;
    background-clip:text;

    animation:
    shimmer 4s linear infinite;
}