const exitMap = {
    up: { y: '-100%', x: 0 },
    down: { y: '100%', x: 0 },
    left: { x: '-100%', y: 0 },
    right: { x: '100%', y: 0 },
};
const buildCurtainVariants = (direction, duration) => ({
    covered: { y: 0, x: 0 },
    exit: {
        ...exitMap[direction],
        transition: {
            duration,
            ease: [0.76, 0, 0.24, 1],
        },
    },
});
// Logo is rendered INSIDE the curtain. These are relative offsets that
// counteract ~30% of the curtain's motion, making the logo appear to
// move at ~70% of the curtain's speed (parallax lag effect).
const logoInnerOffsetMap = {
    up: { y: '30vh', x: 0 },
    down: { y: '-30vh', x: 0 },
    left: { x: '30vw', y: 0 },
    right: { x: '-30vw', y: 0 },
};
const buildLogoParallaxVariants = (direction, duration) => ({
    covered: { y: 0, x: 0 },
    exit: {
        ...logoInnerOffsetMap[direction],
        transition: {
            duration,
            ease: [0.76, 0, 0.24, 1],
        },
    },
});
const buildSplitVariants = (axis, duration) => ({
    panel1: {
        covered: {},
        exit: {
            [axis === 'h' ? 'y' : 'x']: '-100%',
            transition: { duration, ease: [0.76, 0, 0.24, 1] },
        },
    },
    panel2: {
        covered: {},
        exit: {
            [axis === 'h' ? 'y' : 'x']: '100%',
            transition: { duration, ease: [0.76, 0, 0.24, 1] },
        },
    },
});

export { buildCurtainVariants, buildLogoParallaxVariants, buildSplitVariants };
