feat: US-008 - Login button pulse animation on activation

src/components/LoginScreen.tsx

@@ -354,7 +354,7 @@ export function LoginScreen({ onComplete }: LoginScreenProps) {
                 disabled={!canLogin}
                 onMouseEnter={() => setButtonHovered(true)}
                 onMouseLeave={() => setButtonHovered(false)}
-                className="focus-visible:ring-2 focus-visible:ring-[#0D6E6E]/40 focus-visible:ring-offset-2 focus:outline-none"
+                className={`focus-visible:ring-2 focus-visible:ring-[#0D6E6E]/40 focus-visible:ring-offset-2 focus:outline-none${canLogin && !buttonPressed ? ' login-pulse-active' : ''}`}
                 style={{
                   width: '100%',
                   padding: '10px 16px',

src/index.css

@@ -235,6 +235,20 @@ html {
   animation: login-spin 0.8s linear infinite;
 }
 
+/* Login button pulse — draws attention when button becomes clickable */
+@keyframes login-pulse {
+  0%, 60%, 100% { transform: scale(1); }
+  30% { transform: scale(1.03); }
+}
+
+.login-pulse-active {
+  animation: login-pulse 3s ease-in-out infinite;
+}
+
+.login-pulse-active:hover {
+  animation: none;
+}
+
 /* Custom scrollbar for sidebar */
 .pmr-scrollbar {
   scrollbar-width: thin;
@@ -412,6 +426,11 @@ textarea:focus-visible {
     border-top-color: #0D6E6E;
   }
 
+  /* No pulse animation */
+  .login-pulse-active {
+    animation: none;
+  }
+
   /* Instant SubNav transitions */
   .subnav-scroll button {
     transition: none !important;