feat(levels): add auto-advance slider with hover pause

Add automatic slider progression that advances one level every 3 seconds,
cycling back to the start when reaching the end. The auto-advance pauses
when the user's mouse is over the pane containing the slider and abacus,
allowing for manual exploration without interruption.

Changes:
- Add isPaneHovered state to track mouse position
- Add auto-advance effect with 3-second interval
- Pause auto-advance when isPaneHovered is true
- Add onMouseEnter/onMouseLeave handlers to pane container
- Cycle position back to 0 when reaching the last level

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

Co-Authored-By: Claude <noreply@anthropic.com>

apps/web/src/app/levels/page.tsx

@@ -184,6 +184,7 @@ const allLevels = [
 export default function LevelsPage() {
   const [currentIndex, setCurrentIndex] = useState(0)
   const [isHovering, setIsHovering] = useState(false)
+  const [isPaneHovered, setIsPaneHovered] = useState(false)
   const currentLevel = allLevels[currentIndex]
 
   // State for animated abacus digits
@@ -220,6 +221,20 @@ export default function LevelsPage() {
     return () => clearInterval(interval)
   }, [])
 
+  // Auto-advance slider position every 3 seconds (unless pane is hovered)
+  useEffect(() => {
+    if (isPaneHovered) return // Don't auto-advance when mouse is over the pane
+
+    const interval = setInterval(() => {
+      setCurrentIndex((prev) => {
+        // Cycle back to 0 when reaching the end
+        return prev >= allLevels.length - 1 ? 0 : prev + 1
+      })
+    }, 3000)
+
+    return () => clearInterval(interval)
+  }, [isPaneHovered])
+
   // Handle hover on slider track
   const handleSliderHover = (e: React.MouseEvent<HTMLSpanElement>) => {
     const rect = e.currentTarget.getBoundingClientRect()
@@ -338,6 +353,8 @@ export default function LevelsPage() {
           <section className={stack({ gap: '8' })}>
             {/* Current Level Display */}
             <div
+              onMouseEnter={() => setIsPaneHovered(true)}
+              onMouseLeave={() => setIsPaneHovered(false)}
               className={css({
                 bg: 'transparent',
                 border: '2px solid',