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 @@
+
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 @@
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 @@
+
diff --git a/index.html b/index.html
index f9aeb44..10344a1 100644
--- a/index.html
+++ b/index.html
@@ -20,6 +20,7 @@
diff --git a/index.html b/index.html
index f9aeb44..10344a1 100644
--- a/index.html
+++ b/index.html
@@ -20,6 +20,7 @@
+
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 @@
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 @@
+
@@ -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 @@
@@ -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 @@
+