diff --git a/src/components/BootSequence.tsx b/src/components/BootSequence.tsx index 5f33a41..6f2f4a4 100644 --- a/src/components/BootSequence.tsx +++ b/src/components/BootSequence.tsx @@ -339,17 +339,18 @@ export function BootSequence({ onComplete }: BootSequenceProps) { return () => clearTimeout(timer) }, [phase]) - // Fade phase: wait for animations to finish, then complete + // Fade phase: notify parent immediately so login can mount alongside fade useEffect(() => { if (phase !== 'fading') return - const completeTimer = setTimeout(() => { + onComplete() + + const hideTimer = setTimeout(() => { setIsVisible(false) setPhase('done') - onComplete() }, BOOT_CONFIG.timing.fadeOutDuration) - return () => clearTimeout(completeTimer) + return () => clearTimeout(hideTimer) }, [phase, onComplete]) // Reduced motion: skip animation diff --git a/src/components/LoginScreen.tsx b/src/components/LoginScreen.tsx index 106cf78..8f4947f 100644 --- a/src/components/LoginScreen.tsx +++ b/src/components/LoginScreen.tsx @@ -168,16 +168,22 @@ export function LoginScreen({ onComplete }: LoginScreenProps) { className="fixed inset-0 flex items-center justify-center" style={{ zIndex: 110, - backgroundColor: 'rgba(240, 245, 244, 0.7)', - backdropFilter: `blur(${BACKDROP_BLUR_PX}px)`, - WebkitBackdropFilter: `blur(${BACKDROP_BLUR_PX}px)`, + }} + initial={{ + backgroundColor: 'rgba(0, 0, 0, 1)', + backdropFilter: 'blur(0px)', + WebkitBackdropFilter: 'blur(0px)', }} animate={isExiting ? { backgroundColor: 'rgba(240, 245, 244, 0)', backdropFilter: 'blur(0px)', WebkitBackdropFilter: 'blur(0px)', - } : {}} - transition={isExiting ? { duration: 0.6, ease: 'easeOut' } : {}} + } : { + backgroundColor: 'rgba(240, 245, 244, 0.7)', + backdropFilter: `blur(${BACKDROP_BLUR_PX}px)`, + WebkitBackdropFilter: `blur(${BACKDROP_BLUR_PX}px)`, + }} + transition={isExiting ? { duration: 0.6, ease: 'easeOut' } : { duration: 0.6, ease: 'easeOut' }} role="dialog" aria-label="Clinical system login" aria-modal="true"