// Version 1: More random and chaotic
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
    // Chaotic burst outward with per-element randomness
    .add('.part', {
        translateX: (el) => anime.utils.random(-15, 15),
        translateY: (el) => anime.utils.random(-15, 15),
        rotate: (el) => anime.utils.random(-180, 180),
        scale: (el) => anime.utils.random(0.3, 0.8),
        duration: 800,
        easing: 'easeOutQuad',
        delay: anime.stagger(30, { grid: grid, from: 'center' })
    }, 0)
    // Floating upward with wave effect
    .add('.part', {
        translateY: (el, i) => -anime.utils.random(2, 8),
        rotate: (el) => anime.utils.random(-45, 45),
        duration: 1200,
        easing: 'easeInOutSine',
        delay: (el, i) => i * 20 + anime.utils.random(-100, 100)
    }, '-=400')
    // Scattered tumble
    .add('.part', {
        translateX: (el) => anime.utils.random(-20, 20),
        translateY: (el) => anime.utils.random(-20, 20),
        rotate: (el) => anime.utils.random(-360, 360),
        scale: (el) => anime.utils.random(0.5, 1.2),
        duration: 1000,
        easing: 'easeInOutQuad',
        delay: anime.stagger(40, { grid: grid, from: 'random' })
    })
    // Converge back with randomized paths
    .add('.part', {
        translateX: 0,
        translateY: 0,
        rotate: (el) => anime.utils.random(0, 360),
        scale: 1,
        duration: 1200,
        easing: 'easeOutElastic',
        delay: anime.stagger(50, { grid: grid, from: 'center' })
    })
    // Gentle pulse
    .add('.part', {
        scale: (el) => anime.utils.random(0.9, 1.1),
        opacity: (el) => anime.utils.random(0.5, 1),
        duration: 600,
        easing: 'easeInOutSine',
        delay: anime.stagger(30)
    }, '-=200');

staggersAnimation.play();
