<script lang="ts">
  import type { FxOf } from "../fx";
  import { center } from "./geom";
  let { fx }: { fx: FxOf<"chaos-swirl"> } = $props();
  const c = $derived(center(fx.at));
</script>

<g class="chaos" style={`transform-origin: ${c.x}px ${c.y}px`}>
  <circle cx={c.x} cy={c.y} r="30" />
  <circle cx={c.x} cy={c.y} r="55" class="mid" />
  <circle cx={c.x} cy={c.y} r="80" class="outer" />
</g>

<style>
  .chaos circle {
    fill: none;
    stroke: #b48ae0;
    stroke-width: 4;
    stroke-dasharray: 30 22;
  }
  .chaos .mid { stroke: #8a5fc0; stroke-dasharray: 44 30; }
  .chaos .outer { stroke: #e2c8ff; stroke-dasharray: 60 40; }
  .chaos { animation: chaos-spin 1.4s ease-in-out forwards; }
  @keyframes chaos-spin {
    0% { opacity: 0; transform: rotate(0deg) scale(0.6); }
    20% { opacity: 1; }
    100% { opacity: 0; transform: rotate(200deg) scale(1.5); }
  }
</style>
