/**
 * Accordion animation variants for smooth, staggered open/close transitions
 */
const accordionAnimations = {
    collapsed: {
        height: 0,
        opacity: 0,
        transition: {
            height: { duration: 0.3, ease: [0.04, 0.62, 0.23, 0.98] },
            opacity: { duration: 0.25 }
        }
    },
    open: {
        height: 'auto',
        opacity: 1,
        transition: {
            height: { duration: 0.4, ease: [0.04, 0.62, 0.23, 0.98] },
            opacity: { duration: 0.3, delay: 0.1 }
        }
    }
};
/**
 * Factory for trigger icon rotation variants.
 * @param rotation - Degrees to rotate when open (e.g. 45 for PlusIcon, 180 for chevron)
 */
const createTriggerIconVariants = (rotation) => ({
    closed: {
        rotate: 0,
        transition: { duration: 0.2, ease: [0.4, 0.0, 0.2, 1] },
    },
    open: {
        rotate: rotation,
        transition: { duration: 0.2, ease: [0.4, 0.0, 0.2, 1] },
    },
});
/**
 * Content animation variants for subtle slide-in effect after container expands
 */
const accordionContentAnimations = {
    collapsed: {
        opacity: 0,
        y: -10,
        transition: {
            y: { duration: 0.2, ease: 'easeOut' },
            opacity: { duration: 0.2 }
        }
    },
    open: {
        opacity: 1,
        y: 0,
        transition: {
            delay: 0.15, // Start after the container has begun expanding
            y: { duration: 0.3, ease: 'easeOut' },
            opacity: { duration: 0.3, ease: 'easeOut' }
        }
    }
};

export { accordionAnimations, accordionContentAnimations, createTriggerIconVariants };
