.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);
  }
}