add animated peeking bufo from all four edges

isolate all bufo peeking logic into separate bufo-peek.js file, keeping
the silly whimsical behavior cleanly separated from core search functionality.

behavior:
- bufo randomly appears from one of four edges (top, right, bottom, left)
- rotates 90° between edges to always peek perpendicular to edge
- animates: peeks in → holds → peeks back out (6s cycle)
- moves to new random edge after each cycle
- hides permanently after first search

technical:
- new static/bufo-peek.js handles all positioning and animation logic
- CSS variables (--peek-start, --peek-in) drive smooth animations
- event-based communication (bufo-hide) for clean separation

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[e-mail]>

static/bufo-peek.js

···
+// bufo peeking animation logic
+// this file handles the silly but delightful bufo that peeks from random edges
+
+(function() {
+    const peekingBufo = document.getElementById('peekingBufo');
+    let hasSearched = false;
+
+    // animation cycle duration (must match CSS animation duration)
+    const PEEK_CYCLE_MS = 6000;
+
+    // function to set random bufo position
+    function setRandomBufoPosition() {
+        const positions = ['top', 'right', 'bottom', 'left'];
+
+        // remove all position classes
+        peekingBufo.classList.remove(
+            'peeking-bufo-top',
+            'peeking-bufo-right',
+            'peeking-bufo-bottom',
+            'peeking-bufo-left'
+        );
+
+        // set new random position
+        const position = positions[Math.floor(Math.random() * positions.length)];
+        peekingBufo.classList.add(`peeking-bufo-${position}`);
+    }
+
+    // set initial position
+    setRandomBufoPosition();
+
+    // move to new position after each peek cycle
+    setInterval(() => {
+        if (!hasSearched) {
+            setRandomBufoPosition();
+        }
+    }, PEEK_CYCLE_MS);
+
+    // hide bufo after first search
+    window.addEventListener('bufo-hide', () => {
+        hasSearched = true;
+        peekingBufo.classList.add('hidden');
+    });
+})();

static/index.html

···
             padding: 40px;
         }
 
+        @keyframes peek-in-out {
+            0% {
+                transform: var(--peek-start);
+            }
+            20% {
+                transform: var(--peek-in);
+            }
+            80% {
+                transform: var(--peek-in);
+            }
+            100% {
+                transform: var(--peek-start);
+            }
+        }
+
         .peeking-bufo {
             position: fixed;
             pointer-events: none;
             z-index: 1000;
-            top: 50%;
             width: 200px;
             height: auto;
-            transition: opacity 0.3s ease-out;
+            animation: peek-in-out 6s ease-in-out infinite;
         }
 
         .peeking-bufo.hidden {
             opacity: 0;
             pointer-events: none;
+            animation: none;
         }
 
         .peeking-bufo-right {
-            right: 0;
-            transform: translateY(-50%);
+            right: -200px;
+            top: 50%;
+            --peek-start: translateY(-50%);
+            --peek-in: translateX(-200px) translateY(-50%);
+        }
+
+        .peeking-bufo-bottom {
+            bottom: -200px;
+            left: 50%;
+            --peek-start: translateX(-50%) rotate(90deg);
+            --peek-in: translateX(-50%) translateY(-200px) rotate(90deg);
         }
 
         .peeking-bufo-left {
-            left: 0;
-            transform: translateY(-50%) scaleX(-1);
+            left: -200px;
+            top: 50%;
+            --peek-start: translateY(-50%) scaleX(-1);
+            --peek-in: translateX(200px) translateY(-50%) scaleX(-1);
+        }
+
+        .peeking-bufo-top {
+            top: -200px;
+            left: 50%;
+            --peek-start: translateX(-50%) rotate(-90deg);
+            --peek-in: translateX(-50%) translateY(200px) rotate(-90deg);
         }
 
         @media (max-width: 1024px) {
···
 
     <img src="https://all-the.bufo.zone/bufo-just-checking.gif" alt="bufo peeking" class="peeking-bufo" id="peekingBufo">
 
+    <script src="/static/bufo-peek.js"></script>
     <script>
         const searchInput = document.getElementById('searchInput');
         const searchButton = document.getElementById('searchButton');
         const resultsDiv = document.getElementById('results');
         const loadingDiv = document.getElementById('loading');
         const errorDiv = document.getElementById('error');
-        const peekingBufo = document.getElementById('peekingBufo');
-
-        // randomly position bufo on left or right
-        if (Math.random() < 0.5) {
-            peekingBufo.classList.add('peeking-bufo-left');
-        } else {
-            peekingBufo.classList.add('peeking-bufo-right');
-        }
 
         let hasSearched = false;
 
···
 
             // hide bufo after first search
             if (!hasSearched) {
-                peekingBufo.classList.add('hidden');
+                window.dispatchEvent(new Event('bufo-hide'));
                 hasSearched = true;
             }