From 274188b6aa880196c1216ae74f7f160cc35ebebd Mon Sep 17 00:00:00 2001
From: Andy Charlwood <andrew.charlwood@gmail.com>
Date: Sun, 15 Feb 2026 14:23:56 +0000
Subject: [PATCH] feat: US-007 - Reduce backdrop blur intensity by ~50%

---
 Ralph/prd.json                 |  2 +-
 Ralph/progress.txt             | 11 +++++++++++
 src/components/LoginScreen.tsx |  7 +++++--
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/Ralph/prd.json b/Ralph/prd.json
index c5a56d1..4d549df 100644
--- a/Ralph/prd.json
+++ b/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."
     },
     {
diff --git a/Ralph/progress.txt b/Ralph/progress.txt
index 39dfd35..6dc9763 100644
--- a/Ralph/progress.txt
+++ b/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
+---
diff --git a/src/components/LoginScreen.tsx b/src/components/LoginScreen.tsx
index 43dbef7..9456935 100644
--- a/src/components/LoginScreen.tsx
+++ b/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)',
-        WebkitBackdropFilter: 'blur(20px)',
+        backdropFilter: `blur(${BACKDROP_BLUR_PX}px)`,
+        WebkitBackdropFilter: `blur(${BACKDROP_BLUR_PX}px)`,
       }}
       animate={isExiting ? {
         backgroundColor: 'rgba(240, 245, 244, 0)',