<script lang="ts">
  type Props = { size?: number; flameAnimated?: boolean };
  let { size = 120, flameAnimated = true }: Props = $props();
</script>

<svg width={size} height={size} viewBox="0 0 100 140" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
  <!-- Flamme: 2 Pfade, größer + kleiner, sanft pulsierend -->
  <g class="flame" class:flame-animated={flameAnimated}>
    <path
      class="flame-outer"
      d="M35 110 Q50 145 65 110 Q60 125 50 132 Q40 125 35 110 Z"
      fill="var(--c-flame-outer)"
    />
    <path
      class="flame-inner"
      d="M42 110 Q50 130 58 110 Q55 120 50 124 Q45 120 42 110 Z"
      fill="var(--c-flame-inner)"
    />
  </g>

  <!-- Finnen -->
  <path d="M22 92 L36 75 L36 105 Z" fill="var(--c-rocket-fin)" />
  <path d="M78 92 L64 75 L64 105 Z" fill="var(--c-rocket-fin)" />

  <!-- Rumpf -->
  <path
    d="M50 8 Q72 30 72 70 L72 105 Q60 110 50 110 Q40 110 28 105 L28 70 Q28 30 50 8 Z"
    fill="var(--c-rocket-body)"
    stroke="#a83a3a"
    stroke-width="2"
  />

  <!-- Fenster -->
  <circle cx="50" cy="50" r="11" fill="var(--c-rocket-window)" stroke="#c2a230" stroke-width="2" />
  <circle cx="46" cy="46" r="3" fill="#fff" opacity="0.7" />

  <!-- Bandage am Rumpf -->
  <rect x="28" y="78" width="44" height="6" fill="#c2a230" rx="2" />
</svg>

<style>
  .flame-animated {
    transform-origin: 50px 110px;
    animation: flicker 0.32s steps(2) infinite;
  }
  @keyframes flicker {
    0%, 100% { transform: scaleY(1); }
    50%      { transform: scaleY(0.78); }
  }
</style>
