auto-claude: subtask-2-1 - Add visibility detection to GlobalBackground component

src/components/layout/GlobalBackground.tsx

@@ -1,8 +1,20 @@
+import { usePageVisibility } from '@/hooks/usePageVisibility';
+import { useIntersectionObserver } from '@/hooks/useIntersectionObserver';
+
 const GlobalBackground = () => {
+  const isPageVisible = usePageVisibility();
+  const { ref, isIntersecting } = useIntersectionObserver<HTMLDivElement>({
+    threshold: 0.1,
+    rootMargin: '0px'
+  });
+
+  const shouldAnimate = isPageVisible && isIntersecting;
+
   return (
     <>
       {/* Background layer */}
       <div
+        ref={ref}
         className="fixed inset-0 bg-zinc-900"
         style={{ zIndex: -2 }}
       />
@@ -36,6 +48,8 @@ const GlobalBackground = () => {
             strokeWidth="1"
             opacity="0.2"
           >
+            {shouldAnimate && (
+              <>
                 <animate
                   attributeName="y1"
                   values="20%;80%;20%"
@@ -48,6 +62,8 @@ const GlobalBackground = () => {
                   dur="10s"
                   repeatCount="indefinite"
                 />
+              </>
+            )}
           </line>
 
           <line
@@ -59,12 +75,14 @@ const GlobalBackground = () => {
             strokeWidth="1"
             opacity="0.15"
           >
+            {shouldAnimate && (
               <animate
                 attributeName="x1"
                 values="0%;100%;0%"
                 dur="15s"
                 repeatCount="indefinite"
               />
+            )}
           </line>
 
           <line
@@ -76,6 +94,8 @@ const GlobalBackground = () => {
             strokeWidth="1"
             opacity="0.1"
           >
+            {shouldAnimate && (
+              <>
                 <animate
                   attributeName="x1"
                   values="20%;80%;20%"
@@ -88,6 +108,8 @@ const GlobalBackground = () => {
                   dur="12s"
                   repeatCount="indefinite"
                 />
+              </>
+            )}
           </line>
         </svg>
       </div>