/* FLOWER GARDEN FIREFLIES
   Safe add-on. Only affects flower-garden.html.
*/

.firefly-field{
  position:absolute;
  inset:0;
  z-index:11;
  pointer-events:none;
  overflow:hidden;
}

.firefly{
  position:absolute;
  width:6px;
  height:6px;
  border-radius:50%;
  background:radial-gradient(circle, #fffad1 0%, #ffd86a 38%, rgba(255,190,60,.25) 70%, transparent 100%);
  box-shadow:
    0 0 8px rgba(255,230,120,.95),
    0 0 18px rgba(255,210,85,.58),
    0 0 34px rgba(255,185,70,.22);
  opacity:.68;
  transform:translate3d(0,0,0);
  animation:
    fireflyDrift var(--drift-time) ease-in-out infinite alternate,
    fireflyPulse var(--pulse-time) ease-in-out infinite;
}

.firefly::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,220,100,.18), transparent 62%);
  filter:blur(2px);
}

.firefly::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:2px;
  height:2px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:white;
  opacity:.85;
}

.firefly.near{
  width:8px;
  height:8px;
  opacity:.78;
  filter:blur(.1px);
}

.firefly.far{
  width:4px;
  height:4px;
  opacity:.45;
  filter:blur(.4px);
}

@keyframes fireflyDrift{
  0%{
    transform:translate3d(0,0,0) scale(.92);
  }
  35%{
    transform:translate3d(calc(var(--move-x) * .45), calc(var(--move-y) * -.25),0) scale(1.06);
  }
  70%{
    transform:translate3d(calc(var(--move-x) * -.24), calc(var(--move-y) * .55),0) scale(.96);
  }
  100%{
    transform:translate3d(var(--move-x), var(--move-y),0) scale(1.1);
  }
}

@keyframes fireflyPulse{
  0%,100%{
    opacity:.28;
    box-shadow:
      0 0 6px rgba(255,230,120,.62),
      0 0 14px rgba(255,210,85,.30),
      0 0 24px rgba(255,185,70,.12);
  }
  18%{
    opacity:.86;
  }
  42%{
    opacity:.38;
  }
  63%{
    opacity:1;
    box-shadow:
      0 0 10px rgba(255,245,170,1),
      0 0 22px rgba(255,220,110,.72),
      0 0 42px rgba(255,190,80,.32);
  }
  82%{
    opacity:.52;
  }
}

body.garden-bloomed .firefly{
  animation-duration:
    calc(var(--drift-time) * .92),
    var(--pulse-time);
}

/* keep them subtle on smaller screens */
@media(max-width:700px){
  .firefly:nth-child(n+8){
    display:none;
  }

  .firefly-field{
    opacity:.82;
  }
}