export default function MoonBreathingFight() {
  return (
    <div className="relative h-screen w-full bg-gradient-to-b from-gray-900 to-black overflow-hidden flex justify-center items-center">
      {/* Fundo animado */}
      <div className="absolute inset-0 bg-[radial-gradient(circle,rgba(255,255,255,0.1)_0%,transparent_70%)] animate-pulse"></div>

      {/* Personagem */}
      <div className="relative">
        <motion.img
          src="https://i.ibb.co/qCQtRBr/moon-slayer.png" // Substitua pela imagem do seu personagem
          alt="Caçador da Lua"
          className="w-48 drop-shadow-[0_0_15px_rgba(173,216,230,0.6)]"
          initial={{ x: -500, opacity: 0 }}
          animate={{ x: 0, opacity: 1 }}
          transition={{ duration: 1.2, ease: "easeOut" }}
        />
      </div>

      {/* Golpe em meia-lua */}
      <motion.div
        className="absolute w-96 h-96 rounded-full border-[6px] border-blue-400 blur-sm shadow-[0_0_30px_#93c5fd]"
        initial={{ scale: 0, rotate: 0, opacity: 0 }}
        animate={{ scale: 1, rotate: 360, opacity: 1 }}
        transition={{ duration: 1.5, delay: 1 }}
      ></motion.div>

      {/* Partículas */}
      {[...Array(20)].map((_, i) => (
        <motion.div
          key={i}
          className="absolute w-2 h-2 bg-blue-300 rounded-full shadow-[0_0_10px_#93c5fd]"
          initial={{
            x: 0,
            y: 0,
            opacity: 0,
            scale: 0,
          }}
          animate={{
            x: Math.random() * 600 - 300,
            y: Math.random() * 400 - 200,
            opacity: [0, 1, 0],
            scale: [0, 1, 0],
          }}
          transition={{
            duration: 1.5 + Math.random(),
            delay: 1 + Math.random() * 0.5,
            repeat: Infinity,
          }}
        />
      ))}

      {/* Texto da técnica */}
      <motion.h1
        className="absolute bottom-10 text-4xl text-white font-bold tracking-widest drop-shadow-[0_0_10px_#93c5fd]"
        initial={{ opacity: 0, y: 50 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.8, duration: 0.8 }}
      >
        Respiração da Lua — Corte Crescente!
      </motion.h1>
npm install framer-motion tailwindcss
npx tailwindcss init
    </div>
  );
}