/* Glowing Animation Effect for Selected Elements */

/* Health-based color classes */
.glow-critical { /* 0-25% health - Red */
  --glow-color-rgb: 255, 0, 0;
}

.glow-warning { /* 26-45% health - Orange */
  --glow-color-rgb: 255, 165, 0;
}

.glow-caution { /* 46-79% health - Yellow */
  --glow-color-rgb: 255, 255, 0;
}

.glow-healthy { /* 80-100% health - Green */
  --glow-color-rgb: 0, 255, 0;
}

/* Default glow color (cyan for non-health items like carousel) */
.glow-active {
  --glow-color-rgb: 0, 191, 255;
}

/* Dramatic breathing glow animation for regular elements */
@keyframes glow-breathing {
  0%, 100% {
    box-shadow: 0 0 5px 2px rgba(var(--glow-color-rgb), 0.3),
                0 0 15px 5px rgba(var(--glow-color-rgb), 0.2),
                0 0 25px 8px rgba(var(--glow-color-rgb), 0.1);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 20px 8px rgba(var(--glow-color-rgb), 0.8),
                0 0 40px 15px rgba(var(--glow-color-rgb), 0.5),
                0 0 60px 25px rgba(var(--glow-color-rgb), 0.3);
    transform: scale(1.05);
  }
}

/* Class for glowing elements */
.glow-active {
  animation: glow-breathing 1.5s ease-in-out infinite;
  position: relative;
  z-index: 100;
  transition: all 0.3s ease;
}

/* Special handling for SVG tree nodes with health-based colors */
.node polygon.glow-active,
polygon.glow-active {
  animation: glow-breathing-svg 1.2s ease-in-out infinite;
  opacity: 1;
  transition: stroke 0.2s ease;
}

polygon.glow-critical {
  stroke: #ff0000 !important;
  --glow-color-rgb: 255, 0, 0;
}

polygon.glow-warning {
  stroke: #ffa500 !important;
  --glow-color-rgb: 255, 165, 0;
}

polygon.glow-caution {
  stroke: #ffff00 !important;
  --glow-color-rgb: 255, 255, 0;
}

polygon.glow-healthy {
  stroke: #00ff00 !important;
  --glow-color-rgb: 0, 255, 0;
}

/* Additional glow layer using filter */
polygon.glow-active {
  filter: url(#glow);
}

/* More dramatic SVG pulsing with health colors - no transform to preserve positioning */
@keyframes glow-breathing-svg {
  0%, 100% {
    filter: drop-shadow(0 0 10px rgba(var(--glow-color-rgb), 0.8))
            drop-shadow(0 0 20px rgba(var(--glow-color-rgb), 0.6))
            drop-shadow(0 0 30px rgba(var(--glow-color-rgb), 0.4));
    stroke-width: 3px !important;
    opacity: 0.9;
  }
  50% {
    filter: drop-shadow(0 0 35px rgba(var(--glow-color-rgb), 1))
            drop-shadow(0 0 60px rgba(var(--glow-color-rgb), 0.9))
            drop-shadow(0 0 90px rgba(var(--glow-color-rgb), 0.7))
            drop-shadow(0 0 120px rgba(var(--glow-color-rgb), 0.5));
    stroke-width: 8px !important;
    opacity: 1;
  }
}

/* Health-based glow colors for SVG polygons */
polygon.glow-critical {
  --glow-color-rgb: 255, 0, 0;
}

polygon.glow-warning {
  --glow-color-rgb: 255, 165, 0;
}

polygon.glow-caution {
  --glow-color-rgb: 255, 255, 0;
}

polygon.glow-healthy {
  --glow-color-rgb: 0, 255, 0;
}

/* Default for non-health items */
polygon.glow-active:not(.glow-critical):not(.glow-warning):not(.glow-caution):not(.glow-healthy) {
  --glow-color-rgb: 0, 191, 255;
}

/* Accessibility: Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  .glow-active,
  polygon.glow-active {
    animation: none;
  }
  
  .glow-active {
    box-shadow: 0 0 10px 4px rgba(0, 191, 255, 0.6);
  }
  
  polygon.glow-active {
    filter: drop-shadow(0 0 8px rgba(0, 191, 255, 0.8));
  }
}

/* Carousel items - simple static blue glow outline, no animation */
.carousel-item.glow-active {
  border-radius: 8px;
  outline: none;
  box-shadow: 0 0 10px 2px rgba(0, 191, 255, 0.5),
              0 0 20px 4px rgba(0, 191, 255, 0.3);
  border: 2px solid rgba(0, 191, 255, 0.6);
  animation: none !important;
  transform: none !important;
}