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

<defs>
  <radialGradient id={`slime-goo-${uid}`}>
    <stop offset="0" stop-color="#c8e87a" stop-opacity="0.4" />
    <stop offset="0.8" stop-color="#8cc83c" stop-opacity="0.65" />
    <stop offset="1" stop-color="#7a9e2e" stop-opacity="0.9" />
  </radialGradient>
</defs>

<!-- An irregular blob, squashing as it grips -->
<path
  class="goo" style={`transform-origin: ${c.x}px ${c.y}px`}
  fill={`url(#slime-goo-${uid})`}
  d={`M ${c.x - 13} ${c.y + 2}
     C ${c.x - 14} ${c.y - 7}, ${c.x - 6} ${c.y - 12}, ${c.x + 2} ${c.y - 10}
     C ${c.x + 10} ${c.y - 13}, ${c.x + 15} ${c.y - 4}, ${c.x + 12} ${c.y + 4}
     C ${c.x + 14} ${c.y + 10}, ${c.x + 4} ${c.y + 12}, ${c.x - 3} ${c.y + 10}
     C ${c.x - 10} ${c.y + 12}, ${c.x - 12} ${c.y + 8}, ${c.x - 13} ${c.y + 2} z`}
/>
<!-- Elastic strands stretching toward the caught -->
<g class="strands">
  <path d={`M ${c.x - 11} ${c.y - 6} Q ${c.x - 6} ${c.y - 2} ${c.x - 2} ${c.y}`} class="strand" />
  <path d={`M ${c.x + 12} ${c.y - 3} Q ${c.x + 6} ${c.y - 1} ${c.x + 2} ${c.y + 1}`} class="strand late" />
  <path d={`M ${c.x + 2} ${c.y + 10} Q ${c.x + 1} ${c.y + 5} ${c.x} ${c.y + 1}`} class="strand later" />
</g>
<circle cx={c.x + 4} cy={c.y - 5} r="2.5" class="bubble" />

<style>
  .goo { animation: goo-grip 0.9s ease-out forwards; }
  .strand {
    fill: none;
    stroke: #8fbf4d;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 20 40;
    animation: strand-snap 0.55s ease-in 0.15s forwards;
    opacity: 0;
  }
  .strand.late { animation-delay: 0.28s; }
  .strand.later { animation-delay: 0.4s; }
  .bubble {
    transform-box: fill-box;
    transform-origin: center;
    fill: none;
    stroke: #c8e87a;
    stroke-width: 1.5;
    animation: bubble-pop 0.6s ease-out 0.25s forwards;
    opacity: 0;
  }
  @keyframes goo-grip {
    0% { opacity: 0.95; transform: scale(1.3, 1.1) rotate(3deg); }
    40% { transform: scale(0.92, 1.06) rotate(-2deg); }
    70% { transform: scale(1.04, 0.96) rotate(1deg); }
    100% { opacity: 0; transform: scale(1) rotate(0deg); }
  }
  @keyframes strand-snap {
    0% { opacity: 0; stroke-dashoffset: 18; }
    30% { opacity: 0.9; stroke-dashoffset: 6; }
    75% { opacity: 0.85; stroke-dashoffset: 0; }
    100% { opacity: 0; stroke-dashoffset: -4; }
  }
  @keyframes bubble-pop {
    0% { opacity: 0; transform: scale(0.4); }
    50% { opacity: 0.9; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.8); }
  }
</style>
