/**
 * Animation Variants
 * Preset variants for Framer Motion animations
 */

export const variants = {
  // Fade in
  fadeIn: {
    initial: { opacity: 0 },
    animate: { opacity: 1 },
    exit: { opacity: 0 },
  },

  // Fade in + slide up
  fadeInUp: {
    initial: { opacity: 0, y: 24, filter: "blur(8px)" },
    animate: { opacity: 1, y: 0, filter: "blur(0px)" },
    exit: { opacity: 0, y: -24, filter: "blur(8px)" },
  },

  // Fade in + slide down
  fadeInDown: {
    initial: { opacity: 0, y: -24, filter: "blur(8px)" },
    animate: { opacity: 1, y: 0, filter: "blur(0px)" },
    exit: { opacity: 0, y: 24, filter: "blur(8px)" },
  },

  // Fade in + slide left
  fadeInLeft: {
    initial: { opacity: 0, x: 24, filter: "blur(8px)" },
    animate: { opacity: 1, x: 0, filter: "blur(0px)" },
    exit: { opacity: 0, x: -24, filter: "blur(8px)" },
  },

  // Fade in + slide right
  fadeInRight: {
    initial: { opacity: 0, x: -24, filter: "blur(8px)" },
    animate: { opacity: 1, x: 0, filter: "blur(0px)" },
    exit: { opacity: 0, x: 24, filter: "blur(8px)" },
  },

  // Scale in
  scaleIn: {
    initial: { opacity: 0, scale: 0.95 },
    animate: { opacity: 1, scale: 1 },
    exit: { opacity: 0, scale: 0.95 },
  },

  // Image reveal
  imageReveal: {
    initial: {
      opacity: 0,
      scale: 0.98,
      filter: "blur(8px)",
      clipPath: "inset(0 100% 0 0)",
    },
    animate: {
      opacity: 1,
      scale: 1,
      filter: "blur(0px)",
      clipPath: "inset(0 0% 0 0)",
    },
  },

  // Text reveal (per word)
  textReveal: {
    initial: {
      opacity: 0,
      scale: 0.95,
      filter: "blur(6px)",
      clipPath: "inset(0 100% 0 0)",
    },
    animate: {
      opacity: 1,
      scale: 1,
      filter: "blur(0px)",
      clipPath: "inset(0 0% 0 0)",
    },
  },

  // Stagger container
  staggerContainer: {
    animate: {
      transition: {
        staggerChildren: 0.08,
      },
    },
  },

  // Reduced motion variants
  reducedMotion: {
    fadeIn: {
      initial: { opacity: 0 },
      animate: { opacity: 1 },
      exit: { opacity: 0 },
    },
  },
} as const;