---
import Cloud from './Cloud.astro';
/**
 * Deep-sky hero atmosphere with realistic painterly clouds.
 * Cloud assets are real WebP raster images generated by
 * scripts/gen-clouds.mjs — Safari-perfect.
 */
---
<div class="sky-base" aria-hidden="true"></div>
<div class="sky-breathe" aria-hidden="true"></div>
<div class="sky-haze-bottom" aria-hidden="true"></div>
<div class="sun-glow" aria-hidden="true"></div>

<!-- Big foreground clouds (more prominent, sized 540-720px) -->
<div class="cloud-drift cloud-1 absolute pointer-events-none" style="top: -4%; left: -5%; width: 720px;">
  <Cloud variant={5} opacity={0.95} eager />
</div>
<div class="cloud-drift cloud-2 absolute pointer-events-none" style="top: 6%; right: -4%; width: 640px;">
  <Cloud variant={2} opacity={0.92} eager />
</div>
<div class="cloud-drift cloud-3 absolute pointer-events-none" style="top: 32%; left: 10%; width: 460px;">
  <Cloud variant={3} opacity={0.78} />
</div>
<div class="cloud-drift cloud-1 absolute pointer-events-none" style="top: 38%; right: 12%; width: 420px;">
  <Cloud variant={4} opacity={0.74} />
</div>
<div class="cloud-drift cloud-2 absolute pointer-events-none" style="top: 62%; left: 32%; width: 380px;">
  <Cloud variant={1} opacity={0.65} />
</div>
<div class="cloud-drift cloud-3 absolute pointer-events-none" style="bottom: 10%; right: 26%; width: 320px;">
  <Cloud variant={3} opacity={0.55} />
</div>

<!-- Twinkling spark -->
<svg
  aria-hidden="true"
  class="absolute pointer-events-none animate-pulse-soft"
  style="top: 18%; left: 36%; width: 14px; height: 14px;"
  viewBox="0 0 14 14" fill="none"
>
  <path d="M7 1 L8.5 5.5 L13 7 L8.5 8.5 L7 13 L5.5 8.5 L1 7 L5.5 5.5 Z" fill="rgba(255,255,255,0.9)" />
</svg>
