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/app/(site)/page.tsx

@@ -16,6 +16,9 @@ import { LanguageSwitcher } from "@/components/language-switcher";
 import { HomeLoginForm } from "@/components/auth/home-login-form";
 import { Reveal } from "@/components/motion-reveal";
 import { Clock } from "@/components/clock";
+import { TypewriterText } from "@/components/typewriter-text";
+import { AnimatedCounter } from "@/components/animated-counter";
+import { AmbientOrbs } from "@/components/ambient-orbs";
 
 export const revalidate = 120;
 
@@ -125,7 +128,8 @@ export default async function Home() {
 							background: "linear-gradient(135deg, color-mix(in srgb, var(--color-surface) 90%, transparent) 0%, color-mix(in srgb, var(--color-surface) 35%, transparent) 50%, color-mix(in srgb, var(--color-surface) 10%, transparent) 100%)",
 						}}
 					/>
-					<div className="relative flex flex-col md:flex-row items-center gap-8 px-6 py-10 md:px-10 md:py-14">
+					<AmbientOrbs />
+					<div className="relative flex flex-col md:flex-row items-center gap-8 px-6 py-10 md:px-10 md:py-14" style={{ zIndex: 2 }}>
 						<div className="flex-1 text-center md:text-left">
 							<div
 								className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-xs font-bold uppercase tracking-widest mb-5 border backdrop-blur-sm"
@@ -145,7 +149,7 @@ export default async function Home() {
 								className="text-4xl md:text-5xl lg:text-6xl font-black leading-[1.05] tracking-tight mb-3"
 								style={{ color: "var(--color-text-readable)", fontFamily: "var(--font-pixel)" }}
 							>
-								{tp("welcome", { hotelName })}
+								<TypewriterText text={tp("welcome", { hotelName })} />
 							</h1>
 							<p
 								className="text-base md:text-lg leading-relaxed max-w-xl mb-7"
@@ -202,9 +206,9 @@ export default async function Home() {
 			<Reveal>
 				<div className="grid grid-cols-3 gap-4 stagger-children">
 					{[
-						{ value: online.toLocaleString(), label: tp("statsOnline"), icon: "/assets/images/icons/online-friends.png" },
-						{ value: users.toLocaleString(), label: tp("statsCitizens"), icon: "/assets/images/icons/friends.png" },
-						{ value: rooms.toLocaleString(), label: tp("statsRooms"), icon: "/assets/images/icons/catalog.png" },
+						{ value: online, label: tp("statsOnline"), icon: "/assets/images/icons/online-friends.png" },
+						{ value: users, label: tp("statsCitizens"), icon: "/assets/images/icons/friends.png" },
+						{ value: rooms, label: tp("statsRooms"), icon: "/assets/images/icons/catalog.png" },
 					].map((s) => (
 						<div
 							key={s.label}
@@ -228,7 +232,7 @@ export default async function Home() {
 									<Image src={s.icon} alt="" width={24} height={24} unoptimized />
 								</div>
 								<div className="text-3xl md:text-4xl font-black tracking-tight mb-0.5" style={{ color: "var(--color-primary)" }}>
-									{s.value}
+									<AnimatedCounter value={s.value} />
 								</div>
 								<div className="text-xs font-bold uppercase tracking-widest" style={{ color: "var(--color-text-muted)" }}>
 									{s.label}