const b = (id) => `
            <div
                id="${id}"
                class="confetti"
                style="left: ${Math.random() * 1000}px"
            >
                🎈
            </div>
        `;
const s = (id) => `
            <div
                id="${id}"
                class="confetti"
                style="left: ${Math.random() * 1000}px"
            >
                🧽
            </div>
        `;
const m = document.getElementById('interactive-menu');
function balloons() { confetti(b) };
function sponges() { confetti(s) };

function confetti(f) {
    const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
    for (let i = 0; i < 3; i++) {
        const id = `c-${String(Math.random()).slice(2, 9)}`
        m.insertAdjacentHTML('beforeend', f(id))
        sink(id)
    }
    async function sink(id) {
        const e = document.getElementById(id);
        const startTop = getComputedStyle(e)?.top ?? '0px';
        let top = parseInt(startTop.slice(0, startTop.indexOf('p')), 10);
        while (top < vh + 100) {
            top = top + 2;
            e.style.top = `${top}px`;
            await new Promise(r => setTimeout(r, 16.67));
        }
        e.remove();
    }
}