@keyframes draw-path {
  0% {
    stroke-dashoffset: 2000;
    fill-opacity: 0;
  }
  70% {
    stroke-dashoffset: 0;
    fill-opacity: 0;
  }
  100% {
    stroke-dashoffset: 0;
    fill-opacity: 1;
  }
}

.logo-svg {
  width: 150%;
  height: 150%;
}

.logo-path {
  stroke: #ffffff;
  stroke-width: 2;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  fill: #ffffff;
  fill-opacity: 0;
  animation: draw-path 3s ease-in-out forwards;
  filter: drop-shadow(0 0 5px var(--logo-glow));
  transition: filter 0.5s ease;
}

.logo-container {
  position: relative;
}

.logo-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 70%, var(--logo-glow) 100%);
  opacity: 0.6;
  z-index: -1;
  animation: glow 3s infinite alternate;
}

@keyframes glow {
  0% {
    opacity: 0.4;
    box-shadow: 0 0 5px 2px var(--logo-glow);
  }
  100% {
    opacity: 0.8;
    box-shadow: 0 0 20px 5px var(--logo-glow);
  }
}

/*.interactive-logo:hover .logo-path {
  filter: drop-shadow(0 0 8px var(--logo-glow));
  transform: none;
  transition: filter 0.5s ease;
}*/

@keyframes pulse {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 0 3px var(--logo-glow));
  }
  100% {
    transform: scale(1.05);
    filter: drop-shadow(0 0 8px var(--logo-glow));
  }
}