export const boxVariants = {
    background: { backgroundColor: "#C62E65" },
    entering: { x: -50, opacity: 1},
    entered: {
        x: 0,
        opacity: 1,
        transition: {
            x: {
                duration: 1,
                ease: "easeOut"
            },
            opacity: {
                duration: 1
            }
        },
        
    },
    opacity0: { scale: 1},
    opacity1: { 
        scale: 1.2,
        transition: {
            scale: {
                duration: 1
            }
        }
    },
    top: { y: [null, -150, 0] },
    left: {
      x: [null, -150, 0],
      transition: {
        duration: 3,
        times: [0, 0.3, 0.8],
        ease: ["backIn", "backOut"]
      }
    },
    right: { x: [null, 150, 0] },
    zoom: { scale: [null, 2, 1], rotate: [0, 90, 0] }
  }
  
  export const barsVariant = {
    animate: { transition: { staggerChildren: 0.095 } }
  }
  
  export const barVariant = {
    initial: { scaleY: 0 },
    animate: {
      scaleY: [null, 1, 0],
      transition: { ease: "easeOut" }
    }
  }
  
  export const buttonsVariant = {
    appear: { transition: { staggerChildren: 0.08 } },
    animate: { transition: { staggerChildren: 0.12 } }
  }
  
  export const buttonVariant = {
    hidden: { opacity: 0, x: -20 },
    appear: { opacity: 1, x: 0, transition: { duration: 0.5, ease: "easeOut" } },
    animate: {
      y: [null, 50, 0],
      scale: [1, 0, 1],
      rotate: [0, 360, 0]
    }
  }