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)/me/page.tsx

@@ -4,6 +4,7 @@ import { redirect } from "next/navigation";
 import type { CSSProperties, ReactNode } from "react";
 import { claimReferral } from "@/actions/referral";
 import { ContentCard, EmptyState, OnlineBadge } from "@/components/public/ui";
+import { Reveal } from "@/components/motion-reveal";
 import { auth } from "@/lib/auth";
 import { avatarImageUrl } from "@/lib/format";
 import { resolveHotelName } from "@/lib/hotel-name";
@@ -189,6 +190,7 @@ export default async function MePage({
 				) : null}
 
 				{/* ── Profile header ── */}
+				<Reveal>
 				<div
 					className="rounded-2xl border p-6 flex flex-col sm:flex-row items-center sm:items-start gap-6"
 					style={{
@@ -233,11 +235,13 @@ export default async function MePage({
 						</p>
 					</div>
 				</div>
+				</Reveal>
 
 				{/* ── Enter hotel ── */}
+				<Reveal delay={0.05}>
 				<Link
 					href="/client"
-					className="flex items-center justify-center gap-3 rounded-2xl border py-4 px-6 font-extrabold text-base transition-all duration-200 hover:scale-[1.02] active:scale-95 shadow-lg"
+					className="btn-shine flex items-center justify-center gap-3 rounded-2xl border py-4 px-6 font-extrabold text-base transition-all duration-200 hover:scale-[1.02] active:scale-95 shadow-lg"
 					style={{
 						background: "var(--color-primary)",
 						color: "var(--color-primary-foreground)",
@@ -254,9 +258,11 @@ export default async function MePage({
 					/>
 					Enter {hotelName}
 				</Link>
+				</Reveal>
 
 				{/* ── Stat tiles ── */}
-				<div className="grid grid-cols-3 gap-4">
+				<Reveal delay={0.1}>
+				<div className="grid grid-cols-3 gap-4 stagger-children">
 					{[
 						{ value: user.credits.toLocaleString(), label: "Credits" },
 						{ value: `Rank ${user.rank}`, label: "Hotel rank" },
@@ -285,8 +291,10 @@ export default async function MePage({
 						</div>
 					))}
 				</div>
+				</Reveal>
 
 				{/* ── Online friends ── */}
+				<Reveal delay={0.15}>
 				<div
 					className="rounded-2xl border p-5"
 					style={{
@@ -374,8 +382,10 @@ export default async function MePage({
 						</div>
 					)}
 				</div>
+				</Reveal>
 
 				{/* ── Referral card ── */}
+				<Reveal delay={0.2}>
 				<div
 					className="rounded-2xl border p-5"
 					style={{
@@ -419,7 +429,7 @@ export default async function MePage({
 									type="text"
 									readOnly
 									defaultValue={referralLink}
-									className="flex-1 min-w-0 rounded-xl border-2 px-4 py-2.5 text-sm font-medium"
+									className="input-glow flex-1 min-w-0 rounded-xl border-2 px-4 py-2.5 text-sm font-medium"
 									style={{
 										backgroundColor: "var(--color-background)",
 										color: "var(--color-text-readable, var(--color-text))",
@@ -434,7 +444,7 @@ export default async function MePage({
 							<form action={claimReferral}>
 								<button
 									type="submit"
-									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"
+									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"
 									style={{
 										background: "var(--color-primary)",
 										color: "var(--color-primary-foreground)",
@@ -459,6 +469,7 @@ export default async function MePage({
 						)}
 					</div>
 				</div>
+				</Reveal>
 			</div>
 		);
 	} catch {