/* =====================================================
   GLOBAL E-COMMERCE AMBIENT BACKGROUND
===================================================== */

body {
    position: relative;
    background: #f8fbf9;
}

/* =====================================================
   MAIN BACKGROUND CONTAINER
===================================================== */

.global-ambient-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;

    background:
        linear-gradient(135deg, rgba(37, 162, 103, 0.015), transparent 35%),
        linear-gradient(315deg, rgba(16, 185, 129, 0.02), transparent 40%);
}

/* =====================================================
   SOFT ORBS
===================================================== */

.ambient-orb {
    position: absolute;
    border-radius: 9999px;
    filter: blur(80px);
    opacity: 0.45;
}

.orb-one {
    width: 420px;
    height: 420px;

    top: -160px;
    right: 5%;

    background: rgba(37, 162, 103, 0.1);

    animation: ambientOrbOne 18s ease-in-out infinite alternate;
}

.orb-two {
    width: 350px;
    height: 350px;

    left: -140px;
    top: 35%;

    background: rgba(59, 130, 246, 0.055);

    animation: ambientOrbTwo 22s ease-in-out infinite alternate;
}

.orb-three {
    width: 300px;
    height: 300px;

    right: 10%;
    bottom: -120px;

    background: rgba(245, 158, 11, 0.045);

    animation: ambientOrbThree 20s ease-in-out infinite alternate;
}

/* =====================================================
   VECTOR RINGS
===================================================== */

.ambient-ring {
    position: absolute;

    border-radius: 50%;

    border: 1px solid rgba(37, 162, 103, 0.055);
}

.ring-one {
    width: 550px;
    height: 550px;

    right: -250px;
    top: 20%;

    border-style: dashed;

    animation: ambientRingRotate 35s linear infinite;
}

.ring-two {
    width: 380px;
    height: 380px;

    left: -190px;
    bottom: 10%;

    border-style: dotted;

    animation: ambientRingRotateReverse 28s linear infinite;
}

/* =====================================================
   PARTICLES
===================================================== */

.ambient-dot {
    position: absolute;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: rgba(37, 162, 103, 0.18);

    animation: ambientParticle 7s ease-in-out infinite;
}

.dot-one {
    left: 18%;
    top: 18%;
}

.dot-two {
    left: 72%;
    top: 30%;

    animation-delay: -2s;
}

.dot-three {
    left: 40%;
    top: 65%;

    animation-delay: -4s;
}

.dot-four {
    right: 12%;
    top: 72%;

    animation-delay: -1s;
}

.dot-five {
    left: 8%;
    bottom: 15%;

    animation-delay: -5s;
}

/* =====================================================
   DIAMONDS
===================================================== */

.ambient-diamond {
    position: absolute;

    width: 8px;
    height: 8px;

    border: 1px solid rgba(37, 162, 103, 0.13);

    transform: rotate(45deg);

    animation: ambientDiamond 8s ease-in-out infinite;
}

.diamond-one {
    right: 28%;
    top: 22%;
}

.diamond-two {
    left: 27%;
    bottom: 20%;

    animation-delay: -3s;
}

/* =====================================================
   ORB ANIMATIONS
===================================================== */

@keyframes ambientOrbOne {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(-50px, 35px, 0) scale(1.08);
    }

    100% {
        transform: translate3d(30px, -25px, 0) scale(0.96);
    }
}

@keyframes ambientOrbTwo {
    0% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(45px, -30px, 0);
    }

    100% {
        transform: translate3d(20px, 40px, 0);
    }
}

@keyframes ambientOrbThree {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    100% {
        transform: translate3d(-40px, -30px, 0) scale(1.12);
    }
}

/* =====================================================
   RING ANIMATION
===================================================== */

@keyframes ambientRingRotate {
    from {
        transform: rotate(0deg);
    }

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

@keyframes ambientRingRotateReverse {
    from {
        transform: rotate(360deg);
    }

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

/* =====================================================
   PARTICLE ANIMATION
===================================================== */

@keyframes ambientParticle {
    0%,
    100% {
        transform: translateY(0) scale(1);

        opacity: 0.25;
    }

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

        opacity: 0.65;
    }
}

/* =====================================================
   DIAMOND ANIMATION
===================================================== */

@keyframes ambientDiamond {
    0%,
    100% {
        transform: translateY(0) rotate(45deg);

        opacity: 0.3;
    }

    50% {
        transform: translateY(-15px) rotate(90deg);

        opacity: 0.7;
    }
}

/* =====================================================
   MOBILE OPTIMIZATION
===================================================== */

@media (max-width: 768px) {
    .ambient-orb {
        filter: blur(65px);
        opacity: 0.3;
    }

    .orb-one {
        width: 280px;
        height: 280px;
    }

    .orb-two {
        width: 240px;
        height: 240px;
    }

    .orb-three {
        width: 220px;
        height: 220px;
    }

    .ring-one {
        width: 350px;
        height: 350px;
        right: -220px;
    }

    .ring-two {
        width: 280px;
        height: 280px;
        left: -180px;
    }
}

/* =====================================================
   REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {
    .ambient-orb,
    .ambient-ring,
    .ambient-dot,
    .ambient-diamond {
        animation: none !important;
    }
}