/* ===========================================
   Pull Station Animations
=========================================== */

/* ---------- Background Glow ---------- */

.background-glow{

    position:fixed;
    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:-2;

}

.background-glow::before,
.background-glow::after{

    content:"";

    position:absolute;

    width:700px;
    height:700px;

    border-radius:50%;

    filter:blur(140px);

    opacity:.22;

}

.background-glow::before{

    background:#4F8CFF;

    top:-250px;
    left:-250px;

    animation:driftBlue 22s ease-in-out infinite;

}

.background-glow::after{

    background:#7C3AED;

    bottom:-250px;
    right:-250px;

    animation:driftPurple 26s ease-in-out infinite;

}

/* ---------- Floating Hero Cards ---------- */

.card1{

    animation:
        floatOne 7s ease-in-out infinite;

}

.card2{

    animation:
        floatTwo 8.5s ease-in-out infinite;

}

.card3{

    animation:
        floatThree 9s ease-in-out infinite;

}

/* ---------- Fade In ---------- */

.fade{

    opacity:0;

    transform:translateY(60px);

    transition:

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

}

.fade.show{

    opacity:1;

    transform:translateY(0);

}

/* ---------- Scale ---------- */

.scale{

    transform:scale(.9);

    opacity:0;

    transition:all .8s ease;

}

.scale.show{

    transform:scale(1);

    opacity:1;

}

/* ---------- Slide Left ---------- */

.slide-left{

    opacity:0;

    transform:translateX(-80px);

    transition:all .9s ease;

}

.slide-left.show{

    opacity:1;

    transform:none;

}

/* ---------- Slide Right ---------- */

.slide-right{

    opacity:0;

    transform:translateX(80px);

    transition:all .9s ease;

}

.slide-right.show{

    opacity:1;

    transform:none;

}

/* ---------- Navbar ---------- */

header.scrolled{

    background:rgba(8,11,20,.88);

    backdrop-filter:blur(22px);

    transition:.35s;

    box-shadow:

        0 12px 40px rgba(0,0,0,.35);

}

/* ---------- Buttons ---------- */

.btn{

    position:relative;

    overflow:hidden;

}

.btn::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:120%;
    height:100%;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.25),
            transparent
        );

}

.btn:hover::before{

    left:120%;

    transition:.7s;

}

/* ---------- Product Hover ---------- */

.product-card{

    position:relative;

    overflow:hidden;

}

.product-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(

            circle at top,

            rgba(79,140,255,.18),

            transparent 65%

        );

    opacity:0;

    transition:.35s;

}

.product-card:hover::after{

    opacity:1;

}

/* ---------- Feature Hover ---------- */

.feature::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    background:

        linear-gradient(

            120deg,

            transparent,

            rgba(255,255,255,.08),

            transparent

        );

    opacity:0;

    transition:.4s;

}

.feature{

    position:relative;

    overflow:hidden;

}

.feature:hover::before{

    opacity:1;

}

/* ---------- Counter ---------- */

.counter{

    transition:.3s;

}

.counter:hover{

    transform:scale(1.08);

}

/* ---------- Footer ---------- */

.footer-logo img{

    animation:

        pulseLogo 4s infinite ease-in-out;

}

/* ---------- Scroll Indicator ---------- */

.progress-bar{

    position:fixed;

    top:0;
    left:0;

    height:4px;

    width:0%;

    background:

        linear-gradient(

            90deg,

            #4F8CFF,

            #7C3AED

        );

    z-index:99999;

}

/* ---------- Keyframes ---------- */

@keyframes floatOne{

    0%{

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

    }

    50%{

        transform:
            translateY(-25px)
            rotate(-4deg);

    }

    100%{

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

    }

}

@keyframes floatTwo{

    0%{

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

    }

    50%{

        transform:
            translateY(-35px)
            rotate(4deg);

    }

    100%{

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

    }

}

@keyframes floatThree{

    0%{

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

    }

    50%{

        transform:
            translateY(-30px)
            rotate(0deg);

    }

    100%{

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

    }

}

@keyframes pulseLogo{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.05);

    }

    100%{

        transform:scale(1);

    }

}

@keyframes driftBlue{

    0%{

        transform:
            translate(0,0);

    }

    50%{

        transform:
            translate(120px,70px);

    }

    100%{

        transform:
            translate(0,0);

    }

}

@keyframes driftPurple{

    0%{

        transform:
            translate(0,0);

    }

    50%{

        transform:
            translate(-140px,-60px);

    }

    100%{

        transform:
            translate(0,0);

    }

}