--

public/assets/css/style-extra.css

@@ -15,28 +15,35 @@ header {
     will-change: transform;
     background-color: transparent;
     overflow: hidden;
-}
-header::before {
-    content: '';
-    position: absolute;
-    inset: 0;
-    z-index: -1;
-    backdrop-filter: blur(12px);
-    mask-image: linear-gradient(to top,
-        transparent 0%,
-        black 100%
-    );
+    isolation: isolate;
 }
 header::after {
     content: '';
     position: absolute;
     inset: 0;
     z-index: -1;
-    background: linear-gradient(to top,
-        transparent 0%,
-        var(--color-dark-grey) 100%
-    );
+    background: linear-gradient(to top, transparent, var(--color-dark-grey));
+    pointer-events: none;
 }
+.header-blur {
+    position: absolute;
+    inset: 0;
+    z-index: -2;
+    pointer-events: none;
+}
+.header-blur > div {
+    position: absolute;
+    inset: 0;
+    backdrop-filter: blur(var(--blur));
+    -webkit-backdrop-filter: blur(var(--blur));
+    -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

@@ -1,3 +1,15 @@
+/* Progressive Blur */
+(function initProgressiveHeaderBlur() {
+    const header = document.querySelector('header');
+    if (!header) return;
+
+    const container = document.createElement('div');
+    container.className = 'header-blur';
+    container.setAttribute('aria-hidden', 'true');
+    for (let i = 0; i < 5; i++) container.appendChild(document.createElement('div'));
+    header.prepend(container);
+})();
+
 /* View Transition */
 (() => {
     if (!document.startViewTransition) return;