Reading Mode — realistic book page turn effect with visible page underneath

[realproject7]

Follow-up from PR #629

The current page flip uses a simple rotateY(-90deg) which rotates the content off-screen. We want a more realistic book page turning effect where:

1. The outgoing page visually lifts and curls from the edge like a physical paper page
2. The incoming (next) page is visible underneath as the outgoing page turns
3. A shadow follows the turning page to add depth

Reference

See the attached screenshot of a PDF reader — the page physically turns and reveals the next page behind it, with shadows along the fold line.

Requirements

Two-phase page turn:

1. Phase 1 (outgoing page flips away): The current page starts flat, then rotates around the Y-axis from the right edge (for Next) or left edge (for Prev). As it rotates, a shadow appears along the fold. The page should have backface-visibility: hidden so you don't see reversed content.

2. Phase 2 (incoming page revealed): The next page content is already positioned underneath (z-index behind). As the outgoing page lifts away, the incoming page is progressively revealed. The incoming page can have a subtle fade-in or slide-in from slightly offset.

Implementation approach:

Stack both pages (outgoing on top, incoming below):

.page-container {
  position: relative;
  perspective: 1500px;
}

.page-outgoing {
  position: absolute;
  transform-origin: left center;  /* for "Next" */
  animation: flip-out 500ms ease-in forwards;
  backface-visibility: hidden;
  z-index: 2;
}

.page-incoming {
  z-index: 1;
  animation: fade-in 500ms ease-out;
}

@keyframes flip-out {
  0% { transform: rotateY(0deg); box-shadow: none; }
  50% { box-shadow: -10px 0 30px rgba(0,0,0,0.2); }
  100% { transform: rotateY(-120deg); box-shadow: none; }
}

Key details:

• Both pages must be in the DOM simultaneously during the transition
• The outgoing page captures the previous content (can use a snapshot or keep the previous content in state)
• The shadow should move with the page fold
• Duration: ~500ms ease-in-out
• Must work on both swipe and button/keyboard navigation
• CSS-only animation (no JS animation libraries)
• Mobile performance: use will-change: transform and GPU-accelerated properties only

Files to modify

• src/components/ReadingMode.tsx — two-phase render with outgoing/incoming pages
• src/app/globals.css — updated keyframes with shadow and backface

Branch

task/623-reading-mode-page-flip-v2 (same branch, follow-up)

Acceptance criteria

• Outgoing page visually lifts and turns like a real book page
• Incoming page visible underneath during the turn
• Shadow along the fold line during transition
• Backface of turning page is hidden (no reversed text)
• Works on swipe, button click, and keyboard arrows
• Smooth on mobile (GPU-accelerated transforms only)
• No external dependencies
• Build passes

---

Self-Verification (T3)

• Run npm run dev, navigate to a story with multiple plots
• Click Next — verify outgoing page flips and incoming page is visible underneath
• Click Prev — verify reverse flip direction
• Swipe left/right — verify same flip effect
• Press arrow keys — verify same flip effect
• Check mobile (responsive mode) — verify smooth performance
• Verify backface-visibility: hidden — no reversed text visible during flip
• Run npm run build — no errors

[realproject7]

T3 tools for verification: Use Playwright or Chrome MCP for visual verification of page flip animations. Test on both desktop and mobile viewports.