design: implement split-screen sliding splash animation transition

frontend/src/pages/LoginPage.tsx

@@ -623,29 +623,27 @@ export const LoginPage: React.FC = () => {
       {/* Splash Screen Overlay */}
       <AnimatePresence>
         {splashState !== 'done' && (
+          <div className="fixed inset-0 z-[200] flex overflow-hidden pointer-events-none">
+            {/* Left part of splash: remains static blue on desktop to match underlying panel */}
             <motion.div
-            key="splash-overlay"
+              initial={{ opacity: 1 }}
-            initial={{ opacity: 1, backgroundColor: '#004a99' }}
-            animate={{ 
-              opacity: 1, 
-              backgroundColor: splashState === 'fade-to-white' ? '#ffffff' : '#004a99'
-            }}
               exit={{ opacity: 0 }}
-            transition={{ 
+              transition={{ duration: 0.8 }}
-              backgroundColor: { duration: 1.5, ease: "easeInOut" },
+              className="hidden lg:block lg:w-[55%] h-full bg-gradient-to-br from-[#003B5C] via-[#004a99] to-[#001D3D]"
-              opacity: { duration: 1.5, ease: "easeInOut" }
+            />
-            }}
-            className="fixed inset-0 flex items-center justify-center z-[200] overflow-hidden"
-          >
-            {/* Background Pattern - fade it out when transitioning to white */}
-            <motion.div 
-              animate={{ opacity: splashState === 'fade-to-white' ? 0 : 0.1 }}
-              transition={{ duration: 1.0 }}
-              className="absolute inset-0 pointer-events-none"
-            >
-              <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_center,_white_1px,_transparent_1px)] bg-[size:30px_30px]"></div>
-            </motion.div>
 
+            {/* Right part of splash (and full screen on mobile): slides right to reveal white page */}
+            <motion.div
+              initial={{ x: 0 }}
+              animate={{ 
+                x: splashState === 'fade-to-white' ? "100%" : 0 
+              }}
+              transition={{ duration: 1.5, ease: [0.85, 0, 0.15, 1] }}
+              className="w-full lg:w-[45%] h-full bg-gradient-to-br from-[#003B5C] via-[#004a99] to-[#001D3D]"
+            />
+
+            {/* Centered content overlay for Logo/Text */}
+            <div className="absolute inset-0 flex items-center justify-center z-10 pointer-events-none">
               <AnimatePresence mode="wait">
                 {splashState === 'logo' && (
                   <motion.div
@@ -675,7 +673,8 @@ export const LoginPage: React.FC = () => {
                   </motion.div>
                 )}
               </AnimatePresence>
-          </motion.div>
+            </div>
+          </div>
         )}
       </AnimatePresence>