refactor: add responsive vertical translation to animation SVGs with lg breakpoint

- Changed vertical translate classes to only apply on large screens (lg:) across agent animations (AgentCoordination, DeterministicExecution, Fungistor, Herodb, MOSSandboxes, MyceliumMesh)
- Changed NoCentral home animation from -translate-y-10 to lg:-translate-y-10
- Updated pods animations with mobile-first approach: Connectivity (-translate-y-12 mobile, lg:translate-y-0), DataControl (maintains -translate-y-12 on

src/pages/agents/animations/AgentCoordination.tsx

@@ -132,7 +132,7 @@ export default function AgentCoordination({
       aria-label="Agent coordination and sovereign workflow management"
       style={{ background: bg }}
     >
-      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full -translate-y-6" preserveAspectRatio="xMidYMid slice">
+      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full lg:-translate-y-6" preserveAspectRatio="xMidYMid slice">
 
         {/* background */}
         <defs>

src/pages/agents/animations/DeterministicExecution.tsx

@@ -103,7 +103,7 @@ export default function DeterministicExecution({
       aria-label="Deterministic deployment and verifiable code execution"
       style={{ background: bg }}
     >
-      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full -translate-y-6" preserveAspectRatio="xMidYMid slice">
+      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full lg:-translate-y-6" preserveAspectRatio="xMidYMid slice">
 
         {/* background grid */}
         <defs>

src/pages/agents/animations/Fungistor.tsx

@@ -126,7 +126,7 @@ export default function FungiStor({
       aria-label="FungiStor, a distributed long-term AI memory"
       style={{ background: bg }}
     >
-      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full -translate-y-16" preserveAspectRatio="xMidYMid slice">
+      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full lg:-translate-y-16" preserveAspectRatio="xMidYMid slice">
         {/* Background grid */}
         <defs>
           <pattern id="grid-dark" width="28" height="28" patternUnits="userSpaceOnUse">

src/pages/agents/animations/Herodb.tsx

@@ -178,7 +178,7 @@ export default function Herodb({
       aria-label="HeroDB, active AI memory retrieval"
       style={{ background: bg }}
     >
-      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full  -translate-y-18" preserveAspectRatio="xMidYMid slice">
+      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full lg:-translate-y-18" preserveAspectRatio="xMidYMid slice">
         {/* Background grid */}
         <defs>
           <pattern id="grid-dark" width="28" height="28" patternUnits="userSpaceOnUse">

src/pages/agents/animations/MOSSandboxes.tsx

@@ -124,7 +124,7 @@ export default function MOSSandboxes({
       aria-label="MOS Secure Agent Sandboxes"
       style={{ background: bg }}
     >
-      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full  -translate-y-16" preserveAspectRatio="xMidYMid slice">
+      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full lg:-translate-y-16" preserveAspectRatio="xMidYMid slice">
         {/* BACKGROUND GRID */}
         <defs>
           <pattern id="grid-dark" width="28" height="28" patternUnits="userSpaceOnUse">

src/pages/agents/animations/MyceliumMesh.tsx

@@ -145,7 +145,7 @@ export default function MyceliumMesh({
       aria-label="Mycelium Mesh, a secure communication network"
       style={{ background: bg }}
     >
-      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full -translate-y-4" preserveAspectRatio="xMidYMid slice">
+      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full lg:-translate-y-4" preserveAspectRatio="xMidYMid slice">
         {/* Background grid */}
         <defs>
           <pattern id="grid-dark" width="28" height="28" patternUnits="userSpaceOnUse">

src/pages/home/animations/NoCentral.tsx

@@ -131,7 +131,7 @@ export default function NoCentral({
       aria-label="Distributed network illustration"
       style={{ background: bg }}
     >
-      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full -translate-y-10">
+      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full lg:-translate-y-10">
         {/* Background grid */}
         <defs>
           <pattern id="grid-dark" width="28" height="28" patternUnits="userSpaceOnUse">

src/pages/pods/animations/Connectivity.tsx

@@ -44,7 +44,7 @@ export default function Connectivity({
 
   return (
     <div className={clsx("relative overflow-hidden", className)}>
-      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full" style={{ background: bg }}>
+      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full lg:translate-y-0 -translate-y-12" style={{ background: bg }}>
         
         {/* ========= GRID + FILTERS ========= */}
         <defs>

src/pages/pods/animations/DataControl.tsx

@@ -59,7 +59,7 @@ export default function DataControl({
 
   return (
     <div className={clsx("relative overflow-hidden", className)} aria-hidden="true" role="img" style={{ background: bg }}>
-      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full -translate-y-12">
+      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full lg:-translate-y-12 -translate-y-12">
         {/* GRID + GLOW */}
         <defs>
           <pattern id="dc-grid" width="28" height="28" patternUnits="userSpaceOnUse">

src/pages/pods/animations/Resilience.tsx

@@ -55,7 +55,7 @@ export default function Resilience({
 
   return (
     <div className={clsx("relative overflow-hidden", className)}>
-      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full translate-y-5" style={{ background: bg }}>
+      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full lg:translate-y-5 -translate-y-8" style={{ background: bg }}>
         {/* ===== GRID + FILTERS ===== */}
         <defs>
           <pattern id="res-grid" width="28" height="28" patternUnits="userSpaceOnUse">

src/pages/pods/animations/Security.tsx

@@ -46,7 +46,7 @@ export default function Security({
       role="img"
       style={{ background: bg }}
     >
-      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full translate-y-6">
+      <svg viewBox={`0 0 ${W} ${H}`} className="w-full h-full lg:translate-y-6">
         {/* ====== GRID + FILTERS ====== */}
         <defs>
           <pattern id="sec-grid" width="28" height="28" patternUnits="userSpaceOnUse">