<template>
  <svg 
    viewBox="0 0 32 32" 
    xmlns="http://www.w3.org/2000/svg"
    :class="{ 'is-animated': animated }"
    class="base-logo-svg"
    >
    <defs>
      <radialGradient id="logo-gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
        <stop offset="0%" stop-color="white" />
        <stop offset="25%" stop-color="var(--q-primary, #1976D2)" stop-opacity="0.5" />
        <stop offset="50%" stop-color="var(--q-primary, #1976D2)">
          <animate 
            attributeName="offset" 
            values="1;0.6;1" 
            dur="6s" 
            repeatCount="indefinite" 
          />
        </stop>
      </radialGradient>
    </defs>

    <rect class="logo-bg" width="32" height="32" rx="4" ry="4" fill="url(#logo-gradient)" />
    
    <circle class="x" cx="16" cy="16" r="6" style="--t:scale(1.2)" fill="currentColor" />
    <circle class="c" cx="7" cy="7" r="3" style="--t:translate(9px,9px)" fill="currentColor" />
    <circle class="c" cx="28" cy="4" r="2" style="--t:translate(-12px,12px)" fill="currentColor" />
    <circle class="c" cx="6" cy="26" r="4" style="--t:translate(10px,-10px)" fill="currentColor" />
    <circle class="c" cx="26" cy="26" r="5" style="--t:translate(-10px,-10px)" fill="currentColor" />
    
    <line class="l" x1="16" y1="16" x2="7" y2="7" pathLength="1" stroke="currentColor" />
    <line class="l" x1="16" y1="16" x2="28" y2="4" pathLength="1" stroke="currentColor" />
    <line class="l" x1="16" y1="16" x2="6" y2="26" pathLength="1" stroke="currentColor" />
    <line class="l" x1="16" y1="16" x2="26" y2="26" pathLength="1" stroke="currentColor" />
  </svg>
</template>

<script setup lang="ts">
  defineProps({
    animated: {
      type: Boolean,
      default: true
    }
  })
</script>

<style lang="scss" scoped>
  .base-logo-svg {
    .x, .c { transform-box: fill-box; }
    .l { stroke-width: 1.5; }

    &.is-animated {
      .x { animation: expand-r 6s infinite; }
      .c { animation: o 6s infinite; }
      .l {
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
        animation: draw 6s infinite;
      }
    }
  }

  @keyframes expand-r { 50% { r: 8px; } }
  @keyframes o { 50% { transform: var(--t); } }
  @keyframes draw {
    0%, 100% { stroke-dashoffset: 0; }
    50% { stroke-dashoffset: 1; }
  }
</style>
