/**
 * Timeline item entry animation variants
 * Provides a fade + slide effect when items enter the viewport
 */
const timelineItemVariants = {
    hidden: {
        opacity: 0,
        y: 20,
        transition: {
            duration: 0.3,
            ease: "easeOut",
        },
    },
    visible: {
        opacity: 1,
        y: 0,
        transition: {
            duration: 0.5,
            ease: [0.04, 0.62, 0.23, 0.98],
        },
    },
};
/**
 * Get directional slide variants based on alignment side
 * Items slide in from the opposite direction of their placement
 *
 * @param side - 'left' slides from left, 'right' slides from right
 */
const getDirectionalVariants = (side) => ({
    hidden: {
        opacity: 0,
        x: side === "left" ? -30 : 30,
        y: 10,
        transition: {
            duration: 0.3,
            ease: "easeOut",
        },
    },
    visible: {
        opacity: 1,
        x: 0,
        y: 0,
        transition: {
            duration: 0.5,
            ease: [0.04, 0.62, 0.23, 0.98],
        },
    },
});
/**
 * Horizontal layout item entry animation
 * Items fade in from below
 */
const timelineHorizontalItemVariants = {
    hidden: {
        opacity: 0,
        y: 15,
        transition: {
            duration: 0.3,
            ease: "easeOut",
        },
    },
    visible: {
        opacity: 1,
        y: 0,
        transition: {
            duration: 0.4,
            ease: [0.04, 0.62, 0.23, 0.98],
        },
    },
};
/**
 * Marker scale-in animation
 * Markers pop in with a slight scale effect
 */
const timelineMarkerVariants = {
    hidden: {
        scale: 0,
        opacity: 0,
    },
    visible: {
        scale: 1,
        opacity: 1,
        transition: {
            type: "spring",
            stiffness: 300,
            damping: 20,
            delay: 0.1,
        },
    },
};

export { getDirectionalVariants, timelineHorizontalItemVariants, timelineItemVariants, timelineMarkerVariants };
