Task #14: Black Ayah & Scroll Reveal (EHSAN POC)

Two refinements to match ehsan.sa on artifacts/ehsan-poc:

1. Black ayah: the ayah artwork below the hero
   («وأحسنوا إنّ الله يحبّ المحسنين») now renders solid black
   instead of green via Tailwind `brightness-0` on the <img>.
   Ornaments and centered layout unchanged.

2. Scroll-reveal motion: added a reusable Reveal component
   (src/components/Reveal.tsx) built on the existing framer-motion
   dependency. It fades + translates children up (y:28 -> 0) when
   they scroll into view, animates once (viewport once:true,
   amount 0.2), supports an optional stagger `delay`, and falls
   back to a plain div when prefers-reduced-motion is set.

   Applied on:
   - home.tsx: stats row (2 cards, staggered), featured
     opportunity cards grid (staggered by column), workflow-steps
     grid (staggered by column).
   - opportunities.tsx: opportunity cards grid (staggered).

   Added `h-full` to the OpportunityCard root and to the Reveal
   wrappers / wrapped Cards so the motion wrapper becoming the grid
   item does not break equal-height cards.

Out of scope (unchanged): two-card stats layout, nav, services
mega-menu, hero slider/carousel, copy. No scroll animation on
header/nav or hero.

Verified: tsc --noEmit passes; restarted ehsan-poc web workflow
to clear HMR; screenshot confirms the ayah is black.

artifacts/ehsan-poc/src/pages/opportunities.tsx

@@ -3,6 +3,7 @@ import { useLanguage } from "../contexts/LanguageContext";
 import { useListPublishedRequests } from "@workspace/api-client-react";
 import { Skeleton } from "@/components/ui/skeleton";
 import { OpportunityCard } from "../components/OpportunityCard";
+import { Reveal } from "../components/Reveal";
 
 type NeedTypeKey =
   | "electricity" | "water" | "food" | "health"
@@ -70,8 +71,10 @@ export default function Opportunities() {
         </div>
       ) : (
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          {filtered.map((request) => (
-            <OpportunityCard key={request.id} request={request} />
+          {filtered.map((request, i) => (
+            <Reveal key={request.id} delay={(i % 3) * 0.08} className="h-full">
+              <OpportunityCard request={request} />
+            </Reveal>
           ))}
         </div>
       )}