/* Global Firefly Controls - Adjust these to change all fireflies at once */
:root {
  --firefly-size: 4px;           /* Base size of fireflies */
  --firefly-glow-sm: 6px;        /* Small glow radius */
  --firefly-glow-md: 7px;       /* Medium glow radius */  
  --firefly-glow-lg: 9px;       /* Large glow radius */
  --firefly-label-size: 8px;     /* Label font size */
}

/* Fireflies Animation CSS */
.fireflies-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.firefly {
  position: absolute;
  width: var(--firefly-size);
  height: var(--firefly-size);
  background: #ffeb3b;
  border-radius: 50%;
  box-shadow: 
    0 0 var(--firefly-glow-sm) currentColor, 
    0 0 var(--firefly-glow-md) currentColor, 
    0 0 var(--firefly-glow-lg) currentColor;
  opacity: 0;
}

/* Firefly ID Labels */
.firefly::before {
  content: attr(data-id);
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--firefly-label-size);
  color: rgba(255, 255, 255, 0.6);
  background: rgba(0, 0, 0, 0.7);
  padding: 1px 3px;
  border-radius: 2px;
  white-space: nowrap;
  font-family: monospace;
  pointer-events: none;
}

/* Individual Firefly Styles with Color Variations */
.firefly[data-id="ff-1"] {
  animation: firefly-zone-1 80s infinite linear, firefly-blink 4s infinite;
  animation-delay: 2.2s, 2.7s;
  background: #e6ff80; /* Brighter electric yellow-green */
  box-shadow: 
    0 0 var(--firefly-glow-sm) #e6ff80, 
    0 0 var(--firefly-glow-md) #e6ff80, 
    0 0 var(--firefly-glow-lg) #e6ff80;
  opacity: 0;
  animation-fill-mode: forwards;
}

.firefly[data-id="ff-2"] {
  animation: firefly-zone-2 75s infinite linear, firefly-blink 3.2s infinite;
  animation-delay: 2.5s, 5.2s;
  background: #e6ff80; /* Brighter electric yellow-green */
  box-shadow: 
    0 0 var(--firefly-glow-sm) #e6ff80, 
    0 0 var(--firefly-glow-md) #e6ff80, 
    0 0 var(--firefly-glow-lg) #e6ff80;
  opacity: 0;
  animation-fill-mode: forwards;
}

.firefly[data-id="ff-3"] {
  animation: firefly-zone-3 95s infinite linear, firefly-blink 4.8s infinite;
  animation-delay: 2.8s, 4.1s;
  background: #e6ff80; /* Brighter electric yellow-green */
  box-shadow: 
    0 0 var(--firefly-glow-sm) #e6ff80, 
    0 0 var(--firefly-glow-md) #e6ff80, 
    0 0 var(--firefly-glow-lg) #e6ff80;
  opacity: 0;
  animation-fill-mode: forwards;
}

.firefly[data-id="ff-4"] {
  animation: firefly-zone-4 85s infinite linear, firefly-blink 3.8s infinite;
  animation-delay: 0.8s, 1.6s;
  background: #d9ff66; /* Brighter green yellow */
  box-shadow: 
    0 0 var(--firefly-glow-sm) #d9ff66, 
    0 0 var(--firefly-glow-md) #d9ff66, 
    0 0 var(--firefly-glow-lg) #d9ff66;
  opacity: 0;
  animation-fill-mode: forwards;
}

.firefly[data-id="ff-5"] {
  animation: firefly-zone-5 70s infinite linear, firefly-blink 4.2s infinite;
  animation-delay: 2.0s, 3.7s;
  background: #ccff99; /* Brighter light green */
  box-shadow: 
    0 0 var(--firefly-glow-sm) #ccff99, 
    0 0 var(--firefly-glow-md) #ccff99, 
    0 0 var(--firefly-glow-lg) #ccff99;
  opacity: 0;
  animation-fill-mode: forwards;
}

.firefly[data-id="ff-6"] {
  animation: firefly-zone-6 95s infinite linear, firefly-blink 3.6s infinite;
  animation-delay: 2.3s, 4.8s;
  background: #e6ff80; /* Brighter electric yellow-green */
  box-shadow: 
    0 0 var(--firefly-glow-sm) #e6ff80, 
    0 0 var(--firefly-glow-md) #e6ff80, 
    0 0 var(--firefly-glow-lg) #e6ff80;
  opacity: 0;
  animation-fill-mode: forwards;
}

.firefly[data-id="ff-7"] {
  animation: firefly-zone-7 88s infinite linear, firefly-blink 4.1s infinite;
  animation-delay: 2.1s, 2.4s;
  background: #e6ff80; /* Brighter electric yellow-green */
  box-shadow: 
    0 0 var(--firefly-glow-sm) #e6ff80, 
    0 0 var(--firefly-glow-md) #e6ff80, 
    0 0 var(--firefly-glow-lg) #e6ff80;
  opacity: 0;
  animation-fill-mode: forwards;
}

.firefly[data-id="ff-8"] {
  animation: firefly-zone-8 82s infinite linear, firefly-blink 3.9s infinite;
  animation-delay: 2.4s, 4.3s;
  background: #ccff99; /* Brighter light green */
  box-shadow: 
    0 0 var(--firefly-glow-sm) #ccff99, 
    0 0 var(--firefly-glow-md) #ccff99, 
    0 0 var(--firefly-glow-lg) #ccff99;
  opacity: 0;
  animation-fill-mode: forwards;
}

.firefly[data-id="ff-9"] {
  animation: firefly-zone-9 73s infinite linear, firefly-blink 4.5s infinite;
  animation-delay: 2.6s, 5.8s;
  background: #ccff99; /* Brighter light green */
  box-shadow: 
    0 0 var(--firefly-glow-sm) #ccff99, 
    0 0 var(--firefly-glow-md) #ccff99, 
    0 0 var(--firefly-glow-lg) #ccff99;
  opacity: 0;
  animation-fill-mode: forwards;
}

.firefly[data-id="ff-10"] {
  animation: firefly-zone-10 92s infinite linear, firefly-blink 3.7s infinite;
  animation-delay: 2.7s, 4.1s;
  background: #ccff99; /* Brighter light green */
  box-shadow: 
    0 0 var(--firefly-glow-sm) #ccff99, 
    0 0 var(--firefly-glow-md) #ccff99, 
    0 0 var(--firefly-glow-lg) #ccff99;
  opacity: 0;
  animation-fill-mode: forwards;
}

.firefly[data-id="ff-12"] {
  animation: firefly-zone-12 74s infinite linear, firefly-blink 3.3s infinite;
  animation-delay: 2.0s, 4.3s;
  background: #e6ff80; /* Brighter electric yellow-green */
  box-shadow: 
    0 0 var(--firefly-glow-sm) #e6ff80, 
    0 0 var(--firefly-glow-md) #e6ff80, 
    0 0 var(--firefly-glow-lg) #e6ff80;
  opacity: 0;
  animation-fill-mode: forwards;
}

.firefly[data-id="ff-13"] {
  animation: firefly-zone-13 89s infinite linear, firefly-blink 4.6s infinite;
  animation-delay: 2.9s, 4.0s;
  background: #e6ff80; /* Brighter electric yellow-green */
  box-shadow: 
    0 0 var(--firefly-glow-sm) #e6ff80, 
    0 0 var(--firefly-glow-md) #e6ff80, 
    0 0 var(--firefly-glow-lg) #e6ff80;
  opacity: 0;
  animation-fill-mode: forwards;
}

.firefly[data-id="ff-14"] {
  animation: firefly-zone-14 84s infinite linear, firefly-blink 3.4s infinite;
  animation-delay: 2.1s, 4.8s;
  background: #e6ff80; /* Brighter electric yellow-green */
  box-shadow: 
    0 0 var(--firefly-glow-sm) #e6ff80, 
    0 0 var(--firefly-glow-md) #e6ff80, 
    0 0 var(--firefly-glow-lg) #e6ff80;
  opacity: 0;
  animation-fill-mode: forwards;
}

.firefly[data-id="ff-15"] {
  animation: firefly-zone-15 76s infinite linear, firefly-blink 4.0s infinite;
  animation-delay: 2.3s, 4.9s;
  background: #d9ff66; /* Brighter electric yellow-green */
  box-shadow: 
    0 0 var(--firefly-glow-sm) #d9ff66, 
    0 0 var(--firefly-glow-md) #d9ff66, 
    0 0 var(--firefly-glow-lg) #d9ff66;
  opacity: 0;
  animation-fill-mode: forwards;
}

.firefly[data-id="ff-16"] {
  animation: firefly-zone-16 67s infinite linear, firefly-blink 4.3s infinite;
  animation-delay: 1.2s, 3.1s;
  background: #e6ff80; /* Brighter electric yellow-green */
  box-shadow: 
    0 0 var(--firefly-glow-sm) #e6ff80, 
    0 0 var(--firefly-glow-md) #e6ff80, 
    0 0 var(--firefly-glow-lg) #e6ff80;
  opacity: 0;
  animation-fill-mode: forwards;
}

.firefly[data-id="ff-17"] {
  animation: firefly-zone-17 87s infinite linear, firefly-blink 4.7s infinite;
  animation-delay: 2.5s, 3.4s;
  background: #d9ff66; /* Brighter green yellow */
  box-shadow: 
    0 0 var(--firefly-glow-sm) #d9ff66, 
    0 0 var(--firefly-glow-md) #d9ff66, 
    0 0 var(--firefly-glow-lg) #d9ff66;
  opacity: 0;
  animation-fill-mode: forwards;
}

.firefly[data-id="ff-18"] {
  animation: firefly-zone-18 71s infinite linear, firefly-blink 3.9s infinite;
  animation-delay: 2.7s, 4.5s;
  background: #e6ff80; /* Brighter electric yellow-green */
  box-shadow: 
    0 0 var(--firefly-glow-sm) #e6ff80, 
    0 0 var(--firefly-glow-md) #e6ff80, 
    0 0 var(--firefly-glow-lg) #e6ff80;
  opacity: 0;
  animation-fill-mode: forwards;
}

/* Animation Keyframes */
@keyframes firefly-zone-1 {
  0% { transform: translateX(8vw) translateY(85vh); }
  20% { transform: translateX(15vw) translateY(82vh); }
  40% { transform: translateX(12vw) translateY(88vh); }
  60% { transform: translateX(6vw) translateY(91vh); }
  80% { transform: translateX(11vw) translateY(87vh); }
  100% { transform: translateX(8vw) translateY(85vh); }
}

@keyframes firefly-zone-2 {
  0% { transform: translateX(75vw) translateY(10vh); }
  25% { transform: translateX(82vw) translateY(18vh); }
  50% { transform: translateX(78vw) translateY(14vh); }
  75% { transform: translateX(85vw) translateY(22vh); }
  100% { transform: translateX(75vw) translateY(10vh); }
}

@keyframes firefly-zone-3 {
  0% { transform: translateX(75vw) translateY(85vh); }
  25% { transform: translateX(83vw) translateY(78vh); }
  50% { transform: translateX(88vw) translateY(82vh); }
  75% { transform: translateX(80vw) translateY(89vh); }
  100% { transform: translateX(75vw) translateY(85vh); }
}

@keyframes firefly-zone-4 {
  0% { transform: translateX(55vw) translateY(35vh); }
  15% { transform: translateX(57vw) translateY(28vh); }
  35% { transform: translateX(62vw) translateY(25vh); }
  55% { transform: translateX(68vw) translateY(32vh); }
  75% { transform: translateX(65vw) translateY(38vh); }
  100% { transform: translateX(55vw) translateY(35vh); }
}

@keyframes firefly-zone-5 {
  0% { transform: translateX(10vw) translateY(45vh); }
  25% { transform: translateX(18vw) translateY(53vh); }
  50% { transform: translateX(14vw) translateY(49vh); }
  75% { transform: translateX(22vw) translateY(57vh); }
  100% { transform: translateX(10vw) translateY(45vh); }
}

@keyframes firefly-zone-6 {
  0% { transform: translateX(85vw) translateY(65vh); }
  25% { transform: translateX(92vw) translateY(73vh); }
  50% { transform: translateX(88vw) translateY(69vh); }
  75% { transform: translateX(95vw) translateY(77vh); }
  100% { transform: translateX(85vw) translateY(65vh); }
}

@keyframes firefly-zone-7 {
  0% { transform: translateX(2vw) translateY(35vh); }
  25% { transform: translateX(6vw) translateY(43vh); }
  50% { transform: translateX(4vw) translateY(39vh); }
  75% { transform: translateX(8vw) translateY(47vh); }
  100% { transform: translateX(2vw) translateY(35vh); }
}

@keyframes firefly-zone-8 {
  0% { transform: translateX(70vw) translateY(55vh); }
  25% { transform: translateX(78vw) translateY(63vh); }
  50% { transform: translateX(74vw) translateY(59vh); }
  75% { transform: translateX(82vw) translateY(67vh); }
  100% { transform: translateX(70vw) translateY(55vh); }
}

@keyframes firefly-zone-9 {
  0% { transform: translateX(25vw) translateY(75vh); }
  20% { transform: translateX(28vw) translateY(78vh); }
  40% { transform: translateX(31vw) translateY(81vh); }
  60% { transform: translateX(29vw) translateY(84vh); }
  80% { transform: translateX(26vw) translateY(80vh); }
  100% { transform: translateX(25vw) translateY(75vh); }
}

@keyframes firefly-zone-10 {
  0% { transform: translateX(90vw) translateY(40vh); }
  25% { transform: translateX(96vw) translateY(48vh); }
  50% { transform: translateX(92vw) translateY(44vh); }
  75% { transform: translateX(98vw) translateY(52vh); }
  100% { transform: translateX(90vw) translateY(40vh); }
}

@keyframes firefly-zone-12 {
  0% { transform: translateX(15vw) translateY(5vh); }
  25% { transform: translateX(23vw) translateY(13vh); }
  50% { transform: translateX(19vw) translateY(9vh); }
  75% { transform: translateX(27vw) translateY(17vh); }
  100% { transform: translateX(15vw) translateY(5vh); }
}

@keyframes firefly-zone-13 {
  0% { transform: translateX(55vw) translateY(75vh); }
  25% { transform: translateX(63vw) translateY(83vh); }
  50% { transform: translateX(59vw) translateY(79vh); }
  75% { transform: translateX(67vw) translateY(87vh); }
  100% { transform: translateX(55vw) translateY(75vh); }
}

@keyframes firefly-zone-14 {
  0% { transform: translateX(2vw) translateY(60vh); }
  25% { transform: translateX(10vw) translateY(68vh); }
  50% { transform: translateX(6vw) translateY(64vh); }
  75% { transform: translateX(14vw) translateY(72vh); }
  100% { transform: translateX(2vw) translateY(60vh); }
}

@keyframes firefly-zone-15 {
  0% { transform: translateX(80vw) translateY(25vh); }
  25% { transform: translateX(88vw) translateY(33vh); }
  50% { transform: translateX(84vw) translateY(29vh); }
  75% { transform: translateX(92vw) translateY(37vh); }
  100% { transform: translateX(80vw) translateY(25vh); }
}

@keyframes firefly-zone-16 {
  0% { transform: translateX(5vw) translateY(88vh); }
  25% { transform: translateX(8vw) translateY(92vh); }
  50% { transform: translateX(11vw) translateY(95vh); }
  75% { transform: translateX(9vw) translateY(90vh); }
  100% { transform: translateX(5vw) translateY(88vh); }
}

@keyframes firefly-zone-17 {
  0% { transform: translateX(5vw) translateY(15vh); }
  25% { transform: translateX(8vw) translateY(22vh); }
  50% { transform: translateX(3vw) translateY(18vh); }
  75% { transform: translateX(7vw) translateY(25vh); }
  100% { transform: translateX(5vw) translateY(15vh); }
}

@keyframes firefly-zone-18 {
  0% { transform: translateX(18vw) translateY(82vh); }
  25% { transform: translateX(22vw) translateY(88vh); }
  45% { transform: translateX(24vw) translateY(85vh); }
  65% { transform: translateX(20vw) translateY(91vh); }
  85% { transform: translateX(26vw) translateY(87vh); }
  100% { transform: translateX(18vw) translateY(82vh); }
}

@keyframes firefly-blink {
  0%, 50%, 100% {
    opacity: 0;
  }
  25%, 75% {
    opacity: 1;
  }
  35% {
    opacity: 0.3;
  }
  65% {
    opacity: 0.7;
  }
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  :root {
    --firefly-size: 3px;
    --firefly-glow-sm: 6px;
    --firefly-glow-md: 12px;
    --firefly-glow-lg: 18px;
    --firefly-label-size: 6px;
  }

  .firefly::before {
    top: -15px;
    padding: 0.5px 2px;
  }
}

/* Toggle for firefly labels */
.firefly-labels-toggle {
  position: fixed;
  top: 70px;
  right: 20px;
  background: rgba(47, 47, 47, 0.85);
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  z-index: 20;
  transition: background 0.2s ease;
}

.firefly-labels-toggle:hover {
  background: rgba(60, 60, 60, 0.9);
}

.firefly-labels-hidden .firefly::before {
  display: none;
}

/* Accessibility - respect user preferences */
@media (prefers-reduced-motion: reduce) {
  .firefly {
    display: none;
  }
}