import type { Config } from 'tailwindcss';

const config: Config = {
  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
  theme: {
    extend: {
      fontFamily: {
        indie: ['var(--font-indie)', 'cursive'],
        mplus: ['var(--font-mplus)', 'sans-serif'],
      },
      keyframes: {
        moveforever: {
          '0%': { transform: 'translate3d(-90px, 0, 0)' },
          '100%': { transform: 'translate3d(85px, 0, 0)' },
        },
        bounce: {
          '0%, 20%, 60%, 100%': { transform: 'translateY(0)' },
          '40%': { transform: 'translateY(-20px)' },
          '80%': { transform: 'translateY(-10px)' },
        },
        slideInFromLeft: {
          '0%': { transform: 'translateX(-100%)' },
          '100%': { opacity: '1', transform: 'translateX(0)' },
        },
        slideInFromRight: {
          '0%': { transform: 'translateX(100%)' },
          '100%': { opacity: '1', transform: 'translateX(0)' },
        },
        upAndDown: {
          '0%, 100%': { transform: 'translateY(0)' },
          '50%': { transform: 'translateY(-5%)' },
        },
      },
      animation: {
        'up-down': 'upAndDown 10s linear infinite',
        'wave-1': 'moveforever 2s cubic-bezier(0.55, 0.5, 0.45, 0.5) -2s infinite',
        'wave-2': 'moveforever 5s cubic-bezier(0.55, 0.5, 0.45, 0.5) -4s infinite',
        bounce: 'bounce 1s',
        'slide-in-l': 'slideInFromLeft 1s forwards',
        'slide-in-r': 'slideInFromRight 1s forwards',
      },
    },
  },
  plugins: [],
};

export default config;