feat(website): feature Vee, the lens-inspector mascot, in the hero

Bring the new character mascot onto the homepage: the caped
lens-inspector, as an optimized autoplaying video loop in place of the
abstract lens animation.

- public/mascot.mp4 (185 KB, h264) + a poster frame — transcoded and
  cropped from the source render; webm dropped (it came out larger).
- HeroMascot: autoplay/muted/loop inside a framed "lens-port" stage that
  reads intentionally in both themes; reduced-motion shows the static
  poster and stops the caption rotation. basePath-aware asset src.
- Removed the now-unused HeroLens.

The themeable lens mark stays as the favicon/header/footer logo — same
identity (the creature and its lens), and it reads at sizes a detailed
character can't. Static export verified (assets in out/); both themes checked.

Author: New1Direction

website/app/(home)/styles/home.css

@@ -30,6 +30,43 @@
   border: 1px solid var(--border-2);
   box-shadow: 0 24px 70px -26px var(--accent-glow);
 }
+
+/* Video mascot — framed "viewport" so the clip's neutral backdrop reads as an
+   intentional lens-port in both themes. */
+.hero-mascot {
+  margin: 24px 0 6px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+}
+.hero-mascot-stage {
+  position: relative;
+  width: clamp(168px, 38vw, 236px);
+  aspect-ratio: 460 / 539;
+  border-radius: 28px;
+  overflow: hidden;
+  background: #c2c3c8;
+  border: 1px solid var(--border-2);
+  box-shadow: 0 34px 80px -32px var(--accent-glow), var(--shadow-md);
+}
+.hero-mascot-stage img,
+.hero-mascot-stage video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+/* Soft inner ring + an accent wash from below so the port feels lit, not pasted. */
+.hero-mascot-stage::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35),
+    inset 0 -56px 60px -34px var(--accent-glow);
+}
 .hero-say {
   font-size: 0.9rem;
   color: var(--muted);

website/components/home/Hero.tsx

@@ -1,5 +1,5 @@
 import Link from 'next/link';
-import { HeroLens } from './HeroLens';
+import { HeroMascot } from './HeroMascot';
 import { GITHUB_URL } from '@/components/site/SiteHeader';
 
 export function Hero() {
@@ -10,7 +10,7 @@ export function Hero() {
           <span className="pulse" /> Chrome Extension · Manifest V3 · v3.0
         </span>
 
-        <HeroLens />
+        <HeroMascot />
 
         <h1 id="hero-heading" className="hero-title">
           Read code before

website/components/home/HeroLens.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+// Static assets live in public/ and are NOT auto-prefixed with the GitHub
+// Pages basePath the way next/link is — so we prefix the <video>/<img> src by hand.
+const BASE = process.env.NEXT_PUBLIC_BASE_PATH ?? '';
+
+const CAPTIONS = [
+  'Lenses up — reading past the README.',
+  'Tracing how the pieces actually fit.',
+  'Strong fit? You’ll get the thumbs-up.',
+];
+
+const ALT = 'Vee, the RepoLens mascot, peering through a lens';
+
+/**
+ * The hero mascot: an autoplaying, muted, looping clip of Vee in a framed
+ * stage. Under reduced-motion we show the poster frame instead — no autoplay,
+ * no loop — and the caption stops rotating.
+ */
+export function HeroMascot() {
+  const [reduced, setReduced] = useState(false);
+  const [i, setI] = useState(0);
+
+  useEffect(() => {
+    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    setReduced(reduce);
+    if (reduce) return;
+    const id = setInterval(() => setI((n) => (n + 1) % CAPTIONS.length), 3400);
+    return () => clearInterval(id);
+  }, []);
+
+  return (
+    <div className="hero-mascot">
+      <div className="hero-mascot-stage">
+        {reduced ? (
+          <img src={`${BASE}/mascot-poster.jpg`} alt={ALT} width={230} height={270} />
+        ) : (
+          <video
+            className="hero-mascot-vid"
+            autoPlay
+            muted
+            loop
+            playsInline
+            poster={`${BASE}/mascot-poster.jpg`}
+            aria-label={ALT}
+            width={230}
+            height={270}
+          >
+            <source src={`${BASE}/mascot.mp4`} type="video/mp4" />
+          </video>
+        )}
+      </div>
+      <p className="hero-say">{CAPTIONS[reduced ? 0 : i]}</p>
+    </div>
+  );
+}