#butterflies {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.butterfly {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
}

.butterfly svg {
  display: block;
  overflow: visible;
}

.butterfly .wing {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: flap var(--flap, 0.3s) ease-in-out infinite alternate;
}

.butterfly .upper { fill: hsl(var(--hue) 85% 58%); }
.butterfly .lower { fill: hsl(calc(var(--hue) + 25) 85% 66%); }
.butterfly .spot { fill: hsl(0 0% 100% / 0.75); }
.butterfly .body { fill: #2b2118; }
.butterfly .antenna { fill: none; stroke: #2b2118; stroke-width: 1.5; stroke-linecap: round; }

@keyframes flap {
  from { transform: scaleX(1); }
  to { transform: scaleX(0.2); }
}

@media (prefers-reduced-motion: reduce) {
  .butterfly .wing { animation: none; }
}