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

  let { fx }: { fx: FxOf<"streak"> } = $props();
  const a = $derived(fx.a);
  const b = $derived(fx.b);
  const d = $derived(`M ${a.x} ${a.y} L ${b.x} ${b.y}`);
</script>

<path {d} pathLength="100" class="trail wide" />
<path {d} pathLength="100" class="trail bright" />
<circle r="4" class="head" cx="0" cy="0">
  <animateMotion dur="0.38s" fill="freeze" path={d} calcMode="spline"
    keySplines="0.3 0 0.4 1" keyTimes="0;1" keyPoints="0;1" />
</circle>

<style>
  .trail {
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 100 100;
    animation: draw-collapse 0.68s ease-out forwards;
  }
  .trail.wide { stroke: rgba(233, 225, 203, 0.3); stroke-width: 5; }
  .trail.bright { stroke: rgba(255, 253, 240, 0.75); stroke-width: 2; }
  .head {
    fill: #fffdf0;
    animation: head-life 0.6s ease-out forwards;
  }
  /* Draw from source to head, then the tail chases it into the destination. */
  @keyframes draw-collapse {
    0% { stroke-dashoffset: 100; opacity: 0.95; }
    56% { stroke-dashoffset: 0; opacity: 0.95; }
    100% { stroke-dashoffset: -100; opacity: 0; }
  }
  @keyframes head-life {
    0% { opacity: 0; }
    12% { opacity: 1; }
    60% { opacity: 1; }
    100% { opacity: 0; }
  }
</style>
