/* Independent gold fireflies. Hide the old 4-star pulse when .flies is on. */
.gold-dust.flies .display::after,
.gold-dust.flies .word::after { display: none; }

.gold-dust.flies #stage,
.gold-dust.flies .page-head,
.gold-dust.flies .word:not(.word-logo),
.gold-dust.flies .display { position: relative; isolation: isolate; }
.gold-dust.flies .word em,
.gold-dust.flies .display em,
.gold-dust.flies .display:not(:has(em)) {
  filter: drop-shadow(0 0 14px rgba(201, 164, 95, 0.28));
}

.gold-dust.flies { overflow-x: hidden; }

.firefly-field {
  position: absolute;
  top: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  height: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 2;
}

.fly-wrap {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
  will-change: transform;
}
.fly {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--s, 2px);
  height: var(--s, 2px);
  margin: 0;
  border-radius: 50%;
  background: #fff8e4;
  box-shadow:
    0 0 4px 1px #fff8e4,
    0 0 10px 3px rgb(244 226 180 / 0.75),
    0 0 18px 7px rgb(201 164 95 / 0.32);
  opacity: 0;
  will-change: transform, opacity;
}

/* 1. Blink — mostly dark, brief independent flashes */
.fly-blink .fly {
  animation: fly-blink var(--dur, 4s) ease-in-out var(--delay, 0s) infinite;
}
@keyframes fly-blink {
  0%, 10% { opacity: 0; transform: translate(0, 0) scale(0.5); }
  14% { opacity: var(--peak, 1); transform: translate(1px, -1px) scale(1.2); }
  20% { opacity: 0.2; transform: translate(2px, -3px) scale(0.85); }
  26%, 100% { opacity: 0; transform: translate(3px, -5px) scale(0.4); }
}

/* 2. Rise — lift and fade like garden fireflies taking off */
.fly-rise .fly {
  animation: fly-rise var(--dur, 8s) linear var(--delay, 0s) infinite;
}
@keyframes fly-rise {
  0% { opacity: 0; transform: translate(0, 0) scale(0.4); }
  10% { opacity: var(--peak, 0.95); }
  72% { opacity: var(--peak, 0.95); }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(0.65);
  }
}

/* 3. Wander — lazy hover around the title */
.fly-wander .fly {
  animation: fly-wander var(--dur, 11s) ease-in-out var(--delay, 0s) infinite;
}
@keyframes fly-wander {
  0% { opacity: 0; transform: translate(0, 0) scale(0.5); }
  12% { opacity: var(--peak, 0.9); }
  28% { transform: translate(var(--dx), calc(var(--dy) * 0.35)) scale(1); }
  52% { transform: translate(calc(var(--dx) * -0.4), var(--dy)) scale(0.85); opacity: var(--peak, 0.9); }
  76% { transform: translate(calc(var(--dx) * 0.55), calc(var(--dy) * 0.2)) scale(1.12); }
  88% { opacity: var(--peak, 0.9); }
  100% { opacity: 0; transform: translate(0, 0) scale(0.5); }
}

/* 4. Bloom — pinpoint, flare, vanish */
.fly-bloom .fly {
  animation: fly-bloom var(--dur, 3.4s) ease-out var(--delay, 0s) infinite;
}
@keyframes fly-bloom {
  0% { opacity: 0; transform: translate(0, 0) scale(0.15); }
  16% { opacity: 1; transform: translate(0, 0) scale(1.5); }
  38% { opacity: 0.2; transform: translate(calc(var(--dx) * 0.12), calc(var(--dy) * 0.08)) scale(2.3); }
  52%, 100% { opacity: 0; transform: translate(calc(var(--dx) * 0.18), calc(var(--dy) * 0.12)) scale(0.2); }
}

@media (prefers-reduced-motion: reduce) {
  .fly { animation: none !important; opacity: 0.4; transform: none; }
}