// Version 2: Fluid and organic with floating effect
const staggerVisualizerEl = document.querySelector('.stagger-visualizer');
const fragment = document.createDocumentFragment();
const grid = [12, 6];
const col = grid[0];
const row = grid[1];
const numberOfElements = col * row;

for (let i = 0; i < numberOfElements; i++) {
    let div = document.createElement('div');
    div.className = 'part';
    div.dataset.index = i;
    fragment.appendChild(div);
}

staggerVisualizerEl.appendChild(fragment);

const staggersAnimation = anime.createTimeline({
    easing: 'easeInOutSine',
    loop: true,
    autoplay: false
});

staggersAnimation
    // Initial expansion with gentle stagger
    .add('.part', {
        translateX: anime.stagger((el, i) => anime.utils.random(-6, 6), { grid: grid, from: 'center', axis: 'x' }),
        translateY: anime.stagger((el, i) => anime.utils.random(-6, 6), { grid: grid, from: 'center', axis: 'y' }),
        scale: anime.stagger([0.7, 1.1], { grid: grid, from: 'center' }),
        duration: 1000,
        easing: 'easeOutElastic',
        delay: anime.stagger(50, { grid: grid, from: 'center' })
    }, 0)
    // Floating wave motion
    .add('.part', {
        translateY: (el, i) => anime.utils.random(-5, 5),
        rotate: (el) => anime.utils.random(-30, 30),
        opacity: [(el) => anime.utils.random(0.6, 0.8), 1],
        duration: 2000,
        easing: 'easeInOutSine',
        delay: (el, i) => i * 30 + anime.utils.random(0, 300)
    }, '-=500')
    // Gentle compression and expansion
    .add('.part', {
        scaleX: (el) => anime.utils.random(0.9, 1.05),
        scaleY: (el) => anime.utils.random(0.9, 1.05),
        duration: 1200,
        easing: 'easeInOutSine',
        delay: anime.stagger(40, { grid: grid, from: 'center' })
    }, '-=1000')
    // Slow drift
    .add('.part', {
        translateX: (el) => anime.utils.random(-3, 3),
        translateY: (el) => anime.utils.random(-3, 3),
        rotate: (el, i) => i % 2 === 0 ? 8 : -8,
        duration: 1500,
        easing: 'easeInOutQuad',
        delay: (el, i) => i * 25
    })
    // Return to rest gently
    .add('.part', {
        translateX: 0,
        translateY: 0,
        rotate: 0,
        scale: 1,
        opacity: 1,
        duration: 1500,
        easing: 'easeInOutQuad',
        delay: anime.stagger(35, { grid: grid, from: 'center' })
    });

staggersAnimation.play();
