IMPROVED - Replace per-title hero entrance with a unified page transition

- Add (site)/template.tsx: one framer-motion enter animation (fade + rise +
  blur) that runs on every navigation, so moving between dock pages has a
  clean transition.
- Disable the staggered .hero-rise entrance now that the template handles it.

app/[locale]/(site)/template.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { motion, useReducedMotion } from "framer-motion";
+import { usePathname } from "next/navigation";
+import type { ReactNode } from "react";
+
+/**
+ * Next.js re-mounts a `template` on every navigation, so this wrapper runs its
+ * enter animation each time the visitor moves between pages (via the dock or
+ * any link) — giving one unified page transition instead of per-element
+ * entrance animations.
+ */
+export default function SiteTemplate({ children }: { children: ReactNode }) {
+  const reducedMotion = useReducedMotion();
+  const pathname = usePathname();
+
+  return (
+    <motion.div
+      key={pathname}
+      initial={reducedMotion ? false : { opacity: 0, y: 18, filter: "blur(10px)" }}
+      animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
+      transition={reducedMotion ? { duration: 0 } : { duration: 0.55, ease: [0.22, 1, 0.36, 1] }}
+    >
+      {children}
+    </motion.div>
+  );
+}

app/globals.css

@@ -422,10 +422,11 @@ html[lang="ar"] .eyebrow {
     }
   }
 
-  /* ---- Hero entrance (pure CSS so it never flashes blank before hydration) ---- */
+  /* ---- Hero entrance ----
+     Per-element rise is disabled: the site `template.tsx` now runs one unified
+     page-transition animation on every navigation instead. ---- */
   .hero-rise {
-    opacity: 0;
+    opacity: 1;
-    animation: hero-rise-in 0.62s cubic-bezier(0.22, 1, 0.36, 1) both;
   }
 
   .hero-content > *:nth-child(1) {