/* filepath: /Volumes/JeremyExternal/jeremyext/Documents/Site_Internet/css/fireflies.css */
.fireflies-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none; /* Allows clicks to pass through */
  z-index: -1; /* Places it behind all other content */
  overflow: hidden; /* Prevents scrollbars if fireflies move out of bounds */
}

.firefly {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  
  /* Default style for light mode (very subtle) */
  background-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.05);
  
  animation-name: drift;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  opacity: 0; /* Start invisible, fades in via animation */
}

/* Styles for fireflies in dark mode */
[data-theme="dark"] .firefly {
  background: radial-gradient(circle, 
    rgba(255, 255, 255, 0.9) 0%,
    rgba(200, 220, 255, 0.7) 30%,
    rgba(100, 150, 255, 0.4) 70%,
    rgba(15, 52, 96, 0.2) 100%
  );
  box-shadow: 0 0 6px 2px rgba(255, 255, 255, 0.6),
              0 0 12px 4px rgba(200, 220, 255, 0.4),
              0 0 20px 6px rgba(100, 150, 255, 0.2),
              0 0 35px 10px rgba(15, 52, 96, 0.1);
  width: 4px;
  height: 4px;
}

@keyframes drift {
  0% {
    transform: translate(0, 0) scale(0.8);
    opacity: 0;
  }
  10% {
    opacity: 0.7; /* Fade in */
  }
  50% {
    /* Movement defined by --tx and --ty custom properties */
    transform: translate(var(--tx), var(--ty)) scale(1.2);
    opacity: 1;
  }
  90% {
    opacity: 0.7; /* Fade out */
  }
  100% {
    transform: translate(calc(var(--tx) * 2), calc(var(--ty) * 2)) scale(0.8);
    opacity: 0;
  }
}

/* Individual firefly variations */
.firefly:nth-child(1) { top: 10%; left: 15%; animation-duration: 20s; animation-delay: 0s; --tx: 50px; --ty: -30px; }
.firefly:nth-child(2) { top: 30%; left: 40%; animation-duration: 25s; animation-delay: -3s; --tx: -40px; --ty: 60px; }
.firefly:nth-child(3) { top: 50%; left: 70%; animation-duration: 18s; animation-delay: -7s; --tx: 30px; --ty: -50px; }
.firefly:nth-child(4) { top: 70%; left: 20%; animation-duration: 22s; animation-delay: -1s; --tx: -60px; --ty: 20px; }
.firefly:nth-child(5) { top: 90%; left: 50%; animation-duration: 28s; animation-delay: -5s; --tx: 20px; --ty: -70px; }
.firefly:nth-child(6) { top: 5%; left: 80%; animation-duration: 23s; animation-delay: -2s; --tx: -30px; --ty: 40px; }
.firefly:nth-child(7) { top: 25%; left: 10%; animation-duration: 19s; animation-delay: -8s; --tx: 70px; --ty: -20px; }
.firefly:nth-child(8) { top: 45%; left: 60%; animation-duration: 26s; animation-delay: -4s; --tx: -20px; --ty: 50px; }
.firefly:nth-child(9) { top: 65%; left: 90%; animation-duration: 21s; animation-delay: -10s; --tx: 40px; --ty: -60px; }
.firefly:nth-child(10) { top: 85%; left: 30%; animation-duration: 27s; animation-delay: -6s; --tx: -50px; --ty: 30px; }
.firefly:nth-child(11) { top: 15%; left: 5%; animation-duration: 24s; animation-delay: -12s; --tx: 60px; --ty: -40px; }
.firefly:nth-child(12) { top: 35%; left: 45%; animation-duration: 20s; animation-delay: -14s; --tx: -35px; --ty: 55px; }
.firefly:nth-child(13) { top: 55%; left: 75%; animation-duration: 22s; animation-delay: -9s; --tx: 25px; --ty: -45px; }
.firefly:nth-child(14) { top: 75%; left: 25%; animation-duration: 18s; animation-delay: -11s; --tx: -65px; --ty: 25px; }
.firefly:nth-child(15) { top: 95%; left: 55%; animation-duration: 25s; animation-delay: -13s; --tx: 15px; --ty: -65px; }