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

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

<defs>
  <radialGradient id={`shield-dome-${uid}`}>
    <stop offset="0" stop-color="#ffe9a3" stop-opacity="0" />
    <stop offset="0.75" stop-color="#ffdf7a" stop-opacity="0.25" />
    <stop offset="1" stop-color="#c9a72a" stop-opacity="0.9" />
  </radialGradient>
  <filter id={`shield-glow-${uid}`} x="-80%" y="-80%" width="260%" height="260%">
    <feGaussianBlur stdDeviation="3" result="blur" />
    <feMerge><feMergeNode in="blur" /><feMergeNode in="SourceGraphic" /></feMerge>
  </filter>
</defs>

<circle cx={c.x} cy={c.y} r="16" fill={`url(#shield-dome-${uid})`} class="dome" filter={`url(#shield-glow-${uid})`} />
<circle cx={c.x} cy={c.y} r="16" class="rim" />

<style>
  .dome {
    transform-box: fill-box;
    transform-origin: center;
    animation: dome 0.7s ease-out forwards;
  }
  .rim {
    transform-box: fill-box;
    transform-origin: center;
    fill: none;
    stroke: #fff3c4;
    stroke-width: 2;
    animation: rim-strike 0.7s ease-out forwards;
  }
  @keyframes dome {
    0% { opacity: 0; transform: scale(0.6); }
    30% { opacity: 1; transform: scale(1.1); }
    60% { transform: scale(0.95); }
    100% { opacity: 0; transform: scale(1.15); }
  }
  @keyframes rim-strike {
    0% { opacity: 0; transform: scale(0.6); }
    28% { opacity: 1; transform: scale(1.12); }
    45% { opacity: 0.4; }
    58% { opacity: 0.9; transform: scale(0.95); }
    100% { opacity: 0; transform: scale(1.18); }
  }
</style>
