{# Bottom Wave - uses user's theme color, positioned lower #}
<div id="background-wave" class="fixed inset-0 z-[-1] overflow-hidden pointer-events-none">
    <div class="wave">
        <span></span>
        <span></span>
        <span></span>
    </div>
</div>
<style>
#background-wave { background: linear-gradient(180deg, #090A0F 0%, rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.08) 50%, rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.2) 100%); }
#background-wave .wave {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
}
#background-wave .wave span {
    position: absolute;
    width: 325vh;
    height: 325vh;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 94%);
}
#background-wave .wave span:nth-child(1) {
    border-radius: 45%;
    background: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.1);
    animation: bg-wave-animate 10s linear infinite;
}
#background-wave .wave span:nth-child(2) {
    border-radius: 40%;
    background: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.07);
    animation: bg-wave-animate 15s linear infinite;
}
#background-wave .wave span:nth-child(3) {
    border-radius: 42.5%;
    background: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.09);
    animation: bg-wave-animate 20s linear infinite;
}
@keyframes bg-wave-animate {
    0% { transform: translate(-50%, 94%) rotate(0deg); }
    100% { transform: translate(-50%, 94%) rotate(360deg); }
}
</style>