src/components/BackgroundElements.tsx

import { motion } from 'motion/react';
import { useTheme } from '../context/ThemeContext';

export default function BackgroundElements() {
  const { config } = useTheme();

  return (
    <div className="fixed inset-0 pointer-events-none -z-10 overflow-hidden">
      {/* Floating dynamic theme glows */}
      <motion.div
        animate={{ y: [0, 50, 0], opacity: [0.08, 0.18, 0.08] }}
        transition={{ duration: 12, repeat: Infinity, ease: "linear" }}
        className="absolute top-1/4 left-1/4 w-[450px] h-[450px] rounded-full blur-[140px] transition-colors duration-700"
        style={{ backgroundColor: config.bgGradientFrom }}
      />
      <motion.div
        animate={{ y: [0, -35, 0], opacity: [0.05, 0.15, 0.05] }}
        transition={{ duration: 16, repeat: Infinity, ease: "linear" }}
        className="absolute bottom-1/4 right-1/4 w-[550px] h-[550px] rounded-full blur-[160px] transition-colors duration-700"
        style={{ backgroundColor: config.bgGradientTo }}
      />
    </div>
  );
}