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

  let { fx }: { fx: FxOf<"claw"> } = $props();
  const uid = $props.id();
  const c = $derived(center(fx.at));
  const GASHES = [
    { x: -12, cls: "g0" },
    { x: -3, cls: "g1" },
    { x: 6, cls: "g2" },
  ];
</script>

<defs>
  <linearGradient id={`claw-cut-${uid}`} x1="0" y1="0" x2="0" y2="1">
    <stop offset="0" stop-color="#e0604f" />
    <stop offset="0.5" stop-color="#b3372b" />
    <stop offset="1" stop-color="#6e1a12" />
  </linearGradient>
</defs>

<g class="claw">
  {#each GASHES as g (g.cls)}
    <g class={`gash ${g.cls}`} style={`transform-origin: ${c.x + g.x}px ${c.y - 15}px`}>
      <path
        d={`M ${c.x + g.x} ${c.y - 14} q 4 12 10 26 q -1 1 -2 0 q -7 -13 -11 -25 z`}
        fill={`url(#claw-cut-${uid})`}
      />
      <path
        d={`M ${c.x + g.x} ${c.y - 14} q 4 12 10 26`}
        class="edge" pathLength="100"
      />
    </g>
  {/each}
</g>

<style>
  /* Each slash reveals downward along its own length, in sequence,
     while the whole strike rakes a little sideways. */
  .gash { opacity: 0; animation: gash-cut 0.4s ease-out forwards; }
  .gash.g1 { animation-delay: 0.06s; }
  .gash.g2 { animation-delay: 0.12s; }
  .edge {
    fill: none;
    stroke: #ffd9c4;
    stroke-width: 1.4;
    stroke-dasharray: 100 100;
    stroke-dashoffset: 100;
    animation: edge-draw 0.28s ease-out forwards;
  }
  .gash.g1 .edge { animation-delay: 0.06s; }
  .gash.g2 .edge { animation-delay: 0.12s; }
  .claw { animation: rake 0.55s ease-out forwards; }
  @keyframes gash-cut {
    0% { opacity: 0; transform: scaleY(0.1); }
    30% { opacity: 1; transform: scaleY(1.05); }
    100% { opacity: 0.9; transform: scaleY(1); }
  }
  @keyframes edge-draw {
    0% { stroke-dashoffset: 100; opacity: 1; }
    70% { stroke-dashoffset: 0; opacity: 0.9; }
    100% { stroke-dashoffset: 0; opacity: 0; }
  }
  @keyframes rake {
    0% { opacity: 1; transform: translate(2px, -3px); }
    60% { opacity: 1; transform: translate(-2px, 2px); }
    100% { opacity: 0; transform: translate(-3px, 3px); }
  }
</style>
