:root {
  --glow-primary: rgba(0, 184, 123, 0.6);
  --glow-secondary: rgba(49, 67, 85, 0.6);
  --neon-blue: rgba(0, 255, 255, 0.6);
}

/* 3D Background Container */
#canvas-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle at center, #2C3E50 0%, #1a252f 100%);
}

/* Glowing Effects for Buttons */
.btn-primary {
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.btn-primary:hover {
  box-shadow: 0 0 15px var(--glow-primary), 0 0 30px var(--glow-primary);
  transform: translateY(-2px);
}

.btn-pulse {
  animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 184, 123, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(0, 184, 123, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 184, 123, 0);
  }
}

/* Card Glow Effects */
.service-item, .bg-secondary, .testimonial-item {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 1px solid transparent;
}

.service-item:hover, .bg-secondary:hover {
  border-color: var(--primary);
  box-shadow: 0 0 20px var(--glow-secondary);
  transform: translateY(-5px);
}

/* Section Title Glow */
.title::after {
  box-shadow: 0 0 10px var(--light);
  transition: width 0.3s ease;
}

.title:hover::after {
  width: 100px;
  box-shadow: 0 0 15px var(--primary);
  background: var(--primary);
}

/* Floating Icons Container */
#floating-icons-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.floating-icon {
  position: absolute; /* Crucial for positioning */
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.1);
  transition: transform 0.2s ease-out, opacity 0.5s ease;
  filter: drop-shadow(0 0 5px rgba(255,255,255,0.2));
  will-change: transform;
}

.floating-icon:hover {
  color: rgba(0, 184, 123, 0.8);
  filter: drop-shadow(0 0 10px var(--primary));
  z-index: 10;
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
}

/* Ripple Effect */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  animation: ripple-animation 0.6s linear;
  pointer-events: none;
}

@keyframes ripple-animation {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* Skill Highlight Interaction */
.skill.highlighted .progress-bar {
  box-shadow: 0 0 15px currentColor;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  #canvas-container {
    display: none; /* Disable heavy 3D background */
  }
  .floating-icon {
    display: none;
  }
}