--

public/assets/css/style-extra.css

@@ -133,3 +133,30 @@ header::after {
     background: #FFFFFF40;
     transform: translate(0, 0);
 }
+
+/* Loading Overlay */
+#loading-overlay {
+    view-transition-name: none;
+    position: fixed;
+    inset: 0;
+    z-index: 100000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--color-dark-grey);
+    backdrop-filter: blur(40px);
+    -webkit-backdrop-filter: blur(40px);
+    pointer-events: none;
+    opacity: 1;
+}
+#loading-overlay svg {
+    width: 50vmin;
+    height: 50vmin;
+    opacity: 0;
+    filter: blur(20px);
+    transform: scale(1);
+    will-change: opacity, filter, transform;
+}
+#loading-overlay polyline {
+    will-change: stroke-dashoffset;
+}

public/assets/js/script-extra.js

@@ -303,3 +303,51 @@
         init();
     }
 })();
+
+/* Loading Animation */
+(() => {
+    const overlay = document.getElementById('loading-overlay');
+    if (!overlay) return;
+
+    const svg = overlay.querySelector('svg');
+    const line = overlay.querySelector('polyline');
+    if (!svg || !line) { overlay.remove(); return; }
+
+    const length = line.getTotalLength();
+    line.style.strokeDasharray = length;
+    line.style.strokeDashoffset = length;
+
+    const ease = 'cubic-bezier(0.22, 1, 0.36, 1)';
+    const PHASE_IN = 3000;
+    const PHASE_WAIT = 1000;
+    const PHASE_OUT = 1000;
+    const opts = (d) => ({ duration: d, easing: ease, fill: 'forwards' });
+
+    svg.animate([
+        { opacity: 0, transform: 'scale(1)',   filter: 'blur(20px)' },
+        { opacity: 1, transform: 'scale(0.5)', filter: 'blur(0px)'  }
+    ], opts(PHASE_IN));
+    line.animate([
+        { strokeDashoffset: length },
+        { strokeDashoffset: 0 }
+    ], opts(PHASE_IN));
+
+    setTimeout(() => {
+        svg.animate([
+            { opacity: 1, transform: 'scale(0.5)',  filter: 'blur(0px)'  },
+            { opacity: 0, transform: 'scale(0.75)', filter: 'blur(20px)' }
+        ], opts(PHASE_OUT));
+
+        line.animate([
+            { strokeDashoffset: 0 },
+            { strokeDashoffset: length }
+        ], opts(PHASE_OUT));
+
+        overlay.animate([
+            { opacity: 1, backdropFilter: 'blur(40px)', WebkitBackdropFilter: 'blur(40px)' },
+            { opacity: 0, backdropFilter: 'blur(0px)',  WebkitBackdropFilter: 'blur(0px)'  }
+        ], opts(PHASE_OUT));
+
+        setTimeout(() => overlay.remove(), PHASE_OUT);
+    }, PHASE_IN + PHASE_WAIT);
+})();