feat(my): interactive My Passport in the members hub

web/app/globals.css

@@ -241,3 +241,32 @@ body {
 
 /* Dossier folder card: motion now lives in components/hq/deck.tsx
    (framer-motion springs ported from the Framer "Document Folder"). */
+
+/* My Passport: each visa stamps down with a slight overshoot as the book
+   opens (components/hq/passport.tsx). */
+@keyframes pp-stamp-in {
+  0% {
+    transform: scale(1.7);
+    opacity: 0;
+  }
+  55% {
+    opacity: 1;
+  }
+  72% {
+    transform: scale(0.95);
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+.pp-stamp {
+  animation: pp-stamp-in 0.5s cubic-bezier(0.2, 0.85, 0.25, 1) both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pp-stamp {
+    animation: none;
+  }
+}

web/components/hq/my-client.tsx

@@ -4,6 +4,7 @@ import { UserButton, useAuth, useUser } from "@clerk/nextjs";
 import Link from "next/link";
 import type { Hackathon } from "@/lib/types-hq";
 import { PageShell } from "./page-shell";
+import { Passport } from "./passport";
 import { Tracker } from "./tracker";
 
 export function MyClient({
@@ -20,6 +21,7 @@ export function MyClient({
       ) : (
         <>
           <AuthSetupNotice />
+          <Passport />
           <Tracker hackathons={hackathons} />
         </>
       )}
@@ -44,6 +46,7 @@ function GatedHub({ hackathons }: { hackathons: Hackathon[] }) {
   return (
     <>
       <HubGreeting />
+      <Passport />
       <Tracker hackathons={hackathons} />
     </>
   );