/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{ts,tsx}"],
  darkMode: "class",
  theme: {
    extend: {
      fontFamily: {
        display: ["Audiowide", "Orbitron", "ui-sans-serif", "system-ui", "sans-serif"],
        sans: ["JetBrains Mono", "ui-monospace", "monospace"],
        mono: ["JetBrains Mono", "ui-monospace", "monospace"],
      },
      colors: {
        bubble: {
          950: "#020408",
          900: "#051210",
          800: "#0a1a16",
          700: "#0f2820",
          accent: "#00e5ff",
          mint: "#00ff9d",
          rose: "#ff2a6d",
          volt: "#d4ff00",
        },
      },
      boxShadow: {
        glow: "0 0 50px -10px rgba(0,255,157,0.55), 0 0 100px -40px rgba(0,229,255,0.35), 0 0 30px -5px rgba(255,42,109,0.2)",
        glowCyan: "0 0 40px -5px rgba(0,229,255,0.65)",
        glowRose: "0 0 35px -5px rgba(255,42,109,0.5)",
        insetTerminal: "inset 0 1px 0 0 rgba(0,255,157,0.12)",
        neonBtn: "0 0 25px rgba(0,229,255,0.45), 0 0 50px rgba(0,255,157,0.2), inset 0 0 20px rgba(0,229,255,0.15)",
      },
      keyframes: {
        flicker: {
          "0%, 100%": { opacity: "1" },
          "92%": { opacity: "0.96" },
          "94%": { opacity: "1" },
        },
        borderPulse: {
          "0%, 100%": { borderColor: "rgba(0, 255, 157, 0.35)" },
          "50%": { borderColor: "rgba(0, 229, 255, 0.55)" },
        },
        pulseGlow: {
          "0%, 100%": { opacity: "0.35", transform: "scale(1)" },
          "50%": { opacity: "0.65", transform: "scale(1.08)" },
        },
        floatSlow: {
          "0%, 100%": { transform: "translate(0, 0) rotate(0deg)" },
          "33%": { transform: "translate(12px, -18px) rotate(2deg)" },
          "66%": { transform: "translate(-8px, 10px) rotate(-1deg)" },
        },
        gridDrift: {
          "0%": { backgroundPosition: "0 0, 0 0, 0 0" },
          "100%": { backgroundPosition: "24px 24px, 24px 24px, 100% 100%" },
        },
        scanBar: {
          "0%": { transform: "translateX(-100%)" },
          "100%": { transform: "translateX(400%)" },
        },
        hueCycle: {
          "0%": { filter: "hue-rotate(0deg)" },
          "100%": { filter: "hue-rotate(360deg)" },
        },
        shimmerLine: {
          "0%": { transform: "translateX(-100%) skewX(-12deg)", opacity: "0" },
          "20%": { opacity: "0.9" },
          "100%": { transform: "translateX(200%) skewX(-12deg)", opacity: "0" },
        },
      },
      animation: {
        flicker: "flicker 3.5s ease-in-out infinite",
        borderPulse: "borderPulse 2.5s ease-in-out infinite",
        pulseGlow: "pulseGlow 5s ease-in-out infinite",
        floatSlow: "floatSlow 18s ease-in-out infinite",
        gridDrift: "gridDrift 20s linear infinite",
        scanBar: "scanBar 3.5s ease-in-out infinite",
        hueCycle: "hueCycle 14s linear infinite",
        shimmerLine: "shimmerLine 2.8s ease-in-out infinite",
      },
    },
  },
  plugins: [],
};