/* ==========================================================================
   Fireflies Background Effect
   ========================================================================== */

.fireflies-bg {
  position: relative;
  background: linear-gradient(180deg, #020408 0%, #05081a 30%, #030618 60%, #010210 100%);
  overflow: hidden;
}

/* Gradiente sutil de fundo — simula noite */
.fireflies-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 15% 85%, rgba(0, 50, 180, 0.10) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 15%, rgba(80, 20, 180, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(0, 80, 200, 0.05) 0%, transparent 60%);
  z-index: 0;
}

/* Ruído sutil */
.fireflies-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 128px;
  z-index: 0;
  pointer-events: none;
}

/* Firefly individual */
.firefly {
  position: absolute;
  width: var(--size, 3px);
  height: var(--size, 3px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  animation: fireflyMove var(--move-duration, 15s) ease-in-out infinite;
  animation-delay: var(--move-delay, 0s);
}

/* Brilho principal */
.firefly::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--color, rgba(100, 160, 255, 0.9));
  box-shadow:
    0 0 4px 1px var(--color, rgba(100, 160, 255, 0.6)),
    0 0 12px 4px var(--glow, rgba(60, 120, 255, 0.3)),
    0 0 30px 8px var(--glow-outer, rgba(80, 40, 220, 0.1));
  animation: fireflyGlow var(--glow-duration, 3s) ease-in-out infinite;
  animation-delay: var(--glow-delay, 0s);
}

/* Halo sutil */
.firefly::after {
  content: '';
  position: absolute;
  width: 300%;
  height: 300%;
  top: -100%;
  left: -100%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow, rgba(60, 120, 255, 0.06)) 0%, transparent 70%);
  animation: fireflyGlow var(--glow-duration, 3s) ease-in-out infinite;
  animation-delay: var(--glow-delay, 0s);
}

/* Glow pulsante */
@keyframes fireflyGlow {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  5%       { opacity: 0.7; }
  15%      { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.8); }
  70%      { opacity: 1; transform: scale(1.1); }
  85%      { opacity: 0.3; }
  95%      { opacity: 0; transform: scale(0.3); }
}

/* Caminho orgânico via custom properties */
@keyframes fireflyMove {
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(var(--dx1, 20px), var(--dy1, -30px)); }
  20%  { transform: translate(var(--dx2, -15px), var(--dy2, 10px)); }
  30%  { transform: translate(var(--dx3, 40px), var(--dy3, -50px)); }
  40%  { transform: translate(var(--dx4, -30px), var(--dy4, 40px)); }
  50%  { transform: translate(var(--dx5, 10px), var(--dy5, -20px)); }
  60%  { transform: translate(var(--dx6, -40px), var(--dy6, -10px)); }
  70%  { transform: translate(var(--dx7, 30px), var(--dy7, 30px)); }
  80%  { transform: translate(var(--dx8, -20px), var(--dy8, -40px)); }
  90%  { transform: translate(var(--dx9, 15px), var(--dy9, 20px)); }
  100% { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .firefly, .firefly::before, .firefly::after {
    animation: none !important;
  }
  .firefly::before { opacity: 0.4 !important; }
}