:root {
--green-light:#EAF5DD;
--green-mid:#8fc85f;
--green-deep:#6f9e46;
--maroon-soft:#774b54;
--bg-bot:#e7e9e4;

}


#float-animation{
    position:relative;
    overflow:hidden;
    background:linear-gradient(180deg,var(--bg-top) 0%, var(--bg-bot) 100%);
}

.float-dot{
    position:absolute;
    border-radius:50%;
    background:var(--green);
    z-index:0;
    animation:floatDot 4s ease-in-out infinite;
}

.float-dot.dark{
    background:var(--green-light);
    opacity:0.1;
}

.float-dot.mid{
    background:var(--green-deep);
}

.float-dot.pulse{
    animation:pulseDot 2.6s ease-in-out infinite;
}

.float-dot.spin{
    animation:spinDot 6s linear infinite;
    pointer-events:none;
}


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

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


@keyframes pulseDot{
    0%,100%{
        transform:scale(1);
        opacity:0.7;
    }

    50%{
        transform:scale(1.4);
        opacity:1;
    }
}


@keyframes spinDot{
    0%{
        transform:rotate(0deg) translateX(10px) rotate(0deg);
    }

    100%{
        transform:rotate(360deg) translateX(10px) rotate(-360deg);
    }
}



.plus{
    position:absolute;
    color:var(--green-deep);
    font-size:28px;
    font-weight:800;
    z-index:0;
    animation:floatPlus 3.4s ease-in-out infinite;
    pointer-events:none;
}


.plus.spin{
    animation:spinPlus 5s linear infinite;
    color:var(--green-mid);
}


.plus.pop{
    animation:popPlus 2.2s ease-in-out infinite;
}


@keyframes floatPlus{

    0%,100%{
        transform:translateY(0) rotate(0deg);
        opacity:0.85;
    }

    50%{
        transform:translateY(-10px) rotate(12deg);
        opacity:1;
    }
}


@keyframes spinPlus{

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

    100%{
        transform:rotate(360deg);
    }
}


@keyframes popPlus{

    0%,100%{
        transform:scale(1);
        opacity:0.7;
    }

    50%{
        transform:scale(1.3);
        opacity:1;
    }
}


@media (prefers-reduced-motion: reduce){

    .float-dot,
    .plus{
        animation:none;
    }

}