--

public/assets/css/style-extra.css

@@ -15,23 +15,26 @@ header {
     will-change: transform;
     background-color: transparent;
     overflow: hidden;
-    isolation: isolate;
 }
 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: -2;
+    z-index: 0;
     pointer-events: none;
 }
-.header-blur > div {
+.blur-layer {
     position: absolute;
     inset: 0;
     backdrop-filter: blur(var(--blur));
@@ -39,11 +42,6 @@ header::after {
     -webkit-mask-image: linear-gradient(to top, transparent var(--from), black var(--to));
             mask-image: linear-gradient(to top, transparent var(--from), black var(--to));
 }
-.header-blur > div:nth-child(1) { --blur: 1px;  --from: 0%;   --to: 20%;  }
-.header-blur > div:nth-child(2) { --blur: 2px;  --from: 20%;  --to: 40%;  }
-.header-blur > div:nth-child(3) { --blur: 4px;  --from: 40%;  --to: 60%;  }
-.header-blur > div:nth-child(4) { --blur: 8px;  --from: 60%;  --to: 80%;  }
-.header-blur > div:nth-child(5) { --blur: 16px; --from: 80%;  --to: 100%; }
 
 /* Fonts */
 @font-face {

public/assets/js/script-extra.js

@@ -3,11 +3,30 @@
     const header = document.querySelector('header');
     if (!header) return;
 
-    const container = document.createElement('div');
+    const configs = [
-    container.className = 'header-blur';
+        { blur: 2,  from: '0%',  to: '20%'  },
-    container.setAttribute('aria-hidden', 'true');
+        { blur: 3,  from: '20%', to: '40%'  },
-    for (let i = 0; i < 5; i++) container.appendChild(document.createElement('div'));
+        { blur: 5,  from: '40%', to: '60%'  },
-    header.prepend(container);
+        { blur: 8,  from: '60%', to: '80%'  },
+        { blur: 13, from: '80%', to: '100%' },
+    ];
+
+    const root = document.createElement('div');
+    root.className = 'header-blur';
+    root.setAttribute('aria-hidden', 'true');
+
+    let parent = root;
+    for (const cfg of configs) {
+        const layer = document.createElement('div');
+        layer.className = 'blur-layer';
+        layer.style.setProperty('--blur', cfg.blur + 'px');
+        layer.style.setProperty('--from', cfg.from);
+        layer.style.setProperty('--to', cfg.to);
+        parent.appendChild(layer);
+        parent = layer;
+    }
+
+    header.prepend(root);
 })();
 
 /* View Transition */