/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/*.html",            // Scans index.html, about.html, etc. in src
    "./src/js/*.js",           // Scans your javascript files
    "./src/components/**/*.html" // Scans your reusable components
  ],
  safelist: [
    { pattern: /^animate-fade-in-/ },
    'animate-logo-float',
    'animate-border-glow'
  ],
  darkMode: "class",
  theme: {
    extend: {
      colors: {
        kh3: {
          black: "#212829",
          red: "#B03037",
          grey: "#8E9089",
          white: "#FFFFFF",
          gold: "#b8860b",
          darkGold: "#8b6914",
          lightGold: "#daa520",
        },
        black: "#000000",
        white: "#ffffff",
      },
      fontFamily: {
        montserrat: ["Montserrat", "sans-serif"],
        calibri: ["Calibri", "sans-serif"],
      },
      animation: {
        "logo-float": "logoFloat 3s ease-in-out infinite",
        "text-float": "textFloat 4s ease-in-out infinite",
        "border-glow": "borderGlow 3s ease-in-out infinite",
        "menu-grid-cycle": "menuGridCycle 15s ease-in-out infinite",
        "fade-in-up": "fadeInUp 1s ease-out forwards",
        "fade-in-left": "fadeInLeft 1s ease-out forwards",
        "fade-in-right": "fadeInRight 1s ease-out forwards", // Corrected and verified
        "fade-in-center": "fadeInCenter 1s ease-out forwards",
        "logo-glow": "logoGlow 3s ease-in-out infinite",
      },
      keyframes: {
        logoFloat: {
          "0%, 100%": { transform: "translateY(0px)" },
          "50%": { transform: "translateY(-10px)" },
        },
        textFloat: {
          "0%, 100%": { transform: "translateY(0px)" },
          "50%": { transform: "translateY(-5px)" },
        },
        borderGlow: {
          "0%, 100%": {
            borderColor: "#ffffff",
            boxShadow: "0 0 5px rgba(255, 255, 255, 0.3)",
          },
          "50%": {
            borderColor: "#B03037",
            boxShadow: "0 0 15px rgba(176, 48, 55, 0.6)",
          },
        },
        menuGridCycle: {
          // ... content ...
        },
        fadeInUp: {
          "0%": { opacity: "0", transform: "translateY(30px)" },
          "100%": { opacity: "1", transform: "translateY(0)" },
        },
        fadeInLeft: {
          "0%": { opacity: "0", transform: "translateX(-30px)" },
          "100%": { opacity: "1", transform: "translateX(0)" },
        },
        fadeInRight: { // Corrected and verified
          "0%": { opacity: "0", transform: "translateX(30px)" },
          "100%": { opacity: "1", transform: "translateX(0)" },
        },
        fadeInCenter: {
          "0%": { opacity: "0", transform: "scale(0.9)" },
          "100%": { opacity: "1", transform: "scale(1)" },
        },
        logoGlow: {
          "0%, 100%": {
            textShadow:
              "0 0 1px rgba(255, 255, 255, 0.1), 0 0 1px rgba(176, 48, 55, 0.05)",
            filter: "brightness(1)",
          },
          "50%": {
            textShadow:
              "0 0 2px rgba(255, 255, 255, 0.15), 0 0 3px rgba(176, 48, 55, 0.08)",
            filter: "brightness(1.02)",
          },
        },
      },
    },
  },
  plugins: [],
};