feat: animate home page sections using RevealOnScroll

[aynazar-sylyyew-dev]

Reuses the existing RevealOnScroll component for the home page sections below the hero.

Chosen option (from issue #8): reuse RevealOnScroll on the home page.
This keeps a single animation mechanism across the site and adds no new dependencies.

What's animated

Scroll-triggered fade-in + slide-up with staggered cascade for:

• Mission section
• Principles (label + principle cards)
• Projects intro section
• People (label, text, member cards)
• Contributing (label, steps, promise block, CTAs)

CSS consolidation

Moved .reveal styles to app/globals.css (single copy for the whole site), removed duplicates from home.css and projects.css. Used body .reveal selector (specificity 11) so it wins over .project (10) and /projects/ cards keep their fade-in.

Rules respected

• ✅ Text readable without JavaScript (.pending class added only by JS)
• ✅ prefers-reduced-motion: reduce → no motion, final state immediately
• ✅ No layout shift (only opacity + transform)
• ✅ Server-rendered text stays on the server; only the existing client component is reused
• ✅ Works for all three languages: /, /ru/, /en/

Resolves #8

[TheSeydiCharyyev]

Checked the build locally in Chromium at 1280x800, 1366x768 and 390x844: nothing on the first screen is hidden, only elements below it wait for scroll. /#people works too: only the second row of member cards waits. Full-page screenshot is pixel-identical to production, and JS weight did not change (about 173 KB gzip).

Two things before merge:

1. The reveal CSS is now in two places: .reveal in components/home.css and .project.reveal in components/projects.css. The issue asks for one mechanism, so please keep one copy in app/globals.css and remove the other two. Watch one thing: .project in projects.css also sets transition, and with the same specificity the later rule wins, so project cards can lose the fade. Check that /projects/ still animates as before. The !important in the reduced-motion block is not needed: RevealOnScroll does not add pending when reduced motion is on.

2. Please add a short video of scrolling the home page from top to bottom. It is in "Done when" of #8.

Also please fix the first line of the description: #7 is not done yet, so this PR does not continue its pattern. Using the existing RevealOnScroll is fine.

[aynazar-sylyyew-dev]

@TheSeydiCharyyev Addressed all feedback:

1. ✅ Moved .reveal CSS to app/globals.css (single copy). Removed from home.css and projects.css.
2. ✅ Used body .reveal (specificity 11) so .project (10) cannot overwrite transition on /projects/. Checked locally — project cards still fade in on scroll and hover effects work.
3. ✅ Removed !important from reduced-motion block.
4. ✅ Updated PR description (removed incorrect reference to Animation: choose a library and animate the home page hero #7).
5. ✅ Added scroll video below.

Video:

scroll.mp4

[TheSeydiCharyyev]

Checked a1d8b41 locally in Chromium. /, /ru/, /projects/ and phone width: nothing on the first screen is hidden, and after scrolling to the bottom every element is fully visible. Project cards still fade in (opacity, transform 0.7s). With reduced motion nothing is hidden. Full-page screenshots match production.

One small thing for later, not blocking: the prefers-reduced-motion block in globals.css uses .reveal, but the main rules use body .reveal, which has higher specificity, so this block never wins. It does no harm today because RevealOnScroll does not add pending with reduced motion. Either use body .reveal inside the block too, or remove the block.