feat: premium polish pass — typing effect, animated counters, ambient orbs, input glow, show/hide password, redesigned settings, Reveal animations

- Add TypewriterText component for hero heading animation
- Add AnimatedCounter with scroll-triggered count-up
- Add AmbientOrbs with floating gradient orbs in hero
- Add input-glow focus effect, btn-shine hover effect CSS
- Add show/hide password toggle on login, register, and home login forms
- Redesign settings page with premium gradient cards and icon headers
- Polish /me dashboard with Reveal animations, btn-shine, input-glow
- Add animate-count CSS keyframe

src/components/auth/home-login-form.tsx

@@ -18,6 +18,7 @@ export function HomeLoginForm({
 } = {}) {
 	const [username, setUsername] = useState("");
 	const [password, setPassword] = useState("");
+	const [showPassword, setShowPassword] = useState(false);
 	const [code, setCode] = useState("");
 	const [needs2fa, setNeeds2fa] = useState(false);
 	const [error, setError] = useState<string | null>(null);
@@ -87,7 +88,7 @@ export function HomeLoginForm({
 					placeholder="Your username"
 					autoComplete="username"
 					disabled={needs2fa}
-					className="w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none disabled:opacity-50"
+					className="input-glow w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none disabled:opacity-50"
 					style={{
 						backgroundColor: "var(--color-background)",
 						color: "var(--color-text-readable)",
@@ -100,31 +101,44 @@ export function HomeLoginForm({
 			</div>
 
 			<div className="space-y-1">
-				<label
-					htmlFor="login-password"
-					className="block text-xs font-bold uppercase tracking-wider"
-					style={{ color: "var(--color-text-muted)" }}
-				>
-					Password
-				</label>
-				<input
-					id="login-password"
-					type="password"
-					value={password}
-					onChange={(e) => setPassword(e.target.value)}
-					placeholder="Your password"
-					autoComplete="current-password"
-					disabled={needs2fa}
-					className="w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none disabled:opacity-50"
-					style={{
-						backgroundColor: "var(--color-background)",
-						color: "var(--color-text-readable)",
-						borderColor: needs2fa
-							? "color-mix(in srgb, var(--color-text-muted) 15%, transparent)"
-							: "color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
-					}}
-					required
-				/>
+				<div className="flex items-center justify-between">
+					<label
+						htmlFor="login-password"
+						className="block text-xs font-bold uppercase tracking-wider"
+						style={{ color: "var(--color-text-muted)" }}
+					>
+						Password
+					</label>
+				</div>
+				<div className="relative">
+					<input
+						id="login-password"
+						type={showPassword ? "text" : "password"}
+						value={password}
+						onChange={(e) => setPassword(e.target.value)}
+						placeholder="Your password"
+						autoComplete="current-password"
+						disabled={needs2fa}
+						className="input-glow w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none disabled:opacity-50"
+						style={{
+							backgroundColor: "var(--color-background)",
+							color: "var(--color-text-readable)",
+							borderColor: needs2fa
+								? "color-mix(in srgb, var(--color-text-muted) 15%, transparent)"
+								: "color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
+						}}
+						required
+					/>
+					<button
+						type="button"
+						onClick={() => setShowPassword(!showPassword)}
+						className="absolute right-3 top-1/2 -translate-y-1/2 text-sm font-bold opacity-60 hover:opacity-100 transition-opacity"
+						style={{ color: "var(--color-text-muted)" }}
+						tabIndex={-1}
+					>
+						{showPassword ? "Hide" : "Show"}
+					</button>
+				</div>
 			</div>
 
 			{needs2fa ? (
@@ -169,7 +183,7 @@ export function HomeLoginForm({
 			<button
 				type="submit"
 				disabled={pending}
-				className="w-full cursor-pointer rounded-xl font-extrabold text-sm py-3.5 transition-all duration-200 hover:scale-[1.02] active:scale-95 shadow-lg disabled:opacity-60"
+				className="btn-shine w-full cursor-pointer rounded-xl font-extrabold text-sm py-3.5 transition-all duration-200 hover:scale-[1.02] active:scale-95 shadow-lg disabled:opacity-60"
 				style={{
 					background: "var(--color-primary)",
 					color: "var(--color-primary-foreground)",