/* =====================================================
   SPEED TECH — PREMIUM MOTION PACK
   ===================================================== */

/* ---------- Animated Background ---------- */

body::before {
    content: "";
    position: fixed;
    inset: -20%;
    z-index: -2;
    pointer-events: none;

    background:
        radial-gradient(
            circle at 20% 30%,
            rgba(37, 244, 238, .08),
            transparent 25%
        ),
        radial-gradient(
            circle at 80% 70%,
            rgba(254, 44, 85, .08),
            transparent 25%
        );

    animation: premiumBackground 14s ease-in-out infinite alternate;
}

@keyframes premiumBackground {
    0% {
        transform: translate3d(-2%, -1%, 0) scale(1);
    }

    100% {
        transform: translate3d(2%, 1%, 0) scale(1.08);
    }
}


/* ---------- Page Entrance ---------- */

body {
    animation: premiumPageIn .7s ease both;
}

@keyframes premiumPageIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/* ---------- Hero ---------- */

.hero-grid > div:first-child {
    animation: premiumHeroText .9s cubic-bezier(.2,.8,.2,1) both;
}

.hero-card {
    animation:
        premiumHeroCard .9s .15s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes premiumHeroText {
    from {
        opacity: 0;
        transform: translateX(35px);
    }

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

@keyframes premiumHeroCard {
    from {
        opacity: 0;
        transform: translateX(-35px) scale(.96);
    }

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


/* ---------- Floating Coin ---------- */

.coin {
    animation:
        premiumCoinFloat 4s ease-in-out infinite,
        premiumCoinGlow 2.5s ease-in-out infinite alternate;
}

@keyframes premiumCoinFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }

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

@keyframes premiumCoinGlow {
    from {
        box-shadow:
            0 0 0 10px rgba(37,244,238,.06),
            0 0 50px rgba(37,244,238,.12);
    }

    to {
        box-shadow:
            0 0 0 16px rgba(37,244,238,.04),
            0 0 90px rgba(37,244,238,.28);
    }
}


/* ---------- Floating Labels ---------- */

.float {
    animation: premiumFloat 3.5s ease-in-out infinite;
}

.float.two {
    animation-delay: -.8s;
}

.float.three {
    animation-delay: -1.6s;
}

@keyframes premiumFloat {
    0%, 100% {
        transform: translateY(0);
    }

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


/* ---------- Premium Cards ---------- */

.card,
.package,
.payment,
.contact,
.hero-card {
    position: relative;
    overflow: hidden;
}

.card::after,
.package::after,
.payment::after,
.contact::after,
.hero-card::after {
    content: "";
    position: absolute;

    width: 180px;
    height: 180px;

    top: -100px;
    right: -100px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(37,244,238,.10),
            transparent 70%
        );

    pointer-events: none;

    transition:
        transform .5s ease,
        opacity .5s ease;
}

.card:hover::after,
.package:hover::after,
.payment:hover::after,
.contact:hover::after,
.hero-card:hover::after {
    transform: scale(1.7);
}


/* ---------- Card Hover ---------- */

.card,
.package,
.payment,
.contact {
    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        border-color .35s ease,
        box-shadow .35s ease;
}

.card:hover,
.package:hover,
.payment:hover,
.contact:hover {
    transform: translateY(-7px);

    border-color:
        rgba(37,244,238,.25);

    box-shadow:
        0 18px 50px rgba(0,0,0,.25),
        0 0 30px rgba(37,244,238,.04);
}


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

.btn {
    position: relative;
    overflow: hidden;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.btn::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 80%;
    height: 100%;

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

    transform: skewX(-20deg);

    transition: left .55s ease;

    pointer-events: none;
}

.btn:hover::before {
    left: 140%;
}

.btn:hover {
    transform: translateY(-3px) scale(1.015);

    box-shadow:
        0 12px 35px rgba(0,0,0,.25);
}


/* ---------- WhatsApp Pulse ---------- */

.float-whatsapp {
    animation:
        premiumWhatsAppPulse 2.2s ease-in-out infinite;
}

@keyframes premiumWhatsAppPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow:
            0 12px 35px rgba(0,0,0,.5);
    }

    50% {
        transform: scale(1.08);
        box-shadow:
            0 12px 45px rgba(32,214,107,.22);
    }
}


/* ---------- Logo ---------- */

.logo-mark {
    animation: premiumLogoGlow 3s ease-in-out infinite alternate;
}

@keyframes premiumLogoGlow {
    from {
        box-shadow:
            0 0 20px rgba(37,244,238,.12);
    }

    to {
        box-shadow:
            0 0 38px rgba(37,244,238,.28);
    }
}


/* ---------- Gradient Text ---------- */

.gradient {
    background-size: 200% auto;

    animation:
        premiumGradient 5s linear infinite;
}

@keyframes premiumGradient {
    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 200% center;
    }
}


/* ---------- Badge ---------- */

.badge {
    animation:
        premiumBadgeGlow 2.5s ease-in-out infinite alternate;
}

@keyframes premiumBadgeGlow {
    from {
        box-shadow:
            0 0 0 rgba(37,244,238,0);
    }

    to {
        box-shadow:
            0 0 25px rgba(37,244,238,.08);
    }
}


/* ---------- Scroll Reveal ---------- */

.premium-reveal {
    opacity: 0;

    transform:
        translateY(35px);

    transition:
        opacity .75s ease,
        transform .75s cubic-bezier(.2,.8,.2,1);
}

.premium-reveal.premium-visible {
    opacity: 1;

    transform:
        translateY(0);
}


/* ---------- Mouse Glow ---------- */

.premium-mouse-glow {
    position: fixed;

    width: 260px;
    height: 260px;

    left: 0;
    top: 0;

    border-radius: 50%;

    pointer-events: none;

    z-index: 9998;

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

    background:
        radial-gradient(
            circle,
            rgba(37,244,238,.08) 0%,
            rgba(37,244,238,.025) 35%,
            transparent 70%
        );

    filter: blur(18px);

    opacity: 0;

    transition:
        opacity .3s ease;
}

body.premium-mouse-active
.premium-mouse-glow {
    opacity: 1;
}


/* ---------- Selection ---------- */

::selection {
    background: rgba(37,244,238,.25);
    color: #fff;
}


/* ---------- Mobile ---------- */

@media (max-width: 768px) {

    .premium-mouse-glow {
        display: none;
    }

    .card:hover,
    .package:hover,
    .payment:hover,
    .contact:hover {
        transform: translateY(-3px);
    }

}