feat: add name reveal animation to header and update brand logo assets

src/components/Footer.astro

@@ -3,7 +3,7 @@
 import { useTranslations } from '@/lib/i18n';
 import type { Lang } from '@/lib/i18n';
 import { FOOTER_LINKS, FOOTER_CREDITS_LINK } from '@/lib/links';
-import brandLogo from '@/assets/jodaz_isotipo.png';
+import brandLogo from '@/assets/jodaz.png';
 
 interface Props {
   lang?: Lang;

src/components/Header.astro

@@ -2,7 +2,7 @@
 // src/components/Header.astro
 import { useTranslations } from '@/lib/i18n';
 import type { Lang } from '@/lib/i18n';
-import brandLogo from '@/assets/jodaz_isotipo.png';
+import brandLogo from '@/assets/jodaz.png';
 import HeaderInteractive from '@/components/HeaderInteractive.tsx';
 
 interface Props {

src/components/HeaderInteractive.tsx

@@ -21,16 +21,27 @@ interface Props {
 const HeaderInteractive = ({ navItems, logoSrc, lang, altLangHref, isOpaque = false }: Props) => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [isScrolled, setIsScrolled] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+  const [isIntroing, setIsIntroing] = useState(true);
 
   useEffect(() => {
     const handleScroll = () => {
       setIsScrolled(window.scrollY > 50);
     };
     window.addEventListener('scroll', handleScroll);
     handleScroll();
-    return () => window.removeEventListener('scroll', handleScroll);
+
+    // Intro animation: show name for 3 seconds on mount
+    const timer = setTimeout(() => setIsIntroing(false), 1500);
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+      clearTimeout(timer);
+    };
   }, []);
 
+  const showName = isHovered || isIntroing || isMenuOpen;
+
   const handleNavClick = (item: NavItem) => {
     if (item.isSection) {
       const element = document.getElementById(item.key);
@@ -68,12 +79,27 @@ const HeaderInteractive = ({ navItems, logoSrc, lang, altLangHref, isOpaque = fa
       <div className="container mx-auto px-4">
         <div className="flex items-center justify-between h-12 lg:h-14">
           {/* Logo */}
-          <a href={lang === 'es' ? '/es/' : '/'} className="flex items-center space-x-3 transition-transform hover:scale-105">
+          <a
+            href={lang === 'es' ? '/es/' : '/'}
+            className="flex items-center transition-transform hover:scale-105 group px-2"
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
+          >
             <img
               src={logoSrc}
-              alt="Jesus Ordosgoitty"
+              alt="Jesus Ordosgoitty Logo"
               className={`h-8 lg:h-9 w-auto transition-all duration-300 ${isScrolled || isMenuOpen || isOpaque ? 'brightness-0 invert' : ''}`}
             />
+            <div
+              className={`flex items-center transition-all duration-700 ease-in-out overflow-hidden whitespace-nowrap ${
+                showName ? 'max-w-[300px] opacity-100' : 'max-w-0 opacity-0'
+              } ${isScrolled || isMenuOpen || isOpaque ? 'text-white' : 'text-blue-50'}`}
+            >
+              <span className={`h-1.5 w-1.5 rounded-full opacity-60 mr-4 ml-4 ${isScrolled || isMenuOpen || isOpaque ? 'bg-white' : 'bg-brand-bright'}`} />
+              <span className="text-lg lg:text-xl font-bold tracking-tight">
+                Jesus Ordosgoitty
+              </span>
+            </div>
           </a>
 
           {/* Desktop Navigation */}