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/animated-counter.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { motion, useInView } from "framer-motion";
+import { useEffect, useRef, useState } from "react";
+
+export function AnimatedCounter({
+	value,
+	suffix = "",
+}: {
+	value: number;
+	suffix?: string;
+}) {
+	const ref = useRef<HTMLSpanElement>(null);
+	const isInView = useInView(ref, { once: true, margin: "-50px" });
+	const [display, setDisplay] = useState(0);
+
+	useEffect(() => {
+		if (!isInView) return;
+		const duration = 1200;
+		const steps = 30;
+		const increment = value / steps;
+		let current = 0;
+		let step = 0;
+		const id = setInterval(() => {
+			step++;
+			current = Math.min(Math.round(increment * step), value);
+			setDisplay(current);
+			if (step >= steps) {
+				clearInterval(id);
+				setDisplay(value);
+			}
+		}, duration / steps);
+		return () => clearInterval(id);
+	}, [isInView, value]);
+
+	return (
+		<motion.span
+			ref={ref}
+			initial={{ opacity: 0, y: 12 }}
+			animate={isInView ? { opacity: 1, y: 0 } : {}}
+			transition={{ duration: 0.5, ease: "easeOut" }}
+		>
+			{display.toLocaleString()}{suffix}
+		</motion.span>
+	);
+}