/* documentation here: https://animejs.com/documentation/getting-started/installation */
const { animate, utils, createSpring } = anime;

// @ts-check

const $cards = utils.$('.card')

animate($cards, {
    // Property keyframes
    y: [
        { to: '-2.75rem', ease: 'outExpo', duration: 600 },
        { to: 0, ease: 'outBounce', duration: 800, delay: 100 }
    ],
    // Property specific parameters
    rotate: {
        from: '-1turn',
        delay: 0
    },
    delay: (_, i) => i * 50, // Function based value
    ease: 'inOutCirc',
});

/**
    @param {*} card
*/
const hovorLogo = (card) => {
    animate(card, {
        scale: [
            { to: 1.1, ease: 'inOut(2)', duration: 50 },
            { to: 1, ease: createSpring({ stiffness: 300 }) }
        ],
    })
}

$cards.forEach((card) => card.addEventListener('mouseenter', () => hovorLogo(card)))