/* ==========================================
   60FPS HARDWARE-ACCELERATED BACKGROUND
   ========================================== */

/* Forces the browser to isolate these elements onto the GPU */
.blob-layer, .blob-element {
  will-change: transform;
  transform-box: fill-box;
  transform-origin: center;
}

/* --- Blob 3 Animations (Original timing: 25s, 12s, 9s) --- */
.b3-x { animation: b3X 25s infinite ease-in-out; }
.b3-y { animation: b3Y 12s infinite ease-in-out; }
.b3-r { animation: b3R 9s infinite linear; }

@keyframes b3X {
  0%, 100% { transform: translateX(0%); }
  50% { transform: translateX(25%); }
}
@keyframes b3Y {
  0%, 100% { transform: translateY(0%); }
  50% { transform: translateY(25%); }
}
@keyframes b3R {
  0% { transform: rotate(360deg); }
  100% { transform: rotate(0deg); }
}

/* --- Blob 1 Animations (Original timing: 20s, 21s, 7s) --- */
.b1-x { animation: b1X 20s infinite ease-in-out; }
.b1-y { animation: b1Y 21s infinite ease-in-out; }
.b1-r { animation: b1R 7s infinite linear; }

@keyframes b1X {
  0%, 100% { transform: translateX(25%); }
  50% { transform: translateX(0%); }
}
@keyframes b1Y {
  0%, 100% { transform: translateY(0%); }
  50% { transform: translateY(25%); }
}
@keyframes b1R {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* --- Blob 2 Animations (Original timing: 23s, 24s, 12s) --- */
.b2-x { animation: b2X 23s infinite ease-in-out; }
.b2-y { animation: b2Y 24s infinite ease-in-out; }
.b2-r { animation: b2R 12s infinite linear; }

@keyframes b2X {
  0%, 100% { transform: translateX(-25%); }
  50% { transform: translateX(0%); }
}
@keyframes b2Y {
  0%, 100% { transform: translateY(0%); }
  50% { transform: translateY(50%); }
}
@keyframes b2R {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}