---
/**
 * Decorative outlined SVG sparks/clouds inspired by Adora's
 * "abstract, outlined decorative elements" pattern. Positioned
 * absolute inside a relative parent. Aria-hidden, no JS.
 */
---
<svg
  aria-hidden="true"
  class="absolute pointer-events-none"
  style="top: 14%; left: 6%; width: 64px; height: 64px;"
  viewBox="0 0 64 64" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"
>
  <path d="M32 6 L36 28 L58 32 L36 36 L32 58 L28 36 L6 32 L28 28 Z" stroke="var(--neon-pink)" />
</svg>

<svg
  aria-hidden="true"
  class="absolute pointer-events-none"
  style="top: 22%; right: 8%; width: 84px; height: 84px;"
  viewBox="0 0 84 84" fill="none"
>
  <circle cx="42" cy="42" r="20" stroke="var(--aqua-blue)" stroke-width="1.6" fill="none"/>
  <circle cx="42" cy="42" r="34" stroke="var(--aqua-blue)" stroke-width="1.2" stroke-dasharray="3 5" fill="none" opacity="0.55"/>
</svg>

<svg
  aria-hidden="true"
  class="absolute pointer-events-none"
  style="bottom: 18%; left: 10%; width: 56px; height: 56px;"
  viewBox="0 0 56 56" fill="none"
>
  <path d="M8 32 Q8 22 18 22 Q22 12 32 14 Q42 12 46 22 Q56 22 56 32 Q56 42 46 42 L18 42 Q8 42 8 32 Z"
        stroke="var(--neon-pink)" stroke-width="1.6" fill="none" />
</svg>

<svg
  aria-hidden="true"
  class="absolute pointer-events-none"
  style="bottom: 22%; right: 12%; width: 48px; height: 48px;"
  viewBox="0 0 48 48" fill="none"
>
  <path d="M24 4 L28 20 L44 24 L28 28 L24 44 L20 28 L4 24 L20 20 Z" fill="var(--electric-green)" />
</svg>

<svg
  aria-hidden="true"
  class="absolute pointer-events-none"
  style="top: 48%; left: 2%; width: 28px; height: 28px;"
  viewBox="0 0 28 28" fill="none"
>
  <circle cx="14" cy="14" r="6" fill="var(--action-violet, #592eff)" opacity="0.85"/>
</svg>
