feat(brand): AnimatedLogo component + Space Grotesk display font

- src/app/layout.tsx: load Space_Grotesk via next/font/google as
  --font-display (weights 500/600/700, self-hosted, display:swap).
- src/components/AnimatedLogo.tsx: standalone animated brand mark.
  Single-A monogram in #2563EB->#1E3A8A tile, Space Grotesk 700
  wordmark, Inter tagline with accent rule. Stroke-draw + cyan signal
  pulse + sheen sweep + text fade. Pure SVG/CSS, no animation libs.
  Respects prefers-reduced-motion. Variants: onLight | onDark.
- src/app/preview/animated-logo/page.tsx: preview route at
  /preview/animated-logo (noindex). Existing AvBeatLogo untouched —
  Header/Footer wiring unchanged.

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

src/app/preview/animated-logo/page.tsx

@@ -0,0 +1,61 @@
+import AnimatedLogo from '@/components/AnimatedLogo';
+
+export const dynamic = 'force-static';
+
+export const metadata = {
+  title: 'AnimatedLogo preview — AV Beat',
+  robots: { index: false, follow: false },
+};
+
+/**
+ * Standalone preview for /preview/animated-logo. Renders the new
+ * AnimatedLogo component in both light and dark variants at several
+ * sizes so you can eyeball the animation before any wiring decisions.
+ */
+export default function AnimatedLogoPreviewPage() {
+  return (
+    <div style={{ minHeight: '100vh', background: '#F8FAFC', padding: '48px 32px', fontFamily: 'var(--font-sans)' }}>
+      <h1 style={{ fontSize: 32, fontWeight: 800, color: '#0F172A', marginBottom: 8 }}>AnimatedLogo preview</h1>
+      <p style={{ fontSize: 14, color: '#475569', marginBottom: 40 }}>
+        Standalone — not wired into Header or Footer. Reload the page to replay the mount animation.
+      </p>
+
+      <section style={{ display: 'flex', flexDirection: 'column', gap: 40 }}>
+        <div style={{ background: '#FFFFFF', border: '1px solid #DCE6F2', borderRadius: 8, padding: 32 }}>
+          <h2 style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#475569', marginBottom: 24 }}>
+            onLight · default sizes
+          </h2>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
+            <AnimatedLogo size={48} variant="onLight" />
+            <AnimatedLogo size={64} variant="onLight" />
+            <AnimatedLogo size={96} variant="onLight" />
+            <AnimatedLogo size={128} variant="onLight" />
+          </div>
+        </div>
+
+        <div style={{ background: '#0F172A', border: '1px solid #1E293B', borderRadius: 8, padding: 32 }}>
+          <h2 style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#94A3B8', marginBottom: 24 }}>
+            onDark · default sizes
+          </h2>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
+            <AnimatedLogo size={48} variant="onDark" />
+            <AnimatedLogo size={64} variant="onDark" />
+            <AnimatedLogo size={96} variant="onDark" />
+            <AnimatedLogo size={128} variant="onDark" />
+          </div>
+        </div>
+
+        <div style={{ background: '#FFFFFF', border: '1px solid #DCE6F2', borderRadius: 8, padding: 32 }}>
+          <h2 style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#475569', marginBottom: 24 }}>
+            no tagline · favicon-style
+          </h2>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 32 }}>
+            <AnimatedLogo size={48} variant="onLight" showTagline={false} />
+            <AnimatedLogo size={64} variant="onLight" showTagline={false} />
+            <AnimatedLogo size={96} variant="onLight" showTagline={false} />
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}