Reading Mode — book-style page flip effect + swipe gesture navigation

[realproject7]

Follow-up from PR #621

PR #621 added a simple slide+fade transition. This ticket upgrades it to a more authentic book reading experience.

Requirements

1. Book-style page flip effect

Replace the current slide+fade with a page flip animation that mimics turning a physical book page:

• Next: the current page lifts from the right edge and flips over to reveal the next page underneath — like turning a page forward
• Prev: the previous page flips back from the left edge — like turning a page backward
• Use CSS 3D transforms: rotateY() with perspective and transform-origin on the appropriate edge
• The flipping page should have a subtle shadow that moves with it
• Duration ~400-500ms with ease-in-out for a natural feel
• Reference: similar to Apple Books, Kindle, or Google Play Books page turn

Suggested CSS approach:

.page-flip-next {
  transform-origin: left center;
  animation: flip-forward 400ms ease-in-out;
}

@keyframes flip-forward {
  0% { transform: perspective(1200px) rotateY(0deg); }
  100% { transform: perspective(1200px) rotateY(-90deg); opacity: 0; }
}

The incoming page should fade/slide in from behind as the current page flips away.

2. Swipe gesture navigation

Add touch swipe support for navigating chapters:

• Swipe left → go to next chapter (same as Next button / Right arrow)
• Swipe right → go to previous chapter (same as Prev button / Left arrow)
• Minimum swipe distance threshold (~50px) to avoid accidental triggers
• Should not interfere with vertical scrolling
• Track touchstart / touchend X coordinates to detect horizontal swipes

// Basic swipe detection
const touchStartX = useRef(0);
onTouchStart={(e) => touchStartX.current = e.touches[0].clientX}
onTouchEnd={(e) => {
  const dx = e.changedTouches[0].clientX - touchStartX.current;
  if (dx < -50) goNext();      // swipe left → next
  if (dx > 50) goPrev();       // swipe right → prev
}}

Design constraints

• Must work on both mobile and desktop
• Desktop: keyboard arrows + button clicks trigger the flip
• Mobile: swipe gestures + button taps trigger the flip
• Performance: keep it smooth on low-end mobile devices — avoid heavy JS animations, prefer CSS transforms (GPU-accelerated)
• No external dependencies

Files to modify

• src/components/ReadingMode.tsx — replace current animation, add swipe handlers
• src/app/globals.css — page flip keyframes

Branch

task/623-reading-mode-page-flip-v2

Acceptance criteria

• Page flip animation mimics turning a book page (3D rotateY)
• Next flips from right edge, Prev flips from left edge
• Swipe left → next chapter, swipe right → prev chapter
• Swipe threshold prevents accidental triggers
• Swipe doesn't interfere with vertical scrolling
• Works on mobile and desktop
• No external dependencies
• Smooth performance on mobile
• Build passes