Add subtle page flip animation in Reading Mode

[realproject7]

Feature

Add a light page-flip transition effect when navigating between chapters in Reading Mode, mimicking the feel of turning a book page.

Requirements

• Prev: content slides/flips in from the left (like turning a page back)
• Next: content slides/flips in from the right (like turning a page forward)
• Subtle and lightweight — not a heavy 3D flip, just a clean CSS transition that suggests a page turn
• Should work on both button clicks (Prev/Next) and keyboard arrows
• Must not add any external dependencies — CSS transitions/animations only
• Mobile-friendly (no performance issues on low-end devices)

Suggested approach

Simple CSS transition on chapter change:

/* Content slides in from the right on Next */
@keyframes page-flip-next {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Content slides in from the left on Prev */
@keyframes page-flip-prev {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

Track the navigation direction (prev/next) in state, apply the appropriate animation class to the content area when the chapter index changes. Duration ~200-300ms, ease-out.

Files to modify

• src/components/ReadingMode.tsx — add direction state, animation class on chapter change
• src/app/globals.css — add keyframe animations (if not using inline styles)

Branch

task/616-reading-mode-page-flip

Acceptance criteria

• Next chapter slides in from right
• Previous chapter slides in from left
• Animation is subtle (~200-300ms, ease-out)
• Works on button click and keyboard arrows
• No external dependencies — CSS only
• Smooth on mobile
• Build passes