/* Wing flap: small, quick rock around the hinge — reads as hovering, not flying. */
.firefly .ff-wing { animation: ff-flap var(--flap, .16s) ease-in-out var(--flap-delay, 0s) infinite alternate; }
.firefly--large .ff-wing-a { --flap-to: 16deg; }
.firefly--large .ff-wing-b { --flap-to: 11deg; animation-delay: calc(var(--flap-delay, 0s) - .05s); }
.firefly--small .ff-wing-l { --flap-to: 14deg; }
.firefly--small .ff-wing-r { --flap-to: -14deg; }

@keyframes ff-flap {
  from { transform: rotate(0deg); }
  to   { transform: rotate(var(--flap-to, 12deg)); }
}

/* Buzz: the hover loops a small, uneven figure-of-eight and tilts into it;
   the jitter on top is the fast tremor of wings beating. */
.firefly .ff-hover  { animation: ff-hover var(--hover, 2.6s) ease-in-out var(--hover-delay, 0s) infinite var(--hover-dir, normal); }
.firefly .ff-jitter { animation: ff-jitter .14s linear infinite; }

@keyframes ff-hover {
  0%   { transform: translate(0, 0) rotate(0deg); }
  20%  { transform: translate(calc(var(--amp, 1px) * 7), calc(var(--amp, 1px) * -5)) rotate(4deg); }
  45%  { transform: translate(calc(var(--amp, 1px) * 2), calc(var(--amp, 1px) * -10)) rotate(-3deg); }
  70%  { transform: translate(calc(var(--amp, 1px) * -6), calc(var(--amp, 1px) * -4)) rotate(3deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes ff-jitter {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(calc(var(--amp, 1px) * .8), calc(var(--amp, 1px) * -.6)); }
  50%      { transform: translate(calc(var(--amp, 1px) * -.5), calc(var(--amp, 1px) * .7)); }
  75%      { transform: translate(calc(var(--amp, 1px) * .6), calc(var(--amp, 1px) * .5)); }
}

/* Light pulse: a quick swell, a slow fade, then a long rest — like a real firefly. */
.firefly .ff-light,
.firefly .ff-lantern-hot,
.firefly .ff-halo {
  animation: var(--pulse-name, ff-pulse) var(--pulse, 3.2s) ease-in-out var(--pulse-delay, 0s) infinite;
}
.firefly .ff-lantern-hot { --pulse-name: ff-pulse-hot; }
.firefly .ff-halo        { --pulse-name: ff-pulse-halo; }

@keyframes ff-pulse {
  0%, 100% { opacity: .6; }
  12%      { opacity: 1; }
  22%      { opacity: .92; }
  42%      { opacity: .6; }
}
@keyframes ff-pulse-hot {
  0%, 100% { opacity: 0; }
  12%      { opacity: .9; }
  22%      { opacity: .7; }
  42%      { opacity: 0; }
}
@keyframes ff-pulse-halo {
  0%, 100% { opacity: .65; }
  12%      { opacity: 1; }
  22%      { opacity: .95; }
  42%      { opacity: .65; }
}

@media (prefers-reduced-motion: reduce) {
  .firefly .ff-hover, .firefly .ff-jitter, .firefly .ff-wing, .firefly .ff-light, .firefly .ff-lantern-hot, .firefly .ff-halo { animation: none; }
  .firefly .ff-lantern-hot { opacity: 0; }
}