src/components/effects/ambient-background.tsx

'use client';

import { cn } from '@/lib/utils';

export function AmbientBackground() {
  return (
    <div className="fixed inset-0 -z-10 overflow-hidden">
      {/* Base gradient */}
      <div
        className="absolute inset-0"
        style={{
          background: 'var(--surface-base)',
        }}
      />

      {/* Ambient orbs */}
      <div
        className={cn(
          'absolute w-[600px] h-[600px] rounded-full',
          'blur-[120px] opacity-60',
          'float-slow'
        )}
        style={{
          background: 'var(--ambient-blue)',
          top: '10%',
          left: '10%',
        }}
      />

      <div
        className={cn(
          'absolute w-[500px] h-[500px] rounded-full',
          'blur-[100px] opacity-50',
          'float-medium'
        )}
        style={{
          background: 'var(--ambient-purple)',
          top: '40%',
          right: '5%',
          animationDelay: '-5s',
        }}
      />

      <div
        className={cn(
          'absolute w-[400px] h-[400px] rounded-full',
          'blur-[80px] opacity-40',
          'float-slow'
        )}
        style={{
          background: 'var(--ambient-pink)',
          bottom: '10%',
          left: '30%',
          animationDelay: '-10s',
        }}
      />

      <div
        className={cn(
          'absolute w-[350px] h-[350px] rounded-full',
          'blur-[90px] opacity-45',
          'float-medium'
        )}
        style={{
          background: 'var(--ambient-cyan)',
          top: '60%',
          left: '60%',
          animationDelay: '-15s',
        }}
      />

      {/* Subtle noise texture overlay */}
      <div
        className="absolute inset-0 opacity-[0.015] mix-blend-overlay pointer-events-none"
        style={{
          backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E")`,
        }}
      />
    </div>
  );
}