Ajoute une couche de micro-animations sur tout le site

Deux courbes partagées dans lib/motion.ts, pour que le CSS et Framer
aient le même feeling, et quatre primitives que Tailwind ne sait pas
exprimer : reflet de bouton, halo qui suit le curseur, soulignement qui
se dessine, secousse d'erreur.

Nouveaux composants : Stagger (les collections se distribuent une par
une), Spotlight (trouve son parent tout seul, donc les cartes restent
des composants serveur), ScrollProgress, BackToTop, Parallax, Spinner,
CheckMark. Reveal accepte maintenant une direction.

Côté rendu : le trait de nav glisse d'un onglet à l'autre, les cartes
se soulèvent, le hero réagit au scroll, les piliers entrent en zig-zag,
la lightbox glisse dans le sens demandé et les formulaires répondent.

prefers-reduced-motion est respecté partout : Framer coupe via
useReducedMotion, le CSS via la media query déjà en place.

Le commit embarque aussi la réorganisation des composants par domaine
qui était en cours dans l'arbre de travail — les deux étaient trop
imbriquées pour être séparées proprement.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

app/games/page.tsx

@@ -1,6 +1,8 @@
-import Link from "next/link";
-import Image from "next/image";
 import type { Metadata } from "next";
+import { PageHeader } from "../components/ui/PageHeader";
+import { Section } from "../components/ui/Section";
+import { GameCard } from "../components/game/GameCard";
+import { Stagger, StaggerItem } from "../components/ui/Stagger";
 import { games } from "@/lib/games";
 
 export const metadata: Metadata = {
@@ -8,64 +10,30 @@ export const metadata: Metadata = {
   description: "Games crafted by Highland Games Studio.",
 };
 
-const statusLabel: Record<string, string> = {
-  "in-development": "IN DEVELOPMENT",
-  released: "RELEASED",
-  "coming-soon": "COMING SOON",
-};
-
 export default function GamesPage() {
   return (
-    <div className="pt-32 pb-24 px-6 lg:px-10">
-      <div className="max-w-6xl mx-auto">
-        <p className="font-display text-sm tracking-[0.3em] text-accent mb-4">
-          — OUR WORLDS
-        </p>
-        <h1 className="font-display text-5xl sm:text-6xl lg:text-7xl tracking-wider leading-[0.95] mb-16">
-          GAMES
-        </h1>
+    <>
+      <PageHeader
+        eyebrow="OUR WORLDS"
+        title="GAMES"
+        lead="Every project we ship is a different summit. Here is what we are climbing right now."
+      />
 
-        <div className="grid gap-8">
-          {games.map((game) => (
-            <Link
-              key={game.slug}
-              href={`/games/${game.slug}`}
-              className="group relative aspect-[16/9] sm:aspect-[21/9] bg-surface border border-border overflow-hidden block hover:border-accent transition-colors"
-            >
-              {game.cover ? (
-                <Image
-                  src={game.cover}
-                  alt={game.title}
-                  fill
-                  sizes="(max-width: 1024px) 100vw, 1024px"
-                  className="object-cover group-hover:scale-105 transition-transform duration-700"
-                />
-              ) : (
-                <div className="absolute inset-0 flex items-center justify-center">
-                  <Image
-                    src="/image/Studio/Logo Flat.png"
-                    alt=""
-                    width={140}
-                    height={94}
-                    className="opacity-15 group-hover:opacity-25 group-hover:scale-105 transition-all duration-700"
-                  />
-                </div>
-              )}
-              <div className="absolute bottom-0 left-0 right-0 p-8 bg-gradient-to-t from-background via-background/80 to-transparent">
-                <p className="font-display text-xs tracking-[0.3em] text-accent mb-2">
-                  {statusLabel[game.status]}
-                </p>
-                <h2 className="font-display text-3xl sm:text-4xl tracking-wider mb-3">
-                  {game.title.toUpperCase()}
-                </h2>
-                <p className="text-foreground-muted max-w-2xl">
-                  {game.tagline}
-                </p>
-              </div>
-            </Link>
-          ))}
-        </div>
-      </div>
-    </div>
+      <Section top="none">
+        {games.length === 0 ? (
+          <p className="text-foreground-muted">
+            Nothing announced yet. Follow the devblog to hear it first.
+          </p>
+        ) : (
+          <Stagger as="ul" step={0.12} className="grid gap-8">
+            {games.map((game) => (
+              <StaggerItem as="li" key={game.slug}>
+                <GameCard game={game} />
+              </StaggerItem>
+            ))}
+          </Stagger>
+        )}
+      </Section>
+    </>
   );
 }