document.addEventListener('DOMContentLoaded', function() {
    // Set random animation variables for each blob
    const blobs = document.querySelectorAll('.blob');
    blobs.forEach(blob => {
        // Generate random values for translation and rotation
        const tx = (Math.random() - 0.5) * 200;
        const ty = (Math.random() - 0.5) * 200;
        const r = (Math.random() - 0.5) * 360;
        
        // Set CSS variables for the float animation
        blob.style.setProperty('--tx', `${tx}px`);
        blob.style.setProperty('--ty', `${ty}px`);
        blob.style.setProperty('--r', `${r}deg`);
    });

    // Mouse move interaction
    document.addEventListener('mousemove', (e) => {
        const x = e.clientX / window.innerWidth;
        const y = e.clientY / window.innerHeight;
        
        blobs.forEach((blob, index) => {
            // Apply slight movement based on mouse position
            const moveX = (x - 0.5) * (index + 1) * 10;
            const moveY = (y - 0.5) * (index + 1) * 10;
            
            // Add unique movement to each blob
            blob.style.transform = `translate(${moveX}px, ${moveY}px)`;
        });
    });
    
    // Touch move interaction for mobile
    document.addEventListener('touchmove', (e) => {
        const touch = e.touches[0];
        const x = touch.clientX / window.innerWidth;
        const y = touch.clientY / window.innerHeight;
        
        blobs.forEach((blob, index) => {
            const moveX = (x - 0.5) * (index + 1) * 5;
            const moveY = (y - 0.5) * (index + 1) * 5;
            blob.style.transform = `translate(${moveX}px, ${moveY}px)`;
        });
    });
    
    // Reset transform when mouse leaves
    document.addEventListener('mouseleave', () => {
        blobs.forEach(blob => {
            blob.style.transform = '';
        });
    });
});