diff --git a/public/assets/css/style-extra.css b/public/assets/css/style-extra.css
index 5c21693..f66da49 100644
--- a/public/assets/css/style-extra.css
+++ b/public/assets/css/style-extra.css
@@ -20,27 +20,24 @@ header::after {
     content: '';
     position: absolute;
     inset: 0;
-    z-index: 1;
+    z-index: -1;
     background: linear-gradient(to top, transparent, var(--color-dark-grey));
     pointer-events: none;
 }
-header > *:not(.header-blur) {
-    position: relative;
-    z-index: 2;
-}
 .header-blur {
-    position: absolute;
-    inset: 0;
-    z-index: 0;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 9;
     pointer-events: none;
 }
-.blur-layer {
+.blur-strip {
     position: absolute;
-    inset: 0;
+    left: 0;
+    right: 0;
     backdrop-filter: blur(var(--blur));
     -webkit-backdrop-filter: blur(var(--blur));
-    -webkit-mask-image: var(--mask);
-            mask-image: var(--mask);
 }
 
 /* Fonts */
diff --git a/public/assets/js/script-extra.js b/public/assets/js/script-extra.js
index dae29a9..290a3f9 100644
--- a/public/assets/js/script-extra.js
+++ b/public/assets/js/script-extra.js
@@ -3,42 +3,32 @@
     const header = document.querySelector('header');
     if (!header) return;
 
-    const LAYERS = 8;
+    const STRIPS = 24;
     const MAX_BLUR = 16;
-    const configs = Array.from({ length: LAYERS }, (_, i) => {
-        const t = i / (LAYERS - 1);
-        const blur = MAX_BLUR * Math.pow(t, 2);
-        const from = (i / LAYERS) * 100;
-        const to   = ((i + 1) / LAYERS) * 100;
-        const mid  = (from + to) / 2;
-        return { blur, from, to, mid };
-    });
 
-    const root = document.createElement('div');
-    root.className = 'header-blur';
-    root.setAttribute('aria-hidden', 'true');
+    const container = document.createElement('div');
+    container.className = 'header-blur';
+    container.setAttribute('aria-hidden', 'true');
 
-    for (const cfg of configs) {
-        const layer = document.createElement('div');
-        layer.className = 'blur-layer';
-        layer.style.setProperty('--blur', cfg.blur.toFixed(2) + 'px');
-        const fadeHalf = (cfg.to - cfg.from);
-        const a = Math.max(0, cfg.from - fadeHalf);
-        const b = cfg.from;
-        const c = cfg.to;
-        const d = Math.min(100, cfg.to + fadeHalf);
-        layer.style.setProperty(
-            '--mask',
-            `linear-gradient(to top,
-                transparent ${a}%,
-                black ${b}%,
-                black ${c}%,
-                transparent ${d}%)`
-        );
-        root.appendChild(layer);
+    for (let i = 0; i < STRIPS; i++) {
+        const strength = 1 - i / (STRIPS - 1);
+        const blur = MAX_BLUR * Math.pow(strength, 1.6);
+        const strip = document.createElement('div');
+        strip.className = 'blur-strip';
+        strip.style.setProperty('--blur', blur.toFixed(2) + 'px');
+        strip.style.top = (i * 100 / STRIPS) + '%';
+        strip.style.height = (100 / STRIPS) + '%';
+        container.appendChild(strip);
     }
 
-    header.prepend(root);
+    header.parentNode.insertBefore(container, header);
+
+    const sync = () => {
+        container.style.height = header.getBoundingClientRect().height + 'px';
+    };
+    sync();
+    if ('ResizeObserver' in window) new ResizeObserver(sync).observe(header);
+    else window.addEventListener('resize', sync);
 })();
 
 /* View Transition */