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

<ellipse cx={c.x} cy={c.y + 8} rx="13" ry="5" class="ooze" />

<style>
  .ooze {
    transform-box: fill-box;
    transform-origin: center;
    fill: rgba(110, 160, 60, 0.55);
    animation: wobble 0.7s ease-out forwards;
  }
  @keyframes wobble {
    0% { opacity: 0.9; transform: scaleX(0.6); }
    35% { transform: scaleX(1.25); }
    65% { transform: scaleX(0.9); }
    100% { opacity: 0; transform: scaleX(1.1); }
  }
</style>
