feat(ui): add scroll-triggered shine to header and fix button hover overlay z-index

Former-commit-id: c374d2fb1d0db12d813bb75aea765936f348208b

components/layout/Header.tsx

@@ -74,12 +74,24 @@ export function Header({ navLinks }: HeaderProps) {
         }`}
       >
         <div
-          className={`w-full max-w-[1400px] mx-auto transition-all duration-700 ease-[cubic-bezier(0.16,1,0.3,1)] flex items-center justify-between ${
+          className={`relative overflow-hidden w-full max-w-[1400px] mx-auto transition-all duration-700 ease-[cubic-bezier(0.16,1,0.3,1)] flex items-center justify-between ${
             isSolidMode
               ? 'rounded-full bg-white/50 backdrop-blur-xl shadow-[0_8px_32px_rgba(0,0,0,0.08)] border border-white/40 py-2.5 px-6 md:px-8'
               : 'rounded-none bg-transparent py-6 px-4 md:px-8 border border-transparent'
           }`}
         >
+          {/* Scroll triggered shine effect */}
+          {isScrolled && (
+            <div className="absolute inset-0 z-0 pointer-events-none overflow-hidden rounded-inherit">
+              <motion.div 
+                initial={{ left: '-150%' }}
+                animate={{ left: '100%' }}
+                transition={{ duration: 1, ease: [0.16, 1, 0.3, 1], delay: 0.1 }}
+                className="absolute top-0 h-[200%] w-[150%] bg-gradient-to-r from-transparent via-white/50 to-transparent skew-x-[-20deg]"
+              />
+            </div>
+          )}
+
           <Link href={`/${currentLocale}`} className={`relative flex items-center transition-all duration-500 ease-out z-50 group ${isSolidMode ? 'h-9 w-36' : 'h-12 w-48'}`}>
             <Image
               src={(isSolidMode || isMobileMenuOpen) ? "/assets/logo.png" : "/assets/logo-white.png"}
@@ -91,7 +103,7 @@ export function Header({ navLinks }: HeaderProps) {
             />
           </Link>
           
-          <nav className="hidden md:flex items-center gap-8 lg:gap-10">
+          <nav className="relative z-10 hidden md:flex items-center gap-8 lg:gap-10">
             {navLinks && navLinks.length > 0 && navLinks.map((link) => {
               const mappedUrl = link.url.startsWith('/') && !link.url.match(/^\/(en|de)/) 
                 ? `/${currentLocale}${link.url}` 
@@ -140,7 +152,7 @@ export function Header({ navLinks }: HeaderProps) {
             >
               <span className="relative z-10 transition-transform duration-300 group-hover/cta:scale-105 inline-block">{currentLocale === 'de' ? 'Kontakt' : 'Contact'}</span>
               {/* Sleek shine sweep effect */}
-              <span className="absolute top-0 -left-[150%] h-full w-[150%] bg-gradient-to-r from-transparent via-white/30 to-transparent skew-x-[-20deg] group-hover/cta:left-[100%] transition-all duration-700 ease-[cubic-bezier(0.16,1,0.3,1)] z-0" />
+              <span className="absolute top-0 -left-[150%] h-[200%] w-[150%] bg-gradient-to-r from-transparent via-white/30 to-transparent skew-x-[-20deg] group-hover/cta:left-[100%] transition-all duration-1000 ease-[cubic-bezier(0.16,1,0.3,1)] z-30 pointer-events-none" />
             </Link>
           </nav>