From ec5c4ebbfb43aa9a0cfbfc092241adb7671a07a4 Mon Sep 17 00:00:00 2001
From: Marc Mintel <marc@mintel.me>
Date: Fri, 8 May 2026 11:05:34 +0200
Subject: [PATCH] fix: resolve double logo overlay by using pure CSS mask
 architecture

Former-commit-id: 3ad0a0ec6a225180c314efeac73f9a24baa98b2a
---
 components/providers/InitialLoader.tsx        | 40 +++++++++----------
 .../providers/PageTransitionShutter.tsx       | 40 +++++++++----------
 2 files changed, 38 insertions(+), 42 deletions(-)

diff --git a/components/providers/InitialLoader.tsx b/components/providers/InitialLoader.tsx
index a6387cf10..eeb11bcf5 100644
--- a/components/providers/InitialLoader.tsx
+++ b/components/providers/InitialLoader.tsx
@@ -74,31 +74,29 @@ export function InitialLoader({ shouldShowLoader = true }: { shouldShowLoader?:
             transition={{ duration: 1.2, ease: [0.16, 1, 0.3, 1] }}
             className="relative z-10 flex flex-col items-center w-full px-4"
           >
-            {/* Logo Container with Shimmer / Reflection effect */}
-            <div className="relative w-64 h-20 sm:w-80 sm:h-24 mb-12 overflow-hidden mix-blend-plus-lighter">
-              <Image 
-                src="/assets/logo-white.png"
-                alt="E-TIB Gruppe"
-                fill
-                className="object-contain filter drop-shadow-[0_0_15px_rgba(255,255,255,0.2)]"
-                priority
-              />
-              {/* Animated Light Sweep over Logo */}
+            {/* Single Masked Logo Container to prevent double-logo offset */}
+            <div 
+              className="relative w-64 h-20 sm:w-80 sm:h-24 mb-12 filter drop-shadow-[0_0_15px_rgba(255,255,255,0.15)]"
+              style={{
+                WebkitMaskImage: 'url(/assets/logo-white.png)',
+                WebkitMaskSize: 'contain',
+                WebkitMaskRepeat: 'no-repeat',
+                WebkitMaskPosition: 'center',
+                maskImage: 'url(/assets/logo-white.png)',
+                maskSize: 'contain',
+                maskRepeat: 'no-repeat',
+                maskPosition: 'center'
+              }}
+            >
+              {/* Base logo color (slightly dimmed to make the sweep visible) */}
+              <div className="absolute inset-0 bg-white/70" />
+              
+              {/* Sweeping intense white light */}
               <motion.div
-                className="absolute inset-0 bg-gradient-to-r from-transparent via-white/80 to-transparent skew-x-[-25deg]"
+                className="absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent skew-x-[-25deg]"
                 initial={{ left: '-150%' }}
                 animate={{ left: '250%' }}
                 transition={{ duration: 2.5, ease: "easeInOut", repeat: Infinity, repeatDelay: 0.5 }}
-                style={{ 
-                  WebkitMaskImage: 'url(/assets/logo-white.png)',
-                  WebkitMaskSize: 'contain',
-                  WebkitMaskRepeat: 'no-repeat',
-                  WebkitMaskPosition: 'center',
-                  maskImage: 'url(/assets/logo-white.png)',
-                  maskSize: 'contain',
-                  maskRepeat: 'no-repeat',
-                  maskPosition: 'center'
-                }}
               />
             </div>
             
diff --git a/components/providers/PageTransitionShutter.tsx b/components/providers/PageTransitionShutter.tsx
index 5777540e2..f5bb3788f 100644
--- a/components/providers/PageTransitionShutter.tsx
+++ b/components/providers/PageTransitionShutter.tsx
@@ -32,31 +32,29 @@ export function PageTransitionShutter() {
             transition={{ duration: 0.4, delay: 0.2 }}
             className="relative z-10 flex flex-col items-center w-full px-4"
           >
-            {/* Logo Container with Shimmer / Reflection effect */}
-            <div className="relative w-48 h-16 sm:w-64 sm:h-20 overflow-hidden mix-blend-plus-lighter">
-              <Image 
-                src="/assets/logo-white.png"
-                alt="E-TIB Gruppe"
-                fill
-                className="object-contain filter drop-shadow-[0_0_15px_rgba(255,255,255,0.2)]"
-                priority
-              />
-              {/* Animated Light Sweep over Logo (faster for page transitions) */}
+            {/* Single Masked Logo Container to prevent double-logo offset */}
+            <div 
+              className="relative w-48 h-16 sm:w-64 sm:h-20 filter drop-shadow-[0_0_15px_rgba(255,255,255,0.15)]"
+              style={{
+                WebkitMaskImage: 'url(/assets/logo-white.png)',
+                WebkitMaskSize: 'contain',
+                WebkitMaskRepeat: 'no-repeat',
+                WebkitMaskPosition: 'center',
+                maskImage: 'url(/assets/logo-white.png)',
+                maskSize: 'contain',
+                maskRepeat: 'no-repeat',
+                maskPosition: 'center'
+              }}
+            >
+              {/* Base logo color (slightly dimmed to make the sweep visible) */}
+              <div className="absolute inset-0 bg-white/70" />
+              
+              {/* Sweeping intense white light */}
               <motion.div
-                className="absolute inset-0 bg-gradient-to-r from-transparent via-white/80 to-transparent skew-x-[-25deg]"
+                className="absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent skew-x-[-25deg]"
                 initial={{ left: '-150%' }}
                 animate={{ left: '250%' }}
                 transition={{ duration: 1.5, ease: "easeInOut", repeat: Infinity, repeatDelay: 0.2 }}
-                style={{ 
-                  WebkitMaskImage: 'url(/assets/logo-white.png)',
-                  WebkitMaskSize: 'contain',
-                  WebkitMaskRepeat: 'no-repeat',
-                  WebkitMaskPosition: 'center',
-                  maskImage: 'url(/assets/logo-white.png)',
-                  maskSize: 'contain',
-                  maskRepeat: 'no-repeat',
-                  maskPosition: 'center'
-                }}
               />
             </div>