fix: Make InteractiveBackground visible on auth pages

Increased opacity from 5.5% to 30% and z-index to 10 using !important
CSS overrides. The particle animation is now clearly visible on both
sign-in and sign-up pages.

Author: cliff-de-tech

web/src/pages/sign-in/[[...index]].tsx

@@ -17,8 +17,8 @@ export default function SignInPage() {
 
     return (
         <div className="min-h-screen flex">
-            {/* Animated Background */}
-            <InteractiveBackground />
+            {/* Animated Background - override opacity for visibility */}
+            <InteractiveBackground className="!opacity-30 !z-10" />
             {/* Left Side - Branding */}
             <div className="hidden lg:flex lg:w-1/2 bg-gradient-to-br from-blue-600 via-purple-600 to-indigo-700 relative overflow-hidden">
                 {/* Background Pattern */}

web/src/pages/sign-up/[[...index]].tsx

@@ -17,8 +17,8 @@ export default function SignUpPage() {
 
     return (
         <div className="min-h-screen flex">
-            {/* Animated Background */}
-            <InteractiveBackground />
+            {/* Animated Background - override opacity for visibility */}
+            <InteractiveBackground className="!opacity-30 !z-10" />
             {/* Left Side - Branding */}
             <div className="hidden lg:flex lg:w-1/2 bg-gradient-to-br from-purple-600 via-indigo-600 to-blue-700 relative overflow-hidden">
                 {/* Background Pattern */}