/**
 * Cyberpunk Sparkle Effects Styles
 * Enhanced sparkle animations and explosion effects
 */

/* Main Sparkle Styles */
.sparkle {
  position: fixed;
  width: 6px;
  height: 6px;
  background: var(--neon);
  border-radius: 50%;
  pointer-events: none;
  z-index: 100;
  opacity: 0;
  animation: sparkle-fade 3s ease-in-out forwards;
  box-shadow: 0 0 12px var(--neon),
              0 0 24px var(--neon),
              0 0 36px color-mix(in oklab, var(--neon) 80%, transparent),
              0 0 48px color-mix(in oklab, var(--neon) 40%, transparent);
}

.sparkle.pink {
  background: var(--neon-2);
  box-shadow: 0 0 15px var(--neon-2),
              0 0 30px var(--neon-2),
              0 0 45px color-mix(in oklab, var(--neon-2) 80%, transparent),
              0 0 60px color-mix(in oklab, var(--neon-2) 40%, transparent);
}

.sparkle.beam {
  width: 60px;
  height: 3px;
  border-radius: 1.5px;
  background: linear-gradient(90deg, transparent 0%, var(--neon) 20%, var(--neon-2) 40%, #fff 50%, var(--neon-2) 60%, var(--neon) 80%, transparent 100%);
  animation: beam-sparkle 2s ease-in-out forwards;
  box-shadow: 0 0 20px var(--neon),
              0 0 40px color-mix(in oklab, var(--neon) 60%, transparent),
              0 0 60px color-mix(in oklab, var(--neon-2) 40%, transparent);
}

/* Explosion Sparkle Styles */
.explosion-sparkle {
  position: fixed;
  width: 8px;
  height: 8px;
  background: var(--neon);
  border-radius: 50%;
  pointer-events: none;
  z-index: 200;
  opacity: 0;
  animation: explosion-fade 1.5s ease-out forwards;
  box-shadow: 0 0 20px var(--neon),
              0 0 40px var(--neon),
              0 0 60px color-mix(in oklab, var(--neon) 90%, transparent),
              0 0 80px color-mix(in oklab, var(--neon) 50%, transparent);
}

.explosion-sparkle.pink {
  background: var(--neon-2);
  box-shadow: 0 0 25px var(--neon-2),
              0 0 50px var(--neon-2),
              0 0 75px color-mix(in oklab, var(--neon-2) 90%, transparent),
              0 0 100px color-mix(in oklab, var(--neon-2) 50%, transparent);
}

.explosion-beam {
  position: fixed;
  width: 120px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--neon) 15%, var(--neon-2) 35%, #fff 50%, var(--neon-2) 65%, var(--neon) 85%, transparent 100%);
  pointer-events: none;
  z-index: 200;
  opacity: 0;
  animation: explosion-beam-fade 1s ease-out forwards;
  box-shadow: 0 0 30px var(--neon),
              0 0 60px color-mix(in oklab, var(--neon-2) 80%, transparent),
              0 0 90px color-mix(in oklab, var(--neon) 40%, transparent);
}

/* Sparkle Animations */
@keyframes sparkle-fade {
  0% {
    opacity: 0;
    transform: scale(0) rotate(0deg);
  }
  15% {
    opacity: 0.7;
    transform: scale(1.3) rotate(60deg);
  }
  30% {
    opacity: 1;
    transform: scale(1.5) rotate(120deg);
  }
  70% {
    opacity: 0.9;
    transform: scale(1.2) rotate(300deg);
  }
  85% {
    opacity: 0.5;
    transform: scale(0.7) rotate(340deg);
  }
  100% {
    opacity: 0;
    transform: scale(0) rotate(360deg);
  }
}

@keyframes beam-sparkle {
  0% {
    opacity: 0;
    transform: translateX(-50px) scale(0.5);
  }
  30% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  70% {
    opacity: 0.7;
    transform: translateX(50px) scale(0.8);
  }
  100% {
    opacity: 0;
    transform: translateX(100px) scale(0);
  }
}

@keyframes explosion-fade {
  0% {
    opacity: 0;
    transform: scale(0) rotate(0deg);
  }
  8% {
    opacity: 0.8;
    transform: scale(2.2) rotate(30deg);
  }
  15% {
    opacity: 1;
    transform: scale(2.5) rotate(80deg);
  }
  40% {
    opacity: 0.95;
    transform: scale(1.8) rotate(200deg);
  }
  75% {
    opacity: 0.7;
    transform: scale(1.3) rotate(320deg);
  }
  100% {
    opacity: 0;
    transform: scale(0) rotate(360deg);
  }
}

@keyframes explosion-beam-fade {
  0% {
    opacity: 0;
    transform: scale(0) rotate(0deg);
  }
  20% {
    opacity: 1;
    transform: scale(1) rotate(15deg);
  }
  80% {
    opacity: 0.6;
    transform: scale(0.9) rotate(-15deg);
  }
  100% {
    opacity: 0;
    transform: scale(0) rotate(30deg);
  }
}

/* Mobile - Completely disable all sparkle effects */
@media (max-width: 768px) and (any-hover: none), 
       (max-width: 768px) and (pointer: coarse) {
  .sparkle, 
  .sparkle.beam,
  .explosion-sparkle, 
  .explosion-sparkle.pink,
  .explosion-beam {
    display: none !important;
    animation: none !important;
    opacity: 0 !important;
  }
}