layered-backgrounds

# Layered Backgrounds

Premium background effects inspired by DesignCode UI.

## Agent Workflow (MANDATORY)

Before implementation:
1. **fuse-ai-pilot:explore-codebase** - Check existing background patterns
2. **fuse-ai-pilot:research-expert** - CSS filter and blend modes

After: Run **fuse-ai-pilot:sniper** for validation.

## Layer Stack

```
┌─────────────────────────────────────┐
│ Content (z-10)                      │
├─────────────────────────────────────┤
│ Noise/Grain overlay (z-5)           │
├─────────────────────────────────────┤
│ Glass surface (z-0)                 │
├─────────────────────────────────────┤
│ Gradient orbs (z-[-1])              │
├─────────────────────────────────────┤
│ Base gradient (z-[-2])              │
└─────────────────────────────────────┘
```

## Gradient Orbs

```tsx
function GradientBackground() {
  return (
    <div className="absolute inset-0 -z-10 overflow-hidden">
      {/* Primary orb - top left */}
      <div
        className="absolute -top-1/4 -left-1/4 w-[600px] h-[600px]
                   bg-primary/30 rounded-full blur-3xl"
      />

      {/* Accent orb - bottom right */}
      <div
        className="absolute -bottom-1/4 -right-1/4 w-[500px] h-[500px]
                   bg-accent/20 rounded-full blur-3xl"
      />

      {/* Secondary orb - center */}
      <div
        className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2
                   w-[400px] h-[400px] bg-secondary/15 rounded-full blur-2xl"
      />
    </div>
  );
}
```

## Animated Orbs

```tsx
import { motion } from "framer-motion";

function AnimatedBackground() {
  return (
    <div className="absolute inset-0 -z-10 overflow-hidden">
      <motion.div
        className="absolute w-[600px] h-[600px] bg-primary/30 rounded-full blur-3xl"
        animate={{
          x: [0, 100, 0],
          y: [0, -50, 0],
        }}
        transition={{
          duration: 20,
          repeat: Infinity,
          ease: "easeInOut",
        }}