---
/**
 * Realistic painterly cloud — pre-generated PNG via Perlin noise.
 *
 * Source: site/scripts/gen-clouds.mjs creates 5 webp variants in
 * site/public/backdrops/cloud-{1..5}.webp. Regenerate with:
 *
 *   node scripts/gen-clouds.mjs
 *
 * Browser-perfect (it's just an <img>), zero filter / displacement-map
 * surface area, no Safari quirks.
 */
interface Props {
  variant?: 1 | 2 | 3 | 4 | 5;
  opacity?: number;
  class?: string;
  eager?: boolean;
}
const { variant = 1, opacity = 1, class: className = '', eager = false } = Astro.props;
---
<img
  src={`/backdrops/cloud-${variant}.webp`}
  alt=""
  aria-hidden="true"
  decoding="async"
  loading={eager ? 'eager' : 'lazy'}
  fetchpriority={eager ? 'high' : 'auto'}
  class={`pointer-events-none select-none ${className}`}
  style={`opacity:${opacity}; width:100%; height:auto;`}
/>
