/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      keyframes: {
        glitch: {
          '0%, 100%': { transform: 'translateX(0)' },
          '20%': { transform: 'translateX(-2px)' },
          '40%': { transform: 'translateX(2px)' },
          '60%': { transform: 'skewX(2deg)' },
          '80%': { transform: 'skewX(-2deg)' },
        },
        'glitch-1': {
          '0%, 100%': { clip: 'rect(44px, 450px, 56px, 0)' },
          '20%': { clip: 'rect(12px, 450px, 32px, 0)' },
          '40%': { clip: 'rect(62px, 450px, 84px, 0)' },
          '60%': { clip: 'rect(22px, 450px, 11px, 0)' },
          '80%': { clip: 'rect(59px, 450px, 71px, 0)' },
        },
        'glitch-2': {
          '0%, 100%': { clip: 'rect(24px, 450px, 36px, 0)' },
          '20%': { clip: 'rect(82px, 450px, 92px, 0)' },
          '40%': { clip: 'rect(32px, 450px, 44px, 0)' },
          '60%': { clip: 'rect(72px, 450px, 81px, 0)' },
          '80%': { clip: 'rect(19px, 450px, 31px, 0)' },
        },
      },
      animation: {
        'glitch': 'glitch 1s infinite',
        'glitch-1': 'glitch-1 0.8s infinite',
        'glitch-2': 'glitch-2 0.8s infinite',
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
};