(function($) {
    // Nur ausführen, wenn die Body-Klasse vorhanden ist
    if (!$('body').hasClass('festive-birthday')) {
        return;
    }

    const colors = [
        '#e74c3c', '#3498db', '#2ecc71', '#f1c40f', '#e67e22', '#9b59b6', '#1abc9c', '#34495e', '#f39c12', '#d35400',
        '#FFB6C1', '#ADD8E6', '#98FB98', '#F0E68C', '#DDA0DD', '#FFD700', '#C0C0C0'
    ];

    function createBalloon() {
        const size = 60 + Math.random() * 60;
        const duration = 12 + Math.random() * 8;
        const startX = Math.random() * 100;
        const selectedColor = colors[Math.floor(Math.random() * colors.length)];

        // Der SVG-Code für einen Ballon
        const svgCode = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 120" width="' + size + '" height="' + (size * 1.2) + '">' +
            '<path d="M50 10 C70 10, 90 30, 90 55 C90 80, 70 100, 50 100 C30 100, 10 80, 10 55 C10 30, 30 10, 50 10 Z" fill="' + selectedColor + '" stroke="#333" stroke-width="0.5"/>' +
            '<path d="M50 100 L45 110 L55 110 Z" fill="' + selectedColor + '"/>' +
            '<line x1="50" y1="110" x2="50" y2="120" stroke="#333" stroke-width="1"/>' +
            '</svg>';

        // Wir erstellen ein <img>-Element und setzen den SVG-Code als src
        const $balloon = $('<img>').attr('src', 'data:image/svg+xml;base64,' + btoa(svgCode)).css({
            position: 'fixed',
            bottom: '-200px',
            left: startX + '%',
            zIndex: 999999,
            pointerEvents: 'none',
            userSelect: 'none',
            transform: 'translateX(-50%)',
            opacity: 0.9
        });

        $('body').append($balloon);

        $balloon.animate({ bottom: '120vh' }, {
            duration: duration * 1000,
            easing: 'linear',
            complete: function() {
                $(this).remove();
            }
        });
    }

    createBalloon();
    setInterval(createBalloon, 1200);

})(jQuery);