feat: add mask-based shine sweep effect to header logo on hover

Former-commit-id: b93efa80bbbe4a6645e23a5848252bfbce0d9248

components/layout/Header.tsx

@@ -107,6 +107,22 @@ export function Header({ navLinks }: HeaderProps) {
               priority
               sizes="192px"
             />
+            {/* Masked sweep overlay on hover */}
+            <div 
+              className="absolute inset-0 z-10 pointer-events-none transition-transform duration-500 origin-left group-hover:scale-105"
+              style={{
+                WebkitMaskImage: `url(${(isSolidMode || isMobileMenuOpen) ? "/assets/logo.png" : "/assets/logo-white.png"})`,
+                WebkitMaskSize: 'contain',
+                WebkitMaskRepeat: 'no-repeat',
+                WebkitMaskPosition: 'left center',
+                maskImage: `url(${(isSolidMode || isMobileMenuOpen) ? "/assets/logo.png" : "/assets/logo-white.png"})`,
+                maskSize: 'contain',
+                maskRepeat: 'no-repeat',
+                maskPosition: 'left center'
+              }}
+            >
+              <div className="absolute top-0 -left-[150%] h-[200%] w-[150%] bg-gradient-to-r from-transparent via-white to-transparent skew-x-[-25deg] group-hover:left-[150%] transition-all duration-1000 ease-[cubic-bezier(0.16,1,0.3,1)]" />
+            </div>
           </TransitionLink>
           
           <nav className="relative z-10 hidden md:flex items-center gap-8 lg:gap-10">