@keyframes fly {
  0% { transform: translateX(-120vw) translateY(0) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateX(120vw) translateY(0) rotate(360deg); opacity: 0; }
}
.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  animation: fly 8s linear infinite;
  pointer-events: none;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 0 12px rgba(255, 255, 255, 0.7);
}
.particle:nth-child(odd) {
  background: rgba(0, 240, 255, 0.6);
  animation-duration: 10s;
  box-shadow: 0 0 6px rgba(0, 240, 255, 0.9), 0 0 12px rgba(0, 240, 255, 0.7);
}
.particle:nth-child(3n) {
  background: rgba(255, 59, 59, 0.6);
  animation-duration: 12s;
  box-shadow: 0 0 6px rgba(255, 59, 59, 0.9), 0 0 12px rgba(255, 59, 59, 0.7);
}
.particle:nth-child(4n) {
  background: rgba(255, 0, 255, 0.6);
  animation-duration: 9s;
  box-shadow: 0 0 6px rgba(255, 0, 255, 0.9), 0 0 12px rgba(255, 0, 255, 0.7);
}

@keyframes lightning {
  0%, 90%, 100% { opacity: 1; transform: scaleY(1); }
  10%, 20%, 30%, 40%, 50%, 60%, 70%, 80% { opacity: 0.8; transform: scaleY(1.2); }
  15%, 25%, 35%, 45%, 55%, 65%, 75%, 85% { opacity: 1; transform: scaleY(0.9); }
}
.lightning-bar {
  animation: lightning 3s infinite;
  position: relative;
}
.lightning-bar::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 0, 0.9) 50%, transparent 70%);
  border-radius: 50%;
  animation: lightning 3s infinite 0.5s;
}

details[open] .arrow-icon {
  transform: rotate(180deg);
}