feat: US-007 - Reduce backdrop blur intensity by ~50%

Ralph/prd.json

@@ -113,7 +113,7 @@
         "Verify in browser using dev-browser skill"
       ],
       "priority": 7,
-      "passes": false,
+      "passes": true,
       "notes": "The blur is in two places in LoginScreen.tsx: the initial style (backdropFilter: blur(20px)) and the exit animation (animates from blur(20px) to blur(0px)). Extract the blur value to a constant like BACKDROP_BLUR_PX = 10, then reference it in both places."
     },
     {

Ralph/progress.txt

@@ -133,3 +133,14 @@
   - Tailwind's `z-50` = z-index 50, which was below the TopBar — switched to inline style for precise control
   - The login card doesn't need its own z-index since it's a child of the overlay and inherits stacking context
 ---
+
+## 2026-02-15 - US-007: Reduce backdrop blur intensity by ~50%
+- Added `BACKDROP_BLUR_PX = 10` constant at top of LoginScreen.tsx
+- Replaced hardcoded `blur(20px)` in initial style with template literal using constant
+- Exit animation still targets `blur(0px)` — Framer Motion interpolates from current 10px to 0px
+- Files changed: `src/components/LoginScreen.tsx`
+- **Learnings for future iterations:**
+  - The `BACKDROP_BLUR_PX` constant is in the "Login screen timing & visual constants" block at top of LoginScreen.tsx
+  - Framer Motion's `animate` prop interpolates from the element's current computed style, so the exit blur animation doesn't need the starting value explicitly
+  - Only the initial style needs the constant; the exit target (`blur(0px)`) is always 0
+---

src/components/LoginScreen.tsx

@@ -3,6 +3,9 @@ import { motion } from 'framer-motion'
 import { CvmisLogo } from './CvmisLogo'
 import { useAccessibility } from '../contexts/AccessibilityContext'
 
+// ── Login screen timing & visual constants ──────────────────────────
+const BACKDROP_BLUR_PX = 10
+
 interface LoginScreenProps {
   onComplete: () => void
 }
@@ -171,8 +174,8 @@ export function LoginScreen({ onComplete }: LoginScreenProps) {
       style={{
         zIndex: 110,
         backgroundColor: 'rgba(240, 245, 244, 0.7)',
-        backdropFilter: 'blur(20px)',
+        backdropFilter: `blur(${BACKDROP_BLUR_PX}px)`,
-        WebkitBackdropFilter: 'blur(20px)',
+        WebkitBackdropFilter: `blur(${BACKDROP_BLUR_PX}px)`,
       }}
       animate={isExiting ? {
         backgroundColor: 'rgba(240, 245, 244, 0)',