<script lang="ts">
    interface Props {
        class?: string;
    }

    let { class: className = "" }: Props = $props();
</script>

<svg
    class="text-kv-yellow {className}"
    viewBox="0 0 128 128"
    fill="currentColor"
    xmlns="http://www.w3.org/2000/svg"
>
    <path
        d="M41.1692 53.4247L69.1227 18.3469L69.6477 17.6762C72.1759 14.3139 73.9344 10.0017 74.8782 4.68266L75.3597 0.603516H120.912L112.11 5.67812C108.463 8.11385 104.833 11.5122 101.228 15.9036L66.1687 58.5571L100.949 109.253C104.122 113.783 107.03 117.183 109.669 119.496C112.414 121.688 115.611 123.454 119.273 124.785L118.812 127.396H73.6992L74.2347 125.654C74.6513 124.301 74.865 122.827 74.865 121.224C74.865 119.433 74.5497 117.765 73.9268 116.208L73.9124 116.171L73.8992 116.133C73.381 114.58 72.4248 112.807 70.9807 110.809L70.9702 110.794L70.9609 110.78L41.1692 67.1546V108.469C41.1693 115.27 42.7295 120.85 45.7641 125.291L47.2023 127.396H7.22473L8.70898 125.278C10.2229 123.116 11.3047 120.739 11.9551 118.139L11.9591 118.122L11.9644 118.103C12.7285 115.376 13.121 112.17 13.121 108.469V18.4968C13.121 12.4177 11.5774 7.17358 8.5274 2.71015L7.08789 0.603516H47.6141L46.0917 2.73251C42.8134 7.31921 41.1692 12.5587 41.1692 18.4968V53.4247Z"
    />
</svg>

<style>
    svg {
        animation: spin-k 2s cubic-bezier(0.67, -0.42, 0.1, 1.29) infinite;
        filter: drop-shadow(6px 6px 4px rgba(0, 0, 0, 0.5));
    }

    @keyframes spin-k {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
</style>
