Improve background

css/style.css

@@ -37,15 +37,58 @@ button { font: inherit; color: inherit; background: none; border: 0; cursor: poi
   z-index: 0;
   overflow: hidden;
 }
-.sfB-bg::before {
-  content: '';
+
+@keyframes blob-pulse {
+  0%, 100% { opacity: 0.22; }
+  50%       { opacity: 0.85; }
+}
+
+/* 5 blobs in non-overlapping screen zones, each pulsing at its own pace */
+.sfB-bg > span {
   position: absolute;
-  inset: -10%;
-  background:
-    radial-gradient(ellipse 60% 50% at 80% 0%,   rgba(242,107,107,0.30), transparent 60%),
-    radial-gradient(ellipse 50% 40% at 10% 30%,  rgba(46,139,149,0.25),  transparent 60%),
-    radial-gradient(ellipse 40% 30% at 50% 90%,  rgba(242,201,76,0.18),  transparent 60%);
-  filter: blur(60px);
+  border-radius: 50%;
+  filter: blur(80px);
+  animation: blob-pulse ease-in-out infinite;
+}
+/* coral — top-right */
+.sfB-bg > span:nth-child(1) {
+  width: 44vw; height: 42vh;
+  right: -8%; top: -10%;
+  background: rgba(242, 107, 107, 0.38);
+  animation-duration: 11s;
+  animation-delay: 0s;
+}
+/* teal — left, upper-mid */
+.sfB-bg > span:nth-child(2) {
+  width: 37vw; height: 48vh;
+  left: -8%; top: 36%;
+  background: rgba(46, 139, 149, 0.32);
+  animation-duration: 14s;
+  animation-delay: -3s;
+}
+/* gold — bottom-center-left */
+.sfB-bg > span:nth-child(3) {
+  width: 32vw; height: 30vh;
+  left: 16%; bottom: -8%;
+  background: rgba(242, 201, 76, 0.28);
+  animation-duration: 9s;
+  animation-delay: -6s;
+}
+/* orange — top-left */
+.sfB-bg > span:nth-child(4) {
+  width: 33vw; height: 34vh;
+  left: -5%; top: -8%;
+  background: rgba(232, 87, 42, 0.30);
+  animation-duration: 16s;
+  animation-delay: -1s;
+}
+/* pink — bottom-right */
+.sfB-bg > span:nth-child(5) {
+  width: 38vw; height: 37vh;
+  right: -5%; bottom: 2%;
+  background: rgba(224, 91, 126, 0.26);
+  animation-duration: 12s;
+  animation-delay: -8s;
 }
 .sfB-bg::after {
   content: '';