module.exports = {
  theme: {
    extend: {
      animation: {
        'gradient': 'gradient 3s linear infinite',
        'fade-in': 'fadeIn 0.5s ease-in',
        'fade-in-up': 'fadeInUp 0.5s ease-out',
        'bounce-slow': 'bounce 3s infinite',
        'pulse': 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
        'float': 'float 6s ease-in-out infinite',
        'shimmer': 'shimmer 3s linear infinite',
        'shimmer-fast': 'shimmer 2s linear infinite',
        'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
      },
      keyframes: {
        gradient: {
          '0%, 100%': { backgroundPosition: '0% 50%' },
          '50%': { backgroundPosition: '100% 50%' },
        },
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        fadeInUp: {
          '0%': { 
            opacity: '0',
            transform: 'translateY(10px)'
          },
          '100%': {
            opacity: '1',
            transform: 'translateY(0)'
          },
        },
        bounce: {
          '0%, 100%': { transform: 'translateY(-5%)' },
          '50%': { transform: 'translateY(0)' },
        },
        pulse: {
          '0%, 100%': { opacity: 1 },
          '50%': { opacity: 0.5 },
        },
        float: {
          '0%, 100%': { 
            transform: 'translateY(0) rotate(0deg) scale(1)',
            filter: 'brightness(1)'
          },
          '50%': { 
            transform: 'translateY(-10px) rotate(5deg) scale(1.05)',
            filter: 'brightness(1.2)'
          },
        },
        shimmer: {
          '0%': { backgroundPosition: '200% 50%', opacity: 0.5 },
          '50%': { opacity: 1 },
          '100%': { backgroundPosition: '-200% 50%', opacity: 0.5 },
        },
      },
      dropShadow: {
        'glow': '0 0 10px rgba(56, 189, 248, 0.5)',
        'glow-strong': [
          '0 0 10px rgba(56, 189, 248, 0.5)',
          '0 0 20px rgba(56, 189, 248, 0.3)',
        ],
      },
      backgroundSize: {
        '400%': '400% 100%',
      },
      perspective: {
        'default': '1000px',
      },
    },
  },
}