// Version 3: Balanced - chaotic bursts with organic flow
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
    // Burst outward
    .add('.part', {
        translateX: anime.stagger('-.15rem', { grid: grid, from: 'center', axis: 'x' }),
        translateY: anime.stagger('-.15rem', { grid: grid, from: 'center', axis: 'y' }),
        scale: 0.5,
        duration: 300,
        easing: 'easeOutQuad',
        delay: anime.stagger(60, { grid: grid, from: 'center' })
    }, 0)
    // Spring outward further with randomness
    .add('.part', {
        translateX: (el, i) => anime.utils.random(-8, 8),
        translateY: (el, i) => anime.utils.random(-8, 8),
        scale: (el) => anime.utils.random(0.7, 1.2),
        rotate: (el) => anime.utils.random(-90, 90),
        duration: 600,
        easing: 'easeOutQuad',
        delay: anime.stagger(100, { grid: grid, from: 'center' })
    })
    // Floating phase - organic motion
    .add('.part', {
        translateY: (el, i) => anime.utils.random(-4, 4),
        rotate: (el, i) => anime.utils.random(-45, 45),
        duration: 1400,
        easing: 'easeInOutSine',
        delay: (el, i) => i * 25 + anime.utils.random(-150, 150)
    })
    // Swirl inward
    .add('.part', {
        translateX: (el, i) => anime.utils.random(-10, 10),
        translateY: (el, i) => anime.utils.random(-10, 10),
        rotate: (el) => anime.utils.random(-180, 180),
        duration: 800,
        easing: 'easeInOutQuad',
        delay: anime.stagger(40, { grid: grid, from: 'center' })
    })
    // Converge smoothly
    .add('.part', {
        translateX: 0,
        translateY: 0,
        rotate: (el) => anime.utils.random(0, 360),
        scale: 1,
        duration: 1000,
        easing: 'easeOutExpo',
        delay: anime.stagger(50, { grid: grid, from: 'center' })
    });

staggersAnimation.play();
