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

<g class="bush" style={`transform-origin: ${c.x}px ${c.y + 10}px`}>
  <!-- Three springing branches, thorn spurs along each -->
  <g class="branch b0" style={`transform-origin: ${c.x}px ${c.y + 10}px`}>
    <path d={`M ${c.x} ${c.y + 10} q -8 -10 -13 -20`} class="stem" />
    <path d={`M ${c.x - 6} ${c.y + 1} l -4 -1 M ${c.x - 10} ${c.y - 6} l -4 0`} class="spur" />
  </g>
  <g class="branch b1" style={`transform-origin: ${c.x}px ${c.y + 10}px`}>
    <path d={`M ${c.x} ${c.y + 10} q 1 -13 -1 -24`} class="stem" />
    <path d={`M ${c.x} ${c.y - 2} l 4 -2 M ${c.x - 1} ${c.y - 9} l -4 -2`} class="spur" />
  </g>
  <g class="branch b2" style={`transform-origin: ${c.x}px ${c.y + 10}px`}>
    <path d={`M ${c.x} ${c.y + 10} q 9 -9 15 -18`} class="stem" />
    <path d={`M ${c.x + 7} ${c.y + 2} l 4 -1 M ${c.x + 12} ${c.y - 4} l 4 1`} class="spur" />
  </g>
</g>
<g class="leaves">
  <ellipse cx={c.x - 12} cy={c.y - 10} rx="3" ry="1.6" class="leaf" transform={`rotate(-30 ${c.x - 12} ${c.y - 10})`} />
  <ellipse cx={c.x + 13} cy={c.y - 8} rx="2.6" ry="1.4" class="leaf late" transform={`rotate(40 ${c.x + 13} ${c.y - 8})`} />
</g>

<style>
  .stem {
    fill: none;
    stroke: #467832;
    stroke-width: 2.5;
    stroke-linecap: round;
  }
  .spur {
    stroke: #2f5423;
    stroke-width: 1.6;
    stroke-linecap: round;
  }
  .branch { animation: spring 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) forwards; opacity: 0; }
  .branch.b1 { animation-delay: 0.05s; }
  .branch.b2 { animation-delay: 0.1s; }
  .bush { animation: bush-fade 0.7s ease-out forwards; }
  .leaf { fill: #7fae55; animation: leaf-fall 0.7s ease-in 0.15s forwards; opacity: 0; }
  .leaf.late { animation-delay: 0.24s; }
  @keyframes spring {
    0% { opacity: 0; transform: scaleY(0.15); }
    60% { opacity: 1; transform: scaleY(1.12); }
    100% { opacity: 1; transform: scaleY(1); }
  }
  @keyframes bush-fade {
    0%, 70% { opacity: 1; }
    100% { opacity: 0; }
  }
  @keyframes leaf-fall {
    0% { opacity: 0; transform: translateY(0) rotate(0deg); }
    25% { opacity: 0.9; }
    100% { opacity: 0; transform: translateY(10px) rotate(50deg); }
  }
</style>
