/* Codalyx Custom Icons Design System */

:root {
  --icon-primary: #00f2ff;
  --icon-secondary: #0066ff;
  --icon-glow: rgba(0, 242, 255, 0.4);
  --icon-stroke-width: 1.5px;
}

.custom-icon {
  display: inline-block;
  vertical-align: middle;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  filter: drop-shadow(0 0 5px var(--icon-glow));
}

.custom-icon:hover {
  transform: scale(1.1) rotate(2deg);
  filter: drop-shadow(0 0 12px var(--icon-glow));
}

.icon-gradient-stop-1 { stop-color: var(--icon-primary); }
.icon-gradient-stop-2 { stop-color: var(--icon-secondary); }

/* Animation for certain icons */
@keyframes icon-pulse {
  0% { opacity: 0.8; filter: drop-shadow(0 0 5px var(--icon-glow)); }
  50% { opacity: 1; filter: drop-shadow(0 0 15px var(--icon-glow)); }
  100% { opacity: 0.8; filter: drop-shadow(0 0 5px var(--icon-glow)); }
}

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

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

.icon-animate-spin {
  animation: icon-spin 10s infinite linear;
}

@keyframes icon-float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-3px); }
  100% { transform: translateY(0px); }
}

.icon-animate-float {
  animation: icon-float 3s infinite ease-in-out;
}