.figure-butterflies {
  position: absolute;

  left: 27%;
  bottom: -1%;

  width: 30%;
  height: 74%;

  z-index: 5;

  pointer-events: none;
  overflow: visible;

  opacity: 0;
  transition: opacity 700ms ease;
}

.landing.constellation-active .figure-butterflies {
  opacity: 1;
}

.figure-butterfly {
  position: absolute;

  left: var(--x);
  top: var(--y);

  width: 14px;
  height: 10px;

  transform: scale(var(--scale));

  opacity: 0;

  filter:
    drop-shadow(0 0 3px rgba(220, 245, 255, 0.8))
    drop-shadow(0 0 7px rgba(100, 180, 255, 0.45));

  animation:
    butterflyFlight
    var(--duration)
    ease-in-out
    var(--delay)
    infinite;
}

.butterfly-body {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 2px;
  height: 8px;

  transform: translate(-50%, -50%);

  border-radius: 50%;
  background: rgba(225, 242, 255, 0.95);
}

.butterfly-wing {
  position: absolute;

  top: 1px;

  width: 7px;
  height: 8px;

  background:
    radial-gradient(
      ellipse at center,
      rgba(205, 235, 255, 0.9),
      rgba(90, 165, 235, 0.55) 55%,
      rgba(40, 100, 205, 0.12) 78%,
      transparent
    );

  border-radius: 70% 30% 65% 35%;

  transform-origin: center right;

  animation:
    butterflyWing
    420ms
    ease-in-out
    infinite;
}

.butterfly-wing-left {
  left: 0;
}

.butterfly-wing-right {
  right: 0;

  transform-origin: center left;
  transform: scaleX(-1);
}

@keyframes butterflyWing {
  0%,
  100% {
    transform: rotateY(15deg) rotateZ(-8deg);
  }

  50% {
    transform: rotateY(70deg) rotateZ(8deg);
  }
}

@keyframes butterflyFlight {
  0% {
    opacity: 0;
    transform:
      translate(0, 10px)
      rotate(-5deg)
      scale(var(--scale));
  }

  15% {
    opacity: 0.72;
  }

  32% {
    opacity: 1;
    transform:
      translate(
        calc(var(--direction) * 8px),
        -5px
      )
      rotate(5deg)
      scale(var(--scale));
  }

  54% {
    transform:
      translate(
        calc(var(--direction) * -5px),
        -17px
      )
      rotate(-7deg)
      scale(var(--scale));
  }

  72% {
    opacity: 0.85;
    transform:
      translate(
        calc(var(--direction) * 11px),
        -29px
      )
      rotate(6deg)
      scale(var(--scale));
  }

  100% {
    opacity: 0;
    transform:
      translate(
        calc(var(--direction) * -4px),
        -45px
      )
      rotate(-4deg)
      scale(calc(var(--scale) * 0.9));
  }
}

@media (prefers-reduced-motion: reduce) {
  .figure-butterflies {
    display: none;
  }
}

/* Deep-blue luminous butterflies */
.figure-butterfly {
  filter:
    drop-shadow(0 0 3px rgba(150, 210, 255, 0.90))
    drop-shadow(0 0 8px rgba(65, 150, 255, 0.72))
    drop-shadow(0 0 15px rgba(30, 95, 225, 0.45));
}

.butterfly-body {
  background: rgba(100, 175, 250, 0.96);
  box-shadow:
    0 0 4px rgba(115, 190, 255, 0.85),
    0 0 9px rgba(40, 120, 235, 0.55);
}

.butterfly-wing {
  background:
    radial-gradient(
      ellipse at 45% 42%,
      rgba(165, 220, 255, 0.95) 0%,
      rgba(80, 165, 250, 0.82) 35%,
      rgba(35, 105, 225, 0.62) 62%,
      rgba(20, 65, 180, 0.22) 82%,
      transparent 100%
    );
}