<script lang="ts">
  import type { FxOf } from "../fx";
  import { center } from "./geom";

  let { fx }: { fx: FxOf<"shimmer"> } = $props();
  const c = $derived(center(fx.at));
</script>

<circle cx={c.x} cy={c.y} r="6" class="ring" />
<circle cx={c.x} cy={c.y} r="6" class="ring late" />
<g class="motes">
  <circle cx={c.x - 8} cy={c.y - 8} r="1.5" />
  <circle cx={c.x + 9} cy={c.y - 4} r="1.2" class="late" />
  <circle cx={c.x - 3} cy={c.y + 9} r="1.3" class="later" />
</g>

<style>
  .ring {
    transform-box: fill-box;
    transform-origin: center;
    fill: none;
    stroke: #b48ae0;
    stroke-width: 2.5;
    animation: ring 0.6s ease-out forwards;
  }
  .ring.late { stroke: #e2c8ff; animation-delay: 0.18s; opacity: 0; }
  .motes circle { fill: #e2c8ff; animation: mote 0.7s ease-out forwards; }
  .motes .late { animation-delay: 0.1s; opacity: 0; }
  .motes .later { animation-delay: 0.18s; opacity: 0; }
  @keyframes ring {
    0% { opacity: 0.95; transform: scale(1); }
    100% { opacity: 0; transform: scale(5); }
  }
  @keyframes mote {
    0% { opacity: 0; transform: translateY(0); }
    30% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-12px); }
  }
</style>
