/* 
   BitSafariX Hero Section Particle Effects
   Additional CSS for particle animations
*/

/* Particle container */
.particle-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

/* Individual particles */
.particle {
  position: absolute;
  background-color: rgba(245, 185, 65, 0.3);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  animation: particleFloat 15s linear infinite;
}

/* Particle animation */
@keyframes particleFloat {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 0.5;
  }
  90% {
    opacity: 0.5;
  }
  100% {
    transform: translateY(-100px) translateX(100px);
    opacity: 0;
  }
}

/* Enhanced node hover effects */
.network-visual .node-hover {
  transform: scale(1.2) !important;
  box-shadow: 0 0 25px rgba(245, 185, 65, 0.8) !important;
  z-index: 10;
  transition: all 0.3s ease-out;
}

/* Enhanced connector active state */
.network-visual .connector-active {
  box-shadow: 0 0 15px rgba(245, 185, 65, 0.8) !important;
  z-index: 9;
}

.network-visual .connector-active::after {
  opacity: 1 !important;
  animation-duration: 2s !important;
}

/* Mouse position CSS variables for JS interaction */
.hero {
  --mouse-x: 0.5;
  --mouse-y: 0.5;
}

/* Background subtle shift based on mouse position */
.hero::before {
  transition: transform 0.5s ease-out;
  transform: translate(
    calc(var(--mouse-x) * -20px),
    calc(var(--mouse-y) * -20px)
  );
}

/* Smooth transitions for node movements */
.network-visual .node {
  transition: transform 0.8s ease-out, box-shadow 0.3s ease-out;
}

/* Animation trigger class */
.hero.animate .hero-content,
.hero.animate .network-visual,
.hero.animate h1 span,
.hero.animate .hero-description,
.hero.animate .cta-buttons {
  animation-play-state: running;
}

/* Initial state before animations */
.hero:not(.animate) .hero-content,
.hero:not(.animate) .network-visual,
.hero:not(.animate) h1 span,
.hero:not(.animate) .hero-description,
.hero:not(.animate) .cta-buttons {
  animation-play-state: paused;
  opacity: 0;
}

/* Optimize animations for performance */
@media (max-width: 768px) {
  .particle-container {
    display: none; /* Disable particles on mobile for better performance */
  }
  
  .hero::before {
    transform: none !important; /* Disable parallax on mobile */
  }
  
  .network-visual .node {
    transform: none !important; /* Disable node movement on mobile */
  }
}