header.masthead {
  position: relative;
  overflow: hidden;
}

.masthead-content {
  position: relative;
  z-index: 2;
}
    
/* ==============================================================
# Firefly Animation System
============================================================== */

#hero {
  position: relative;
  overflow: hidden;
}

/* Ensure fireflies sit ABOVE the background image but BELOW the text */
#line-bg {
  position: absolute;
  inset: 0;
  z-index: 2; 
  pointer-events: none;
  background: transparent;
}

/* The hero image provided by the template */
#hero > img {
  z-index: 1;
}

/* The text container */
#hero .container {
  position: relative;
  z-index: 3;
}

.firefly {
  position: absolute;
  width: 0.8vw; /* Slightly larger to see the color better */
  height: 0.8vw;
  border-radius: 50%;
  pointer-events: none;
}

/* This is the "Lightbulb" of the firefly */
.firefly::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;

  /* GREY CORE */
  background: radial-gradient(circle, #d0d0d0 0%, #888888 100%);

  /* SOFT GREY GLOW */
  box-shadow: 0 0 12px 3px rgba(180, 180, 180, 0.6);

  animation: flash-grey ease infinite;
}

@keyframes flash-grey {
  0%, 30%, 100% {
    opacity: 0;
    box-shadow: 0 0 0vw 0vw rgba(200, 200, 200, 0);
  }
  5% {
    opacity: 1;
    box-shadow: 0 0 2vw 0.4vw rgba(200, 200, 200, 0.8);
  }
}

/* Movement loop */
@keyframes move-random {
  0% { transform: translate(0, 0); }
  50% { transform: translate(15vw, -25vh); }
  100% { transform: translate(-5vw, -40vh); }
}

/* Make sure hero content stays on top of the fireflies */
.hero .container {
  position: relative;
  z-index: 3;
}

.hero img {
  z-index: 1;
}