feat(site): animate the landing page mascot (#53)

## Related Issue

No linked issue. This change follows a direct maintainer request for the
landing page.

## Problem

The landing page used a static mascot. The supplied animation was 6.98
MB, included audio, contained dark fade frames, and showed an opaque
rectangular background against the page.

## What changed

- Replaced the static hero mascot with an 811 KB H.264 animation with
fast-start metadata and no audio.
- Trimmed the faded frames, built a forward-and-reverse loop, masked the
video edges into the page background, and removed the eyebrow artwork
from every frame.
- Kept the mascot itself as an accessible play/pause target, without a
visible control overlay, and added live reduced-motion preference
handling.

## Verification

- `pnpm --filter @pythoughts/site build`
- Browser checks for autoplay, mascot play/pause behavior, live
reduced-motion changes, responsive layout, and edge blending
- FFmpeg contact-sheet inspection across the installed loop
- Pixel-mask verification across all 239 frames: zero residual eyebrow
pixels in both tracked regions
- `pnpm lint` (passes with existing warnings)
- Pre-push gate passed: attribution scan, sherif, lint, Nix hash
freshness, changed-package typecheck, and changed tests
- Full `pnpm test`: 650 passed, 11 skipped, and 1 unrelated
environment-sensitive failure in `test/cli/export.test.ts` because the
non-interactive harness reported no shell

## Checklist

- [x] I have read the
[CONTRIBUTING](https://github.com/Pythoughts-labs/pythinker-code/blob/main/CONTRIBUTING.md)
document.
- [x] I have linked a related issue, or explained the problem above.
- [ ] I have added tests that prove my feature works. (No automated site
UI test harness; browser and media checks cover this change.)
- [x] Ran `gen-changesets` skill, or this PR needs no changeset.
(Private marketing site only; no released package changes.)
- [x] Ran `gen-docs` skill, or this PR needs no doc update. (The landing
page is the changed user-facing surface.)

Author: elkaix

apps/site/public/pythinker-hero-clean-v2.mp4

@@ -61,6 +61,8 @@ const vscodeInstallCommand = 'code --install-extension pythoughts.pythinker-code
 
 const copiedCommand = ref('');
 const mobileMenu = ref(null);
+const heroVideo = ref(null);
+const heroVideoPlaying = ref(false);
 const menuButton = ref(null);
 const menuOpen = ref(false);
 const activeTerminalDemo = ref(terminalDemos[0]);
@@ -70,6 +72,7 @@ let resetTimer;
 let menuCloseTimer;
 let terminalTimer;
 let revealObserver;
+let reducedMotionQuery;
 let menuOpenedByHover = false;
 
 function fallbackCopy(text) {
@@ -168,11 +171,32 @@ function onDocumentKeydown(event) {
   if (event.key === 'Escape') closeMenu();
 }
 
+async function playHeroVideo() {
+  try {
+    await heroVideo.value?.play();
+  } catch {
+    heroVideoPlaying.value = false;
+  }
+}
+
+function syncHeroMotionPreference() {
+  if (reducedMotionQuery.matches) heroVideo.value?.pause();
+  else void playHeroVideo();
+}
+
+function toggleHeroVideo() {
+  if (heroVideo.value?.paused) void playHeroVideo();
+  else heroVideo.value?.pause();
+}
+
 onMounted(() => {
   document.addEventListener('pointerdown', onDocumentPointerdown);
   document.addEventListener('keydown', onDocumentKeydown);
+  reducedMotionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+  reducedMotionQuery.addEventListener('change', syncHeroMotionPreference);
+  syncHeroMotionPreference();
   playTerminalDemo();
-  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+  if (reducedMotionQuery.matches) return;
 
   revealObserver = new IntersectionObserver((entries) => {
     for (const entry of entries) {
@@ -190,6 +214,7 @@ onUnmounted(() => {
   clearTimeout(menuCloseTimer);
   clearTerminalPlayback();
   revealObserver?.disconnect();
+  reducedMotionQuery?.removeEventListener('change', syncHeroMotionPreference);
   document.removeEventListener('pointerdown', onDocumentPointerdown);
   document.removeEventListener('keydown', onDocumentKeydown);
 });
@@ -225,7 +250,28 @@ onUnmounted(() => {
   <main id="top">
     <header class="hero container">
       <div class="hero-copy">
-        <PythinkerMascot :width="72" :height="90" />
+        <button
+          class="hero-mascot-video"
+          type="button"
+          :aria-label="heroVideoPlaying ? 'Pause mascot animation' : 'Play mascot animation'"
+          @click="toggleHeroVideo"
+        >
+          <video
+            ref="heroVideo"
+            autoplay
+            muted
+            loop
+            playsinline
+            preload="metadata"
+            width="1280"
+            height="720"
+            aria-hidden="true"
+            @play="heroVideoPlaying = true"
+            @pause="heroVideoPlaying = false"
+          >
+            <source src="/pythinker-hero-clean-v2.mp4" type="video/mp4" />
+          </video>
+        </button>
         <h1>Pythinker Code</h1>
         <p class="hero-accent">Think first, then code.</p>
         <p class="hero-lead">An open-source AI engineering agent for your terminal. It reads your repo, edits files, runs commands, and iterates until the job is done.</p>
@@ -722,6 +768,37 @@ onUnmounted(() => {
   line-height: 1.38;
 }
 
+.hero-mascot-video {
+  position: relative;
+  display: block;
+  width: clamp(160px, 16vw, 200px);
+  margin-inline: auto;
+  padding: 0;
+  border: 0;
+  appearance: none;
+  aspect-ratio: 4 / 3;
+  background: transparent;
+  color: var(--ink);
+  cursor: pointer;
+}
+
+.hero-mascot-video:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 4px;
+  border-radius: var(--radius-sm);
+}
+
+.hero-mascot-video video {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  -webkit-mask-image: radial-gradient(ellipse 50% 50% at center, black 58%, transparent 100%);
+  mask-image: radial-gradient(ellipse 50% 50% at center, black 58%, transparent 100%);
+  mix-blend-mode: multiply;
+  pointer-events: none;
+}
+
 .works-with {
   display: flex;
   width: 100%;