/**
 * Back modal — iOS-style scale-down when the front modal opens.
 */
const backModalAnimations = {
    initial: {
        opacity: 0,
        y: 20,
        scale: 1,
    },
    idle: {
        opacity: 1,
        scale: 1,
        y: 0,
        borderRadius: "var(--modal-radius)",
        filter: "brightness(1)",
        clipPath: "inset(0% 0% 0% 0%)",
        transition: { type: "spring", damping: 28, stiffness: 280 },
    },
    stacked: {
        opacity: 0.5,
        scale: 0.9,
        y: 4,
        borderRadius: "var(--modal-radius)",
        filter: "brightness(0.94) blur(0px)",
        clipPath: "inset(0% 0% 88% 0%)",
        transition: { type: "spring", damping: 28, stiffness: 280 },
    },
    exit: {
        opacity: 0,
        y: 20,
        transition: { duration: 0.2, ease: "easeIn" },
    },
};
/**
 * Front modal — standard enter/exit animation.
 */
const frontModalAnimations = {
    initial: {
        opacity: 0,
        y: 40,
        scale: 0.97,
    },
    animate: {
        opacity: 1,
        y: 0,
        scale: 1,
        transition: {
            type: "spring",
            damping: 26,
            stiffness: 300,
            delay: 0.05,
        },
    },
    exit: {
        opacity: 0,
        y: 40,
        scale: 0.97,
        transition: { duration: 0.2, ease: "easeIn" },
    },
};

export { backModalAnimations, frontModalAnimations };
