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

  let { fx }: { fx: FxOf<"dust-puff" | "edge-dust"> } = $props();
  const uid = $props.id();
  const c = $derived.by(() => {
    if (fx.kind === "dust-puff") return center(fx.at);
    const mid = center(fx.cell);
    if (fx.side === "N") return { x: mid.x, y: fx.cell.y * CELL };
    if (fx.side === "S") return { x: mid.x, y: (fx.cell.y + 1) * CELL };
    if (fx.side === "W") return { x: fx.cell.x * CELL, y: mid.y };
    return { x: (fx.cell.x + 1) * CELL, y: mid.y };
  });
</script>

<defs>
  <radialGradient id={`dust-soft-${uid}`}>
    <stop offset="0" stop-color="#b5a88e" stop-opacity="0.85" />
    <stop offset="1" stop-color="#8d8266" stop-opacity="0" />
  </radialGradient>
</defs>

<circle cx={c.x - 6} cy={c.y} r="6" fill={`url(#dust-soft-${uid})`} class="dust" />
<circle cx={c.x + 5} cy={c.y - 3} r="5" fill={`url(#dust-soft-${uid})`} class="dust late" />
<circle cx={c.x} cy={c.y + 4} r="5.5" fill={`url(#dust-soft-${uid})`} class="dust later" />
<g class="grit">
  <circle cx={c.x - 4} cy={c.y - 5} r="1" />
  <circle cx={c.x + 6} cy={c.y + 2} r="1.2" />
  <circle cx={c.x + 1} cy={c.y - 2} r="0.8" />
</g>

<style>
  .dust {
    transform-box: fill-box;
    transform-origin: center;
    animation: drift 0.75s ease-out forwards;
  }
  .dust.late { animation-delay: 0.09s; }
  .dust.later { animation-delay: 0.17s; }
  .grit circle { fill: #6e6450; animation: grit-fall 0.6s ease-in forwards; }
  @keyframes drift {
    0% { opacity: 0.9; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-12px) scale(2); }
  }
  @keyframes grit-fall {
    0% { opacity: 0.9; transform: translateY(-3px); }
    100% { opacity: 0; transform: translateY(7px); }
  }
</style>
