FuryStackLogo.astro

---
interface Props {
  size?: number;
}

const { size = 96 } = Astro.props;
---

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 512 512"
  width={size}
  height={size}
  aria-hidden="true"
  class="furystack-logo"
>
  <title>FuryStack</title>
  <defs>
    <linearGradient id="fs-silver" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#FFFFFF"></stop>
      <stop offset="100%" stop-color="#94A3B8"></stop>
    </linearGradient>

    <linearGradient id="fs-blue" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#60A5FA"></stop>
      <stop offset="100%" stop-color="#1D4ED8"></stop>
    </linearGradient>

    <linearGradient id="fs-dark" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#475569"></stop>
      <stop offset="100%" stop-color="#0F172A"></stop>
    </linearGradient>

    <filter id="fs-glow" x="-20%" y="-20%" width="140%" height="140%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="8" result="blur"></feGaussianBlur>
      <feOffset dx="0" dy="4" result="offsetBlur"></feOffset>
      <feFlood flood-color="#3B82F6" flood-opacity="0.2" result="glowColor"></feFlood>
      <feComposite in="glowColor" in2="offsetBlur" operator="in" result="shadow"></feComposite>
      <feMerge>
        <feMergeNode in="shadow"></feMergeNode>
        <feMergeNode in="SourceGraphic"></feMergeNode>
      </feMerge>
    </filter>
  </defs>

  <g filter="url(#fs-glow)">
    <!-- Left Pillar (Base) -->
    <path d="M40 80 L120 160 V440 A8 8 0 0 1 112 448 H48 A8 8 0 0 1 40 440 Z" fill="url(#fs-silver)"
    ></path>

    <!-- Connection Bridge -->
    <path d="M140 180 L220 260 L140 340 Z" fill="url(#fs-blue)"></path>

    <!-- Stack Step 1 -->
    <path
      d="M230 320 L310 240 V440 A8 8 0 0 1 302 448 H238 A8 8 0 0 1 230 440 Z"
      fill="url(#fs-blue)"></path>

    <!-- Stack Step 2 -->
    <path
      d="M330 220 L410 140 V440 A8 8 0 0 1 402 448 H338 A8 8 0 0 1 330 440 Z"
      fill="url(#fs-blue)"></path>

    <!-- Stack Step 3 (Anchor) -->
    <path
      d="M430 120 L510 40 V440 A8 8 0 0 1 502 448 H438 A8 8 0 0 1 430 440 Z"
      fill="url(#fs-dark)"></path>

    <!-- Top Accent (Floating Element) -->
    <path d="M180 120 H340 L260 200 Z" fill="url(#fs-silver)" opacity="0.9"></path>

    <!-- Lower Detail (Alignment Piece) -->
    <path d="M140 448 H210 L140 378 Z" fill="url(#fs-silver)"></path>
  </g>
</svg>
<style>
  /* Base transitions for hover effects if needed later */
  .furystack-logo {
    overflow: visible; /* Allow glow to spill out */
  }

  /* Animations */
  @media (prefers-reduced-motion: no-preference) {
    .fs-shape {
      transform-box: fill-box;
      transform-origin: bottom center;
      opacity: 0;
      animation-duration: 0.8s;
      animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
      animation-fill-mode: forwards;
    }

    .fs-slide-right {
      animation-name: fs-slide-right;
      transform-origin: center center;
    }

    .fs-fade-down {
      animation-name: fs-fade-down;
      transform-origin: top center;
    }

    .fs-grow-up {
      animation-name: fs-grow-up;
    }

    .fs-delay-1 {
      animation-delay: 0.1s;
    }
    .fs-delay-2 {
      animation-delay: 0.2s;
    }
    .fs-delay-3 {
      animation-delay: 0.3s;
    }
    .fs-delay-4 {
      animation-delay: 0.4s;
    }

    @keyframes fs-slide-right {
      from {
        opacity: 0;
        transform: translateX(-20px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes fs-fade-down {
      from {
        opacity: 0;
        transform: translateY(-20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes fs-grow-up {
      from {
        opacity: 0;
        transform: scaleY(0.4);
      }
      to {
        opacity: 1;
        transform: scaleY(1);
      }
    }
  }
</style>