.bg-float-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

.bg-item {
  --peak: 0.09;
  position: absolute;
  bottom: -90px;
  left: var(--x);
  width: var(--size);
  color: var(--accent);
  opacity: 0;
  animation: bg-float var(--duration) linear infinite;
  animation-delay: var(--delay);
  will-change: transform, opacity;
}

.bg-item svg {
  display: block;
  width: 100%;
  height: auto;
}

@keyframes bg-float {
  0% {
    transform: translate3d(0, 0, 0) rotate(var(--rot-a));
    opacity: 0;
  }
  8% {
    opacity: var(--peak);
  }
  50% {
    transform: translate3d(var(--drift), -55vh, 0) rotate(calc(var(--rot-a) + 14deg));
    opacity: var(--peak);
  }
  92% {
    opacity: var(--peak);
  }
  100% {
    transform: translate3d(calc(var(--drift) * -0.4), -115vh, 0) rotate(var(--rot-b));
    opacity: 0;
  }
}