.bg-orbs {
  position: absolute;
  inset: 0;
  z-index: 0;
  transform: translateZ(0);
  overflow: hidden;
}

.orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(3px);
  opacity: 0.30;
  will-change: transform;
  transform: translate3d(0,0,0);

  //background: radial-gradient(circle, rgba(255,255,255,0.20), rgba(255,255,255,0) 60%);
  background: red;
}

.orb--1 { width: 100px; height: 100px; top: 2%; left: 18%; animation: orb1 6s ease-in-out infinite alternate; }
.orb--2 { width: 320px; height: 320px; top: 6%;  left: 72%; animation: orb2 6s ease-in-out infinite alternate; }

@keyframes orb1 { to { transform: translate3d(30px, 18px, 0); } }
@keyframes orb2 { to { transform: translate3d(-26px, 34px, 0); } }
@keyframes orb3 { to { transform: translate3d(22px, -28px, 0); } }
@keyframes orb4 { to { transform: translate3d(34px, -14px, 0); } }
@keyframes orb5 { to { transform: translate3d(-18px, -18px, 0); } }
@keyframes orb6 { to { transform: translate3d(-34px, 12px, 0); } }

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