.butterfly-layer {
  position: fixed;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}

.butterfly-layer--magic {
  position: absolute;
  z-index: 0;
}

.butterfly-layer--magic .butterfly--morpho { top: 13%; left: 5%; }
.butterfly-layer--magic .butterfly--gold { top: 54%; right: 7%; }
.butterfly-layer--magic .butterfly--white { top: 76%; left: 10%; }

.butterfly {
  position: absolute;
  display: block;
  width: clamp(58px, 7vw, 94px);
  height: auto;
  user-select: none;
  will-change: transform;
  animation: butterfly-drift 18s ease-in-out infinite alternate;
}

.butterfly--morpho {
  top: 16%;
  left: 8%;
  width: clamp(78px, 10vw, 132px);
  animation-duration: 22s;
  animation-delay: -7s;
}

.butterfly--morpho,
.butterfly--morpho-image,
.butterfly--morpho-still {
  rotate: 90deg;
}

.butterfly--gold {
  top: 52%;
  right: 9%;
  animation-duration: 19s;
  animation-delay: -11s;
}

.butterfly--white {
  top: 75%;
  left: 16%;
  width: clamp(48px, 6vw, 78px);
  animation-duration: 24s;
  animation-delay: -15s;
}

.butterfly--flight {
  top: var(--flight-top);
  left: -18%;
  width: var(--flight-size);
  animation: butterfly-cross-screen var(--flight-duration) linear var(--flight-delay) infinite;
}

.butterfly--scatter {
  top: var(--scatter-top);
  left: var(--scatter-left);
  width: var(--scatter-size);
  animation-duration: var(--scatter-duration);
  animation-delay: var(--scatter-delay);
}

.butterfly--still {
  top: var(--still-top);
  left: var(--still-left);
  width: var(--still-size);
  animation: none;
  opacity: .86;
}

.butterfly--morpho-still {
  animation-name: morpho-loop-fade;
  animation-duration: 14.66s;
  animation-timing-function: ease-in-out;
  animation-delay: var(--morpho-delay, 0s);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.butterfly-layer--magic .butterfly--flight {
  top: var(--flight-top);
  left: -18%;
}

@keyframes butterfly-drift {
  0% { transform: translate3d(-8px, 8px, 0) rotate(-7deg); }
  50% { transform: translate3d(34px, -28px, 0) rotate(8deg); }
  100% { transform: translate3d(-18px, 18px, 0) rotate(-4deg); }
}

@keyframes butterfly-cross-screen {
  0% { opacity: 0; transform: translate3d(0, 12px, 0) rotate(-8deg); }
  12% { opacity: 0; transform: translate3d(8vw, 4px, 0) rotate(-4deg); }
  24% { opacity: .82; transform: translate3d(24vw, -12px, 0) rotate(5deg); }
  52% { opacity: .9; transform: translate3d(65vw, 16px, 0) rotate(-4deg); }
  86% { opacity: .82; transform: translate3d(110vw, -8px, 0) rotate(6deg); }
  100% { opacity: 0; transform: translate3d(145vw, -12px, 0) rotate(8deg); }
}

@keyframes morpho-loop-fade {
  0%, 4% { opacity: 0; }
  18%, 78% { opacity: .86; }
  96%, 100% { opacity: 0; }
}

@media (max-width: 760px) {
  .butterfly--morpho { top: 19%; left: -2%; }
  .butterfly--gold { top: 48%; right: -4%; }
  .butterfly--white { top: 72%; left: 4%; }
}

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