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>
 

components/layout/LanguageSwitcher.tsx

@@ -2,6 +2,7 @@
 
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
+import { HoverShineOverlay } from '@/components/ui/HoverShineOverlay';
 
 interface LanguageSwitcherProps {
   mobile?: boolean;
@@ -29,16 +30,18 @@ export function LanguageSwitcher({ mobile = false, isSolidMode = false }: Langua
           <Link
             key={loc.code}
             href={getSwitchedUrl(loc.code)}
-            className={`flex items-center gap-3 px-5 py-3 rounded-xl text-lg font-semibold transition-all duration-300 ${
+            className={`group relative overflow-hidden flex items-center gap-3 px-5 py-3 rounded-xl text-lg font-semibold transition-all duration-300 ${
               currentLocale === loc.code
                 ? 'bg-primary/10 text-primary border border-primary/20'
                 : 'text-text-secondary hover:bg-neutral-50 border border-transparent'
             }`}
           >
-            <span className="text-2xl" aria-hidden="true">{loc.flag}</span>
-            <span>{loc.fullLabel}</span>
+            <HoverShineOverlay shineColor="via-primary/5" />
+            
+            <span className="relative z-10 text-2xl" aria-hidden="true">{loc.flag}</span>
+            <span className="relative z-10">{loc.fullLabel}</span>
             {currentLocale === loc.code && (
-              <svg className="w-5 h-5 ml-auto text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
+              <svg className="relative z-10 w-5 h-5 ml-auto text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
                 <polyline points="20 6 9 17 4 12" />
               </svg>
             )}
@@ -54,7 +57,9 @@ export function LanguageSwitcher({ mobile = false, isSolidMode = false }: Langua
     : 'bg-white/10 backdrop-blur-sm border-white/10';
 
   return (
-    <div className={`flex items-center rounded-full p-0.5 border ${containerClass} transition-colors duration-300`}>
+    <div className={`group relative overflow-hidden flex items-center rounded-full p-0.5 border ${containerClass} transition-colors duration-300`}>
+      <HoverShineOverlay shineColor={isSolidMode ? "via-primary/10" : "via-white/20"} />
+      
       {locales.map((loc) => {
         const isActive = currentLocale === loc.code;
         
@@ -71,7 +76,7 @@ export function LanguageSwitcher({ mobile = false, isSolidMode = false }: Langua
           <Link
             key={loc.code}
             href={getSwitchedUrl(loc.code)}
-            className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-bold uppercase tracking-wider transition-all duration-300 ${linkClass}`}
+            className={`relative z-10 flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-bold uppercase tracking-wider transition-all duration-300 ${linkClass}`}
             aria-label={`Switch to ${loc.fullLabel}`}
           >
             <span className="text-sm" aria-hidden="true">{loc.flag}</span>

components/ui/Button.tsx

@@ -61,7 +61,7 @@ export function ButtonOverlay({ variant = 'primary' }: { variant?: keyof typeof
   return (
     <span
       className={cn(
-        'absolute top-0 -left-[150%] h-full w-[150%] bg-gradient-to-r from-transparent to-transparent skew-x-[-20deg] group-hover/btn:left-[100%] transition-all duration-700 ease-[cubic-bezier(0.16,1,0.3,1)] z-0',
+        'absolute top-0 -left-[150%] h-[200%] w-[150%] bg-gradient-to-r from-transparent to-transparent skew-x-[-20deg] group-hover/btn:left-[100%] transition-all duration-1000 ease-[cubic-bezier(0.16,1,0.3,1)] z-30 pointer-events-none',
         buttonShineColorsMap[variant]
       )}
     />