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

  let { fx }: { fx: FxOf<"ooze-slip"> } = $props();
  const uid = $props.id();
  const c = $derived(center(fx.at));
</script>

<defs>
  <radialGradient id={`ooze-splat-${uid}`}>
    <stop offset="0" stop-color="#a5cc60" stop-opacity="0.8" />
    <stop offset="0.7" stop-color="#6ea03c" stop-opacity="0.55" />
    <stop offset="1" stop-color="#4a7024" stop-opacity="0" />
  </radialGradient>
</defs>

<ellipse cx={c.x} cy={c.y + 8} rx="14" ry="5.5" fill={`url(#ooze-splat-${uid})`} class="splat" />
<g class="blobs">
  <circle cx={c.x - 12} cy={c.y + 3} r="2.5" class="blob" />
  <circle cx={c.x + 11} cy={c.y + 2} r="2" class="blob late" />
  <circle cx={c.x + 3} cy={c.y - 3} r="1.7" class="blob later" />
</g>

<style>
  .splat {
    transform-box: fill-box;
    transform-origin: center;
    animation: splat-wobble 0.7s ease-out forwards;
  }
  .blob { fill: #8fbf4d; animation: blob-fly 0.55s ease-out forwards; }
  .blob.late { animation-delay: 0.06s; }
  .blob.later { animation-delay: 0.12s; }
  @keyframes splat-wobble {
    0% { opacity: 0.95; transform: scale(0.5, 1); }
    35% { transform: scale(1.3, 0.85); }
    65% { transform: scale(0.9, 1.05); }
    100% { opacity: 0; transform: scale(1.15, 0.95); }
  }
  @keyframes blob-fly {
    0% { opacity: 0.9; transform: translateY(0); }
    50% { transform: translateY(-7px); }
    100% { opacity: 0; transform: translateY(2px); }
  }
</style>
