From ab99588e142f5af9517017bea15f0e88be2b3521 Mon Sep 17 00:00:00 2001
From: Javier Blanco <javierblancodetorres@gmail.com>
Date: Sat, 2 May 2026 12:26:14 +0700
Subject: [PATCH] Improve background

---
 classes/index.html   |  1 +
 connect/index.html   |  1 +
 css/style.css        | 59 ++++++++++++++++++++++++++++++++++++++------
 festivals/index.html |  1 +
 index.html           |  1 +
 schedule/index.html  |  3 ++-
 studios/index.html   |  1 +
 7 files changed, 58 insertions(+), 9 deletions(-)
diff --git a/classes/index.html b/classes/index.html
index a432643..b09f065 100644
--- a/classes/index.html
+++ b/classes/index.html
@@ -19,6 +19,7 @@
 <body>
 
   <div class="sfB-bg" aria-hidden="true">
+    <span></span><span></span><span></span><span></span><span></span>
     <div class="sfB-palms">
       <img class="sfB-palm corner-tl" src="../assets/palm-fronds-left.png" alt=""
         style="--sway:2.5deg;animation-duration:8s;animation-delay:0s">
diff --git a/connect/index.html b/connect/index.html
index 0fb6e15..92e0625 100644
--- a/connect/index.html
+++ b/connect/index.html
@@ -19,6 +19,7 @@
 <body>
 
   <div class="sfB-bg" aria-hidden="true">
+    <span></span><span></span><span></span><span></span><span></span>
     <div class="sfB-palms">
       <img class="sfB-palm corner-tl" src="../assets/palm-fronds-left.png" alt=""
         style="--sway:2.5deg;animation-duration:8s;animation-delay:0s">
diff --git a/css/style.css b/css/style.css
index 03cc716..8b79ad0 100644
--- a/css/style.css
+++ b/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: '';
diff --git a/festivals/index.html b/festivals/index.html
index 615f22b..a624d07 100644
--- a/festivals/index.html
+++ b/festivals/index.html
@@ -19,6 +19,7 @@
 <body>
 
   <div class="sfB-bg" aria-hidden="true">
+    <span></span><span></span><span></span><span></span><span></span>
     <div class="sfB-palms">
       <img class="sfB-palm corner-tl" src="../assets/palm-fronds-left.png" alt=""
         style="--sway:2.5deg;animation-duration:8s;animation-delay:0s">
diff --git a/index.html b/index.html
index f9aeb44..10344a1 100644
--- a/index.html
+++ b/index.html
@@ -20,6 +20,7 @@
 
   <!-- Background blobs -->
   <div class="sfB-bg" aria-hidden="true">
+    <span></span><span></span><span></span><span></span><span></span>
     <div class="sfB-palms">
       <img class="sfB-palm corner-tl" src="assets/palm-fronds-left.png" alt=""
         style="--sway:2.5deg;animation-duration:8s;animation-delay:0s">
diff --git a/schedule/index.html b/schedule/index.html
index 4a943a7..48e9832 100644
--- a/schedule/index.html
+++ b/schedule/index.html
@@ -19,6 +19,7 @@
 <body>
 
   <div class="sfB-bg" aria-hidden="true">
+    <span></span><span></span><span></span><span></span><span></span>
     <div class="sfB-palms">
       <img class="sfB-palm corner-tl" src="../assets/palm-fronds-left.png" alt=""
         style="--sway:2.5deg;animation-duration:8s;animation-delay:0s">
@@ -145,7 +146,7 @@
             if (f === 'all') { row.style.display = ''; return; }
             const music = row.querySelector('.col-music')?.textContent.toLowerCase() || '';
             const city = row.querySelector('.col-city')?.textContent.toLowerCase() || '';
-            const show = music.includes(f) || city.includes(f === 'danang' ? 'da nang' : f);
+            const show = music.includes(f) || city.includes(f === 'danang' ? 'da nang' : f === 'hoian' ? 'hoi an' : f);
             row.style.display = show ? '' : 'none';
           });
         });
diff --git a/studios/index.html b/studios/index.html
index 75375ce..ca0b706 100644
--- a/studios/index.html
+++ b/studios/index.html
@@ -19,6 +19,7 @@
 <body>
 
   <div class="sfB-bg" aria-hidden="true">
+    <span></span><span></span><span></span><span></span><span></span>
     <div class="sfB-palms">
       <img class="sfB-palm corner-tl" src="../assets/palm-fronds-left.png" alt=""
         style="--sway:2.5deg;animation-duration:8s;animation-delay:0s">
