Comprehensive Web Interface Guidelines audit: accessibility, motion, and typography

- Add global MotionConfig reducedMotion="user" in root layout
- Add color-scheme: dark, theme-color meta, skip-to-main-content link
- Add aria-hidden={true} to ~60+ decorative icons across 33 files
- Add aria-label to all icon-only buttons (logout, star rating, play, delete, etc.)
- Replace transition-all with specific properties (11 files)
- Add motion-safe: prefix for CSS hover transforms and animate-pulse
- Add prefers-reduced-motion: reduce override in globals.css
- Add useReducedMotion guard to status-dot pulsing animation
- Fix focus-visible styles on auth form inputs (focus → focus-visible, stronger ring)
- Add text-balance to all headings (13 files)
- Replace "..." with "…" (U+2026) in all loading/placeholder text
- Add autocomplete, spellCheck, role="alert" to auth form
- Add aria-label to Switch controls and filmography select
- Fix heading hierarchy (h3 → h2 where h2 was skipped)
- Add break-words to title overview, overscroll-contain to drawer
- Add confirmation dialog for destructive library removal
- Add group-focus-within:opacity-100 for keyboard-accessible backup actions
- Add role="radio" + aria-checked to star rating buttons
- Add aria-label to carousel region, role="img" to TMDB logo SVG
- Add text-foreground to native select for dark mode consistency

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

components/title-card.tsx

@@ -153,7 +153,7 @@ function ProgressBar({ watched, total }: { watched: number; total: number }) {
         render={<div />}
       >
         <div
-          className="h-full bg-status-watching transition-all duration-500 ease-out"
+          className="h-full bg-status-watching transition-[width] duration-500 ease-out"
           style={{ width: `${pct}%` }}
         />
       </TooltipTrigger>
@@ -249,11 +249,14 @@ function CardInner({
           </p>
         </div>
         <div className="mt-1.5 flex items-center gap-2 text-xs text-muted-foreground">
-          <TypeIcon className="size-3.5 shrink-0 text-primary/60" />
+          <TypeIcon
+            aria-hidden={true}
+            className="size-3.5 shrink-0 text-primary/60"
+          />
           {year && <span>{year}</span>}
           {voteAverage != null && voteAverage > 0 && (
             <span className="ml-auto flex items-center gap-0.5 text-primary/80">
-              <IconStarFilled className="size-[11px]" />
+              <IconStarFilled aria-hidden={true} className="size-[11px]" />
               {voteAverage.toFixed(1)}
             </span>
           )}