fix(site): use the animated mascot logo in the hero (#65)

## Related Issue

No issue. The problem is described below.

## Problem

The landing page hero rendered `/pythinker-hero-clean-v2.mp4` inside a
play/pause `<button>`. That asset is no longer present in
`apps/site/public`, so `pnpm -C apps/site run build` fails outright on
`main`:

```
[vite]: Rollup failed to resolve import "/pythinker-hero-clean-v2.mp4" from ".../apps/site/src/App.vue"
```

## What changed

- The hero now renders the existing `PythinkerMascot` component instead
of the video. It inlines the same artwork as
`public/pythinker_animated.svg` — 34 identical `<path>` elements and the
same four animations (blink, mouthTalk, antennaGlow, eyeShine) — and
already ships a scoped `prefers-reduced-motion` guard, so no extra
request and no new motion handling.
- Removed the now-dead video machinery: `heroVideo` / `heroVideoPlaying`
refs, `playHeroVideo`, `syncHeroMotionPreference`, `toggleHeroVideo`,
their `matchMedia` listeners, and the `.hero-mascot-video` rules (radial
mask + `mix-blend-mode: multiply`). `reducedMotionQuery` stays — the
reveal-on-scroll observer still uses it.
- `.hero-mascot` sizes the logo at `clamp(128px, 12vw, 164px)`,
centered. The hero block is roughly 55px taller than the old 4:3 video,
so content below shifts down slightly.
- Deleted four assets nothing references: `pythinker-hero-clean-v2.mp4`,
`arctecture.webp`, `logo.png`, `brand/linux.svg`.

Deliberately kept, because they are addressed by URL or convention
rather than by an import: `_headers` (Cloudflare Pages), `bimi-logo.svg`
(DNS BIMI record), `code/oauth-success.html` (OAuth redirect landing
page), and `icon-192.png` / `icon-512.png`.

Verified: `pnpm -C apps/site run build` now succeeds, and `pnpm exec
oxlint --type-aware apps/site/src/App.vue` is clean.

## 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.
- [x] I have added tests that prove my feature works. — `apps/site` has
no test suite; the site build is the gate, and it goes from failing to
passing with this change.
- [x] Ran `gen-changesets` skill, or this PR needs no changeset. `[skip
changeset]` — the only published package is
`@pythoughts/pythinker-code`, and `@pythoughts/site` is a private
marketing site that does not enter the CLI bundle, so nothing here
reaches a release artifact. No site-only change in this repo has ever
carried a changeset.
- [x] Ran `gen-docs` skill, or this PR needs no doc update.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Bug Fixes**
  * Replaced the hero mascot video with a static mascot illustration.
  * Removed video playback controls and related motion behavior.
  * Preserved terminal demo functionality and reduced-motion support.
  * Updated responsive styling for the mascot display.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: elkaix

apps/site/public/arctecture.webp

@@ -61,8 +61,6 @@ 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]);
@@ -171,30 +169,10 @@ 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 (reducedMotionQuery.matches) return;
 
@@ -214,7 +192,6 @@ onUnmounted(() => {
   clearTimeout(menuCloseTimer);
   clearTerminalPlayback();
   revealObserver?.disconnect();
-  reducedMotionQuery?.removeEventListener('change', syncHeroMotionPreference);
   document.removeEventListener('pointerdown', onDocumentPointerdown);
   document.removeEventListener('keydown', onDocumentKeydown);
 });
@@ -250,28 +227,7 @@ onUnmounted(() => {
   <main id="top">
     <header class="hero container">
       <div class="hero-copy">
-        <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>
+        <PythinkerMascot class="hero-mascot" :width="164" :height="205" />
         <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>
@@ -768,35 +724,11 @@ onUnmounted(() => {
   line-height: 1.38;
 }
 
-.hero-mascot-video {
-  position: relative;
+.hero-mascot {
   display: block;
-  width: clamp(160px, 16vw, 200px);
+  width: clamp(128px, 12vw, 164px);
+  height: auto;
   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 {