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

The hero played /pythinker-hero-clean-v2.mp4 through a play/pause button. That
asset is gone from apps/site/public, so the site build failed outright:
Rollup could not resolve the import.

Render the existing PythinkerMascot component instead. It inlines the same
artwork as public/pythinker_animated.svg (34 identical paths, the same blink,
mouth, antenna-glow and eye-shine animations) and already carries its own
scoped prefers-reduced-motion guard, so the video refs, the play/pause
handlers and the mask/blend CSS all go away.

Also drop four assets nothing references: the mp4, arctecture.webp, logo.png
and brand/linux.svg.

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 {