/**
 * Background 组件
 * 动态流体背景，包含渐变、浮动模糊圆和纹理叠加
 */
const Background = () => {
  return (
    <div id="app-bg" className="fixed inset-0 z-[-1]">
      {/* 渐变底层 */}
      <div className="absolute inset-0 bg-gradient-to-br from-[#1a1c2c] via-[#0a0c10] to-[#2d1b10] opacity-80" />
      
      {/* 浮动模糊圆 - 蓝色 */}
      <div className="absolute top-[-10%] left-[-10%] w-[60%] h-[60%] bg-blue-900/20 blur-[120px] rounded-full animate-float" />
      
      {/* 浮动模糊圆 - 橙色 */}
      <div className="absolute bottom-[-10%] right-[-10%] w-[50%] h-[50%] bg-orange-900/10 blur-[120px] rounded-full animate-float-delayed" />
      
      {/* 纹理叠加层 */}
      <img 
        src="https://r2-bucket.flowith.net/f/845b300ff0a2b36e/digital_healing_background_design_index_1%401024x1024.jpeg" 
        alt="texture" 
        className="w-full h-full object-cover mix-blend-overlay opacity-30"
      />
    </div>
  );
};

export default Background;
