/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,jsx}',
    './components/**/*.{js,jsx}',
  ],
  theme: {
    extend: {
      colors: {
        'comic-yellow': '#FFD700',
        'comic-red': '#FF4500',
        'comic-blue': '#00BFFF',
        'comic-black': '#1a1a1a',
        'comic-white': '#f0f0f0',
      },
      boxShadow: {
        'comic': '6px 6px 0px 0px rgba(0,0,0,1)',
        'comic-sm': '3px 3px 0px 0px rgba(0,0,0,1)',
        'piece': '0px 10px 15px -3px rgba(0, 0, 0, 0.5)',
      },
      animation: {
        'shake': 'shake 0.5s cubic-bezier(.36,.07,.19,.97) both',
        'pop': 'pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)',
        'slide-in': 'slideIn 0.4s ease-out',
      },
      keyframes: {
        shake: {
          '10%, 90%': { transform: 'translate3d(-1px, 0, 0)' },
          '20%, 80%': { transform: 'translate3d(2px, 0, 0)' },
          '30%, 50%, 70%': { transform: 'translate3d(-4px, 0, 0)' },
          '40%, 60%': { transform: 'translate3d(4px, 0, 0)' },
        },
        pop: {
          '0%': { transform: 'scale(0.8)', opacity: '0' },
          '100%': { transform: 'scale(1)', opacity: '1' },
        },
        slideIn: {
          '0%': { transform: 'translateY(20px)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' },
        }
      },
      backgroundImage: {
        'halftone': 'radial-gradient(circle, #000 1px, transparent 1px)',
      }
    },
  },
  plugins: [],
};