feat(ui): make header shine fully scroll-bound using Framer Motion useScroll

Former-commit-id: 0eaf5d4e24987a8fc73b06cb4025dfcd9dcd9c13

components/layout/Header.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 import Link from 'next/link';
 import Image from 'next/image';
 import { usePathname } from 'next/navigation';
-import { motion, AnimatePresence } from 'framer-motion';
+import { motion, AnimatePresence, useScroll, useTransform } from 'framer-motion';
 import { LanguageSwitcher } from './LanguageSwitcher';
 import { Button } from '@/components/ui/Button';
 
@@ -23,6 +23,10 @@ export function Header({ navLinks }: HeaderProps) {
   const [forceSolid, setForceSolid] = React.useState(false);
   const pathname = usePathname() || '/';
 
+  // Scroll bound shine effect
+  const { scrollY } = useScroll();
+  const shineX = useTransform(scrollY, [20, 600], ['-150%', '150%']);
+
   // Determine current locale from pathname
   const currentLocale = pathname.startsWith('/en') ? 'en' : 'de';
 
@@ -80,17 +84,13 @@ export function Header({ navLinks }: HeaderProps) {
               : '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-full">
-              <motion.div 
-                initial={{ x: '-100%' }}
-                animate={{ x: '100%' }}
-                transition={{ duration: 1.5, ease: [0.16, 1, 0.3, 1], delay: 0.3 }}
-                className="absolute top-0 h-[200%] w-[150%] bg-gradient-to-r from-transparent via-white to-transparent skew-x-[-20deg] mix-blend-overlay"
-              />
-            </div>
-          )}
+          {/* Scroll bound shine effect */}
+          <div className="absolute inset-0 z-0 pointer-events-none overflow-hidden rounded-full">
+            <motion.div 
+              style={{ x: shineX }}
+              className={`absolute top-0 h-[200%] w-[150%] bg-gradient-to-r from-transparent via-white to-transparent skew-x-[-20deg] mix-blend-overlay transition-opacity duration-300 ${isSolidMode ? 'opacity-100' : 'opacity-0'}`}
+            />
+          </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