.ball {
  fill: #FFFFFD;
  animation: flicker 2s infinite alternate;
}
/* Разные времена анимации для каждого шара */
.ball:nth-child(1) {
  animation-delay: 0.1s;
}
.ball:nth-child(2) {
  animation-delay: 0.3s;
}
.ball:nth-child(3) {
  animation-delay: 0.5s;
}
.ball:nth-child(4) {
  animation-delay: 0.7s;
}
.ball:nth-child(5) {
  animation-delay: 0.9s;
}
.ball:nth-child(6) {
  animation-delay: 1.1s;
}
.ball:nth-child(7) {
  animation-delay: 1.3s;
}
.ball:nth-child(8) {
  animation-delay: 1.5s;
}
.ball:nth-child(9) {
  animation-delay: 1.7s;
}
.ball:nth-child(10) {
  animation-delay: 1.9s;
}
.ball:nth-child(11) {
  animation-delay: 0.2s;
}
.ball:nth-child(12) {
  animation-delay: 0.4s;
}
.ball:nth-child(13) {
  animation-delay: 0.6s;
}
.ball:nth-child(14) {
  animation-delay: 0.8s;
}
.ball:nth-child(15) {
  animation-delay: 1s;
}
.ball:nth-child(16) {
  animation-delay: 1.2s;
}
.ball:nth-child(17) {
  animation-delay: 1.4s;
}
.ball:nth-child(18) {
  animation-delay: 1.6s;
}
.ball:nth-child(19) {
  animation-delay: 1.8s;
}
@keyframes flicker {
  0%,
  100% {
    fill: #FFFFFD;
    opacity: 1;
  }
  25% {
    fill: #e6ffc9;
    opacity: 0.8;
  }
  50% {
    fill: #8ee922;
    opacity: 0.9;
  }
  75% {
    fill: #00923a;
    opacity: 0.7;
  }
}
.levitating {
  animation: levitate var(--duration, 10s) cubic-bezier(0.4, 0.1, 0.6, 0.9) infinite;
}
.levitating--fast {
  --duration: 6s;
  --x1: 3rem;
  --y1: -5rem;
  --x2: -2rem;
  --y2: -8rem;
  --x3: 4rem;
  --y3: -6rem;
  --x4: -3rem;
  --y4: -10rem;
}
.levitating--wide {
  --duration: 14s;
  --x1: 10rem;
  --y1: -4rem;
  --x2: -12rem;
  --y2: -6rem;
  --x3: 8rem;
  --y3: -10rem;
  --x4: -15rem;
  --y4: -8rem;
}
.levitating--subtle {
  --duration: 9s;
  --x1: 2rem;
  --y1: -3rem;
  --x2: -3rem;
  --y2: -5rem;
  --x3: 4rem;
  --y3: -4rem;
  --x4: -2rem;
  --y4: -6rem;
  --rotate-start: 1deg;
  --rotate-20: -1deg;
  --rotate-40: 0.5deg;
  --rotate-60: -0.5deg;
  --rotate-80: 1.5deg;
}
@keyframes levitate {
  0%,
  100% {
    translate: 0 0;
    rotate: var(--rotate-start, 2deg);
  }
  20% {
    translate: var(--x1, 8rem) var(--y1, -8rem);
    rotate: var(--rotate-20, -1deg);
  }
  40% {
    translate: var(--x2, -6rem) var(--y2, -16rem);
    rotate: var(--rotate-40, 3deg);
  }
  60% {
    translate: var(--x3, 4rem) var(--y3, -24rem);
    rotate: var(--rotate-60, 1deg);
  }
  80% {
    translate: var(--x4, -8rem) var(--y4, -18rem);
    rotate: var(--rotate-80, 4deg);
  }
}