// Background.jsx — subtle scanning grid + vignette behind every scene.
// Adds depth without competing with content.

function StageBackground() {
  const time = useTime();
  // Slow drift on the grid
  const drift = (time * 6) % 60;

  return (
    <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'none' }}>
      {/* Base */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse at 50% 40%, #ffffff 0%, #fdf8f1 62%, #f6efe4 100%)',
      }}/>
      {/* Aurora chaude (remplace la grille) */}
      <div style={{
        position: 'absolute', inset: 0,
        background:
          'radial-gradient(54% 68% at 8% 0%, rgba(255,99,41,0.18) 0%, transparent 62%),' +
          'radial-gradient(48% 62% at 98% 10%, rgba(255,193,39,0.20) 0%, transparent 60%),' +
          'radial-gradient(68% 78% at 88% 108%, rgba(255,99,41,0.12) 0%, transparent 64%)',
      }}/>
      {/* Vignette */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.05) 100%)',
      }}/>
    </div>
  );
}

window.StageBackground = StageBackground;