feat(brand): wire AnimatedLogo into Header + Footer

- Header: replaces AvBeatLogo across all 3 breakpoints (full / no-tagline / iconOnly).
- Footer: replaces AvBeatLogo full variant.
- AnimatedLogo: new iconOnly prop hides the wordmark+tagline span entirely for the mobile breakpoint.

Existing AvBeatLogo file kept on disk for now (unimported, can be deleted later) so we have a quick rollback target if anyone wants the static A+V monogram back.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/components/AnimatedLogo.tsx

@@ -38,6 +38,9 @@ interface Props {
   size?: number;
   variant?: AnimatedLogoVariant;
   showTagline?: boolean;
+  /** If true, emblem only — wordmark + tagline hidden. Use on mobile
+   *  breakpoints where horizontal space is tight. */
+  iconOnly?: boolean;
   className?: string;
 }
 
@@ -45,6 +48,7 @@ export default function AnimatedLogo({
   size = 64,
   variant = 'onLight',
   showTagline = true,
+  iconOnly = false,
   className = '',
 }: Props) {
   // useId for stable, SSR-safe unique IDs (the page can render two of
@@ -162,6 +166,7 @@ export default function AnimatedLogo({
       </svg>
 
       {/* ── WORDMARK + TAGLINE ───────────────────────────────────── */}
+      {!iconOnly && (
       <span
         className="al-text"
         style={{ display: 'inline-flex', flexDirection: 'column', gap: Math.round(size * 0.08), minWidth: 0 }}
@@ -210,6 +215,7 @@ export default function AnimatedLogo({
           </span>
         )}
       </span>
+      )}
 
       {/*
         Component-scoped CSS. Keeping it inline (style jsx-free) so the

src/components/Footer.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Link from "next/link";
 import AppImage from "@/components/ui/AppImage";
-import AvBeatLogo from "@/components/AvBeatLogo";
+import AnimatedLogo from "@/components/AnimatedLogo";
 import {
   LinkedInIcon,
   InstagramIcon,
@@ -112,7 +112,7 @@ export default function Footer() {
             href="/home-page"
             aria-label="AV Beat — home"
             className="flex-shrink-0 opacity-90 hover:opacity-100 transition-opacity">
-            <AvBeatLogo variant="full" emblemSize={36} />
+            <AnimatedLogo size={36} variant="onLight" />
           </Link>
 
           <div className="flex items-center gap-4">

src/components/Header.tsx

@@ -18,7 +18,7 @@ import LanguageSwitcher from "@/components/LanguageSwitcher";
 import AdImage from "@/components/AdImage";
 import EventsDropdown from "@/components/EventsDropdown";
 import AboutDropdown from "@/components/AboutDropdown";
-import AvBeatLogo from "@/components/AvBeatLogo";
+import AnimatedLogo from "@/components/AnimatedLogo";
 import { pickAds } from "@/lib/ads";
 
 interface NavItem {
@@ -269,9 +269,9 @@ export default function Header() {
                 aria-label="AV Beat — homepage"
                 className="flex-shrink-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-blue)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--brand-bg)] rounded-md"
               >
-                <span className="hidden lg:inline-flex"><AvBeatLogo variant="full"     emblemSize={44} /></span>
-                <span className="hidden md:inline-flex lg:hidden"><AvBeatLogo variant="wordmark" emblemSize={40} /></span>
-                <span className="inline-flex md:hidden"><AvBeatLogo variant="icon"     emblemSize={36} /></span>
+                <span className="hidden lg:inline-flex"><AnimatedLogo size={44} variant="onLight" /></span>
+                <span className="hidden md:inline-flex lg:hidden"><AnimatedLogo size={40} variant="onLight" showTagline={false} /></span>
+                <span className="inline-flex md:hidden"><AnimatedLogo size={36} variant="onLight" iconOnly /></span>
               </Link>
 
               {/* Header 728x90 banner — centered between logo and right side */}