/* Animation keyframes (from your animation spec) */
@keyframes flowDashed { to { stroke-dashoffset: -40; } }

@keyframes pulseGlowCyan {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(34, 211, 238, 0.5)); transform: scale(1); }
  50% { filter: drop-shadow(0 0 15px rgba(34, 211, 238, 0.8)); transform: scale(1.05); }
}

@keyframes pulseGlowViolet {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(108, 92, 231, 0.5)); transform: scale(1); }
  50% { filter: drop-shadow(0 0 15px rgba(108, 92, 231, 0.8)); transform: scale(1.05); }
}

@keyframes floatNode {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.animate-flow {
  stroke-dasharray: 8 12;
  animation: flowDashed 1s linear infinite;
}
.animate-flow-slow {
  stroke-dasharray: 4 6;
  animation: flowDashed 3s linear infinite;
}

.node-cyan {
  animation: pulseGlowCyan 3s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.node-violet {
  animation: pulseGlowViolet 3s ease-in-out infinite 1.5s;
  transform-origin: center;
  transform-box: fill-box;
}

.floating-group-1 { animation: floatNode 6s ease-in-out infinite; }
.floating-group-2 { animation: floatNode 7s ease-in-out infinite 1s; }
.floating-group-3 { animation: floatNode 8s ease-in-out infinite 2s; }

/* Responsive wrapper */
.hero-anim{
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  opacity: .98;
}
.hero-anim svg{
  width: 100%;
  height: auto;
  display:block;
}