---
/**
 * Animated cloudy background tinted to the active theme color.
 *
 * Uses CSS custom properties (--accent-glow, --accent-glow-secondary,
 * --accent-glow-tertiary) so the clouds automatically recolor on theme switch.
 * Each blob has its own animation timing, position, and intensity.
 *
 * Pure CSS: no JavaScript needed.
 */

interface CloudProps {
  shape: "circle" | "ellipse";
  innerVar: string;
  innerOpacity: number;
  outerVar?: string;
  outerOpacity?: number;
}

function cloudGradient({ shape, innerVar, innerOpacity, outerVar, outerOpacity }: CloudProps): string {
  const inner = `rgba(var(--accent-glow${innerVar}),${innerOpacity})`;
  if (outerVar !== undefined && outerOpacity !== undefined) {
    const outer = `rgba(var(--accent-glow${outerVar}),${outerOpacity})`;
    return `radial-gradient(${shape}, ${inner} 0%, ${outer} 40%, transparent 70%)`;
  }
  return `radial-gradient(${shape}, ${inner} 0%, transparent 60%)`;
}
---

<div aria-hidden="true" class="cloud-container pointer-events-none fixed inset-0 -z-10 overflow-hidden">
  <!-- Large cloud: top left -->
  <div
    class="cloud-element absolute -left-32 -top-32 h-[800px] w-[800px] rounded-full blur-[150px] transition-[background] duration-700"
    style={`background: ${cloudGradient({ shape: "circle", innerVar: "", innerOpacity: 0.50, outerVar: "-secondary", outerOpacity: 0.20 })}; animation: cloud-drift 90s ease-in-out infinite;`}
  />

  <!-- Medium cloud: top right -->
  <div
    class="cloud-element absolute -right-20 top-1/4 h-[700px] w-[700px] rounded-full blur-[130px] transition-[background] duration-700"
    style={`background: ${cloudGradient({ shape: "circle", innerVar: "-secondary", innerOpacity: 0.40, outerVar: "-tertiary", outerOpacity: 0.15 })}; animation: cloud-drift-reverse 110s ease-in-out infinite;`}
  />

  <!-- Accent cloud: center -->
  <div
    class="cloud-element absolute left-1/3 top-1/2 h-[600px] w-[600px] rounded-full blur-[120px] transition-[background] duration-700"
    style={`background: ${cloudGradient({ shape: "circle", innerVar: "", innerOpacity: 0.35, outerVar: "-secondary", outerOpacity: 0.12 })}; animation: cloud-drift-slow 120s ease-in-out infinite;`}
  />

  <!-- Bottom-left glow -->
  <div
    class="cloud-element absolute -bottom-40 -left-20 h-[700px] w-[700px] rounded-full blur-[140px] transition-[background] duration-700"
    style={`background: ${cloudGradient({ shape: "circle", innerVar: "-tertiary", innerOpacity: 0.38, outerVar: "-secondary", outerOpacity: 0.14 })}; animation: cloud-drift-reverse 100s ease-in-out infinite; animation-delay: -30s;`}
  />

  <!-- Wide upper cloud for depth -->
  <div
    class="cloud-element absolute left-1/2 -top-20 h-[500px] w-[900px] -translate-x-1/2 rounded-full blur-[150px] transition-[background] duration-700"
    style={`background: ${cloudGradient({ shape: "ellipse", innerVar: "", innerOpacity: 0.30 })}; animation: cloud-drift-slow 130s ease-in-out infinite; animation-delay: -50s;`}
  />

  <!-- Extra cloud: bottom right -->
  <div
    class="cloud-element absolute -bottom-20 -right-32 h-[600px] w-[600px] rounded-full blur-[130px] transition-[background] duration-700"
    style={`background: ${cloudGradient({ shape: "circle", innerVar: "-secondary", innerOpacity: 0.32, outerVar: "", outerOpacity: 0.10 })}; animation: cloud-drift 105s ease-in-out infinite; animation-delay: -40s;`}
  />
</div>
