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/login-form.tsx

@@ -21,6 +21,7 @@ export function LoginForm({
 	const t = useTranslations("pages.login");
 	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 LoginForm({
 						placeholder={t("usernamePlaceholder")}
 						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)",
@@ -95,21 +96,30 @@ export function LoginForm({
 						}}
 					/>
 				</div>
-				<div className={needs2fa ? "opacity-50 pointer-events-none" : ""}>
+				<div className={`${needs2fa ? "opacity-50 pointer-events-none" : ""} relative`}>
 					<input
-						type="password"
+						type={showPassword ? "text" : "password"}
 						value={password}
 						onChange={(e) => setPassword(e.target.value)}
 						placeholder={t("passwordPlaceholder")}
 						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"
+						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: "color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
 						}}
 					/>
+					<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>
 				{needs2fa ? (
 					<div className="animate-scale-in">
@@ -120,7 +130,7 @@ export function LoginForm({
 							inputMode="numeric"
 							autoComplete="one-time-code"
 							autoFocus
-							className="w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none"
+							className="input-glow w-full rounded-xl border-2 px-4 py-3 text-sm font-medium transition-all focus:outline-none"
 							style={{
 								backgroundColor: "var(--color-background)",
 								color: "var(--color-text-readable)",
@@ -144,7 +154,7 @@ export function LoginForm({
 				<button
 					type="submit"
 					disabled={pending}
-					className="w-full 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 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)",