"use client";

import { motion } from "framer-motion";

const Grain = () => {
  return (
    <div
      className="pointer-events-none fixed inset-0 z-[9999] h-full w-full overflow-hidden"
    >
      <div 
        className="absolute inset-[-200%] h-[400%] w-[400%] bg-[url('/images/grain.png')] bg-repeat opacity-[0.03] dark:opacity-[0.05]"
        style={{ transform: 'translate3d(0, 0, 0)' }}
      />
      <motion.div
        animate={{
          x: [0, -50, 20, -10, 40, -20, 0],
          y: [0, 20, -30, 10, -20, 30, 0],
        }}
        transition={{
          duration: 0.5,
          repeat: Infinity,
          ease: "linear",
        }}
        className="absolute inset-[-200%] h-[400%] w-[400%] bg-[url('/images/grain.png')] bg-repeat opacity-[0.03] dark:opacity-[0.05]"
      />
    </div>
  );
};

export default Grain;