.floating-orb {
  --dx: 12px;
  --dy: -18px;
  --duration: 12s;
  --delay: -2s;
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 23%, #f2f2f2 48%, #c4c8cd 78%, #fff 100%);
  box-shadow: 0 1px 3px rgba(90, 96, 105, .16);
  animation: floating-orb-drift var(--duration) var(--delay) ease-in-out infinite alternate;
  will-change: transform, opacity;
}

.floating-orb.is-cluster { border-radius: 52% 48% 55% 45%; }

.floating-orb.is-cluster::before,
.floating-orb.is-cluster::after {
  content: "";
  position: absolute;
  width: 72%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: inherit;
  box-shadow: inherit;
}

.floating-orb.is-cluster::before { left: -31%; top: 22%; }
.floating-orb.is-cluster::after { right: -27%; top: 34%; }

@keyframes floating-orb-drift {
  0% { transform: translate3d(calc(var(--dx) * -.55), calc(var(--dy) * -.45), 0) scale(.95); opacity: .82; }
  48% { transform: translate3d(calc(var(--dx) * .2), calc(var(--dy) * -.1), 0) scale(1.04); opacity: 1; }
  100% { transform: translate3d(var(--dx), var(--dy), 0) scale(.98); opacity: .9; }
}

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