// Enhanced easing curves for professional animations
export const easeOutQuart = [0.25, 1, 0.5, 1] as const;
export const easeOutExpo = [0.19, 1, 0.22, 1] as const;
export const easeOutCubic = [0.33, 1, 0.68, 1] as const;

// Hero section immediate load animations
export const heroVariants = {
  hidden: { 
    opacity: 0, 
    y: 30,
    scale: 0.98
  },
  visible: { 
    opacity: 1, 
    y: 0,
    scale: 1,
    transition: {
      duration: 0.5,
      ease: easeOutQuart,
      delay: 0.2
    }
  }
};

// Main content scroll-triggered animations
export const sectionVariants = {
  hidden: { 
    opacity: 0, 
    y: 50,
    transition: {
      duration: 0.4,
      ease: easeOutCubic
    }
  },
  visible: { 
    opacity: 1, 
    y: 0,
    transition: {
      duration: 0.5,
      ease: easeOutQuart
    }
  }
};

// Card/component level animations with scale
export const cardVariants = {
  hidden: { 
    opacity: 0, 
    scale: 0.95,
    y: 30,
    rotateX: 5
  },
  visible: { 
    opacity: 1, 
    scale: 1,
    y: 0,
    rotateX: 0,
    transition: {
      duration: 0.45,
      ease: easeOutExpo
    }
  }
};

// Staggered container for sequential reveals
export const staggerContainer = {
  hidden: { opacity: 1 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1,
      delayChildren: 0.05
    }
  }
};

// Fast stagger for dense content (cards, testimonials)
export const fastStaggerContainer = {
  hidden: { opacity: 1 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.08,
      delayChildren: 0.02
    }
  }
};

// Heading-specific animations with letter spacing effect
export const headingVariants = {
  hidden: { 
    opacity: 0, 
    y: 20,
    letterSpacing: "-0.01em",
    scale: 0.99
  },
  visible: { 
    opacity: 1, 
    y: 0,
    letterSpacing: "0em",
    scale: 1,
    transition: {
      duration: 0.4,
      ease: easeOutQuart
    }
  }
};

// Text content animations
export const textVariants = {
  hidden: { 
    opacity: 0, 
    y: 15
  },
  visible: { 
    opacity: 1, 
    y: 0,
    transition: {
      duration: 0.35,
      ease: easeOutCubic
    }
  }
};

// Button/CTA animations with micro-bounce
export const ctaVariants = {
  hidden: { 
    opacity: 0, 
    y: 20,
    scale: 0.96
  },
  visible: { 
    opacity: 1, 
    y: 0,
    scale: 1,
    transition: {
      duration: 0.4,
      ease: easeOutExpo,
      delay: 0.15
    }
  }
};

// Icon micro-interactions
export const iconVariants = {
  hidden: { 
    opacity: 0, 
    scale: 0.8,
    rotate: -5
  },
  visible: { 
    opacity: 1, 
    scale: 1,
    rotate: 0,
    transition: {
      duration: 0.35,
      ease: easeOutExpo,
      delay: 0.1
    }
  }
};

// Mobile-optimized lighter animations
export const mobileVariants = {
  hidden: { 
    opacity: 0, 
    y: 20
  },
  visible: { 
    opacity: 1, 
    y: 0,
    transition: {
      duration: 0.3,
      ease: easeOutCubic
    }
  }
};

// Background gradient animations
export const backgroundVariants = {
  hidden: { 
    opacity: 0,
    scale: 1.02
  },
  visible: { 
    opacity: 1,
    scale: 1,
    transition: {
      duration: 0.6,
      ease: easeOutCubic
    }
  }
};

// Page transition variants
export const pageTransition = {
  initial: { opacity: 0, x: 10, scale: 0.99 },
  animate: { opacity: 1, x: 0, scale: 1 },
  exit: { opacity: 0, x: -10, scale: 0.99 },
  transition: { duration: 0.35, ease: easeOutQuart }
};

// Enhanced hover effects
export const buttonHoverVariants = {
  rest: { 
    scale: 1,
    y: 0,
    boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.1)",
    transition: { duration: 0.2, ease: easeOutCubic }
  },
  hover: { 
    scale: 1.02,
    y: -1,
    boxShadow: "0 10px 15px -3px rgba(99, 102, 241, 0.2), 0 4px 6px -2px rgba(99, 102, 241, 0.1)",
    transition: { duration: 0.2, ease: easeOutQuart }
  }
};

export const cardHoverVariants = {
  rest: { 
    scale: 1,
    y: 0,
    rotateX: 0,
    transition: { duration: 0.2, ease: easeOutCubic }
  },
  hover: { 
    scale: 1.02,
    y: -3,
    rotateX: 1,
    transition: { duration: 0.2, ease: easeOutQuart }
  }
};