/* Neon Vector Icons - Animations & Styles */

.neon-icon {
  display: inline-block;
  width: 64px;
  height: 64px;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.neon-icon-sm {
  width: 32px;
  height: 32px;
}

.neon-icon-lg {
  width: 96px;
  height: 96px;
}

.neon-icon-xl {
  width: 128px;
  height: 128px;
}

/* Hover Effects */
.neon-icon:hover {
  transform: scale(1.1);
  filter: brightness(1.3) drop-shadow(0 0 10px currentColor);
}

/* Animated Icons */
@keyframes radar-sweep {
  from {
    transform: rotate(0deg);
    transform-origin: 50% 50%;
  }
  to {
    transform: rotate(360deg);
    transform-origin: 50% 50%;
  }
}

.neon-icon.animate-radar #icon-radar line:first-of-type {
  animation: radar-sweep 3s linear infinite;
  transform-origin: 50% 50%;
}

@keyframes pulse-glow {
  0%, 100% {
    filter: drop-shadow(0 0 5px currentColor);
  }
  50% {
    filter: drop-shadow(0 0 15px currentColor);
  }
}

.neon-icon.animate-pulse {
  animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes rocket-boost {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.neon-icon.animate-rocket {
  animation: rocket-boost 1.5s ease-in-out infinite;
}

@keyframes rotate-dna {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

.neon-icon.animate-dna {
  animation: rotate-dna 6s linear infinite;
  transform-style: preserve-3d;
}

@keyframes sparkle {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

.neon-icon.animate-sparkle circle:last-child {
  animation: sparkle 1.5s ease-in-out infinite;
}

/* Color Variations */
.neon-icon-cyan {
  color: #00ffff;
}

.neon-icon-magenta {
  color: #d4af37;
}

.neon-icon-lime {
  color: #00ff00;
}

.neon-icon-gold {
  color: #d4af37;
}

.neon-icon-orange {
  color: #ff6b35;
}

.neon-icon-yellow {
  color: #ffff00;
}

/* Integration with existing neon-card system */
.feature-icon.neon-vector {
  width: 64px;
  height: 64px;
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-icon.neon-vector svg {
  width: 100%;
  height: 100%;
}

/* Tab icons */
.tab-icon.neon-vector {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Dashboard icons */
.dashboard-icon.neon-vector {
  width: 80px;
  height: 80px;
  margin: 0 auto 1rem;
}

/* Responsive sizing */
@media (max-width: 768px) {
  .neon-icon {
    width: 48px;
    height: 48px;
  }
  
  .neon-icon-lg {
    width: 64px;
    height: 64px;
  }
  
  .feature-icon.neon-vector {
    width: 48px;
    height: 48px;
  }
}