Login page animations

frontend/src/routes/+page.svelte

@@ -32,6 +32,7 @@
   let password = $state('changeme');
   let isLoggingIn = $state(false);
   let loginError = $state('');
+  let passwordInput: HTMLInputElement | null = null;
   const currentYear = new Date().getFullYear();
   const appVersion = `v${packageInfo.version}`;
   const releaseStage = 'Alpha';
@@ -48,11 +49,37 @@
       clientSession.set(session);
     } catch (error) {
       loginError = error instanceof Error ? error.message : 'Unable to sign in';
+      triggerPasswordShake();
     } finally {
       isLoggingIn = false;
     }
   }
 
+  function triggerPasswordShake() {
+    if (typeof window === 'undefined' || !passwordInput) {
+      return;
+    }
+
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+      return;
+    }
+
+    passwordInput.animate(
+      [
+        { transform: 'translateX(0)' },
+        { transform: 'translateX(-8px)' },
+        { transform: 'translateX(8px)' },
+        { transform: 'translateX(-6px)' },
+        { transform: 'translateX(6px)' },
+        { transform: 'translateX(0)' }
+      ],
+      {
+        duration: 360,
+        easing: 'cubic-bezier(0.36, 0.07, 0.19, 0.97)'
+      }
+    );
+  }
+
   function currency(value: number | null | undefined, digits = 2) {
     if (value === null || value === undefined) {
       return 'N/A';
@@ -325,9 +352,15 @@
           <input bind:value={email} type="email" autocomplete="username" placeholder="Email" />
         </label>
 
-        <label class="field">
+        <label class="field field-password" class:is-invalid={Boolean(loginError)}>
           <span>Password</span>
-          <input bind:value={password} type="password" autocomplete="current-password" placeholder="Password" />
+          <input
+            bind:this={passwordInput}
+            bind:value={password}
+            type="password"
+            autocomplete="current-password"
+            placeholder="Password"
+          />
         </label>
 
         <button class="primary-button auth-submit" type="submit" disabled={isLoggingIn}>
@@ -711,6 +744,7 @@
 
   .auth-card-login {
     width: min(100%, 39rem);
+    animation: login-card-enter 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
   }
 
   .auth-header {
@@ -886,6 +920,12 @@
     background: #fff;
   }
 
+  .field-password.is-invalid input {
+    border-color: rgba(160, 55, 55, 0.42);
+    box-shadow: 0 0 0 0.24rem rgba(160, 55, 55, 0.1);
+    background: #fff9f9;
+  }
+
   .auth-submit {
     width: 100%;
     min-height: 3.35rem;
@@ -943,6 +983,18 @@
     }
   }
 
+  @keyframes login-card-enter {
+    from {
+      opacity: 0;
+      transform: translateY(10px) scale(0.988);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+
   .dashboard-intro,
   .workspace-banner,
   .dashboard-grid,
@@ -1716,6 +1768,12 @@
     }
   }
 
+  @media (prefers-reduced-motion: reduce) {
+    .auth-card-login {
+      animation: none;
+    }
+  }
+
   @media (max-width: 860px) {
     .auth-stage {
       min-height: auto;