Update progress: Mark Task 3 complete, log iteration 3

Ralph/IMPLEMENTATION_PLAN.md

@@ -115,7 +115,7 @@ src/
 
   Modify `src/components/ECGAnimation.tsx` to change the exit phase. Instead of fading to white and revealing the CV, the animation should: 1) Complete the name tracing as normal, 2) Hold for 300ms, 3) Draw a flatline extending rightward from the name over 300ms (patient monitor flatline visual), 4) Fade entire canvas to black over 200ms, 5) Transition background to dark blue-gray (#1E293B) over 200ms. Emit `onComplete` callback to trigger LoginScreen. Total ECG phase: ~5-6 seconds. Preserve all existing animation timing for heartbeats and letter tracing.
 
-- [ ] **Task 3: Build LoginScreen component with typing animation**
+- [x] **Task 3: Build LoginScreen component with typing animation**
 
   Create `src/components/LoginScreen.tsx`. Dark blue-gray background (#1E293B). Centered white login card (320px wide, 12px radius, subtle shadow). NHS-blue shield icon at top. Username field: types "A.CHARLWOOD" character-by-character (30ms per char, Geist Mono font). Password field: fills with 8 dots (20ms per dot). "Log In" button: NHS blue (#005EB8), full width. After 150ms pause, button shows pressed state (darkens, 100ms), then emits `onComplete` callback. Total login animation: ~1.2s. Respect `prefers-reduced-motion`: with reduced motion, username appears instantly and login completes in ~500ms.
 

Ralph/progress.txt

@@ -106,3 +106,26 @@ This is a complete redesign of the CV presentation, moving from the ECG animatio
 - **Learnings**:
   - Canvas fade must complete before background transition for clean visual
   - The flatline extension needs to go slightly past viewport edge (+50px) for smooth visual
+
+### Iteration 3 — Task 3: Build LoginScreen component with typing animation
+- **Completed**: Task 3 - Created LoginScreen component with authentic clinical login typing animation
+- **Files created/modified**:
+  - `src/components/LoginScreen.tsx` - New component with typing animation
+  - `src/App.tsx` - Added 'login' phase between 'ecg' and 'content'
+  - `src/types/index.ts` - Added 'login' to Phase type
+  - `index.html` - Added Inter font family
+  - `tailwind.config.js` - Added PMR colors (sidebar, banner, nhsblue, etc.) and fonts (inter, geist)
+- **Design decisions**:
+  - Username types at 30ms per character (A.CHARLWOOD = 11 chars + space = ~350ms)
+  - Password fills 8 dots at 20ms per dot (~160ms)
+  - Button shows pressed state (darker, scale) before onComplete callback
+  - Blinking cursor at 530ms interval during typing
+  - Uses Fira Code as monospace font (Geist Mono not available via Google Fonts)
+  - NHS blue shield icon for clinical system branding
+  - White login card: 320px wide, 12px radius, subtle shadow
+- **Accessibility**:
+  - Respects prefers-reduced-motion: instant text appearance, ~500ms total
+- **Quality checks**: `npm run typecheck` ✓, `npm run lint` ✓, `npm run build` ✓
+- **Learnings**:
+  - Geist Mono not available via Google Fonts, using Fira Code as fallback
+  - Total login animation timing: ~1.2s (350ms username + 150ms pause + 160ms password + 150ms pause + 100ms button + 200ms hold)