Implement an immersive homepage experience with a large, interactive
4-column abacus that dominates the initial viewport, creating a
"play with this" first impression. The hero smoothly transitions
to reveal the Abaci One branding in the navigation when scrolled.
**New Components:**
- `HeroAbacus`: Full-viewport interactive abacus with title/subtitle
- Auto-cycles through random 4-digit numbers
- Responsive scaling (1.5x mobile, 2x tablet, 2.5x desktop)
- Intersection Observer to track visibility
- `HomeHeroContext`: Shared state for subtitle and scroll visibility
- SSR-safe random subtitle selection (client-side only)
- Prevents hydration mismatch warnings
- Shares abacus value across hero/nav
**Navigation Updates:**
- AppNavBar conditionally shows/hides branding based on hero visibility
- Smooth fadeIn animation when branding appears after scroll
- Uses same random subtitle from context (consistent across page)
- Optional context access without breaking other pages
**Mobile Support:**
- Responsive abacus scaling for all screen sizes
- Touch-friendly interactive abacus
- Smooth animations work on all devices
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
d8ec64280e