Fix migration connection exhaustion and polish auth pages

- apply-migrations.ts: use single shared connection instead of one per operation
- Increase MariaDB max_connections from 151 to 300 in server config
- home-login-form.tsx: replace hardcoded gray colors with theme variables
- register-form.tsx: add password strength meter, spinner, theme-aligned inputs
- login-form.tsx: add Discord/Google SVG icons, spinner, smoother 2FA animation
- page/register/login: apply premium animations (float, stagger, glow, gradient)

src/app/(site)/login/page.tsx

@@ -87,11 +87,11 @@ export default async function LoginPage() {
 				</div>
 			</Reveal>
 			<Reveal>
-			<div className="flex flex-col lg:flex-row gap-10">
+			<div className="flex flex-col lg:flex-row gap-10 stagger-children">
 			{/* Left panel */}
 			<div className="lg:w-80 shrink-0 space-y-4">
 				<div
-					className="relative overflow-hidden rounded-2xl border p-6 text-center"
+					className="relative overflow-hidden rounded-2xl border p-6 text-center card-premium"
 					style={{
 						borderColor: "color-mix(in srgb, var(--color-primary) 20%, transparent)",
 						background: `url(/assets/images/background.png) center/cover no-repeat`,
@@ -109,7 +109,7 @@ export default async function LoginPage() {
 							alt="Frank"
 							width={130}
 							height={170}
-							className="object-contain mx-auto drop-shadow-xl"
+							className="object-contain mx-auto drop-shadow-xl animate-float"
 							unoptimized
 							priority
 						/>

src/app/(site)/page.tsx

@@ -183,7 +183,7 @@ export default async function Home() {
 								</Link>
 							</div>
 						</div>
-						<div className="shrink-0 relative">
+						<div className="shrink-0 relative animate-float">
 							<div
 								className="absolute -bottom-4 -left-4 w-48 h-48 rounded-full opacity-[0.15] blur-[60px]"
 								style={{ background: "var(--color-primary)" }}
@@ -204,7 +204,7 @@ export default async function Home() {
 
 			{/* ── Stats ── */}
 			<Reveal>
-				<div className="grid grid-cols-3 gap-4">
+				<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" },
@@ -212,7 +212,7 @@ export default async function Home() {
 					].map((s) => (
 						<div
 							key={s.label}
-							className="relative overflow-hidden rounded-xl border p-5 text-center transition-all duration-300 hover:-translate-y-1 hover:shadow-xl"
+							className="relative overflow-hidden rounded-xl border p-5 text-center transition-all duration-300 hover:-translate-y-1 hover:shadow-xl card-premium"
 							style={{
 								background: "color-mix(in srgb, var(--color-surface) 70%, transparent)",
 								backdropFilter: "blur(8px)",
@@ -226,7 +226,7 @@ export default async function Home() {
 							/>
 							<div className="relative">
 								<div
-									className="w-10 h-10 rounded-xl flex items-center justify-center mx-auto mb-2.5"
+									className="w-10 h-10 rounded-xl flex items-center justify-center mx-auto mb-2.5 animate-pulse-glow"
 									style={{ background: "color-mix(in srgb, var(--color-primary) 14%, transparent)" }}
 								>
 									<Image src={s.icon} alt="" width={24} height={24} unoptimized />
@@ -435,9 +435,9 @@ export default async function Home() {
 
 			{/* ── Client / Play ── */}
 			<Reveal>
-				<div className="relative overflow-hidden rounded-xl border" style={{
+				<div className="relative overflow-hidden rounded-xl border animate-gradient" style={{
-					borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
+					borderColor: "color-mix(in srgb, var(--color-primary) 20%, transparent)",
-					background: "linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 6%, var(--color-surface)), color-mix(in srgb, var(--color-primary) 1%, var(--color-surface)))",
+					background: "linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)), color-mix(in srgb, var(--color-primary) 3%, var(--color-surface)), color-mix(in srgb, var(--color-accent) 4%, var(--color-surface)))",
 				}}>
 					<div className="flex flex-col md:flex-row items-center gap-6 px-6 py-7">
 						<div className="shrink-0">
@@ -455,7 +455,7 @@ export default async function Home() {
 						</div>
 						<Link
 							href="/client"
-							className="inline-flex items-center gap-2 font-extrabold text-sm px-6 py-3 rounded-xl transition-all duration-200 hover:scale-[1.03] active:scale-95 shadow-lg shrink-0"
+							className="inline-flex items-center gap-2 font-extrabold text-sm px-6 py-3 rounded-xl transition-all duration-200 hover:scale-[1.03] active:scale-95 shadow-lg shrink-0 animate-pulse-glow"
 							style={{
 								background: "var(--color-primary)",
 								color: "var(--color-primary-foreground)",

src/app/(site)/register/page.tsx

@@ -87,11 +87,11 @@ export default async function RegisterPage() {
 				</div>
 			</Reveal>
 			<Reveal>
-			<div className="flex flex-col lg:flex-row gap-10">
+			<div className="flex flex-col lg:flex-row gap-10 stagger-children">
 			{/* Left panel */}
 			<div className="lg:w-80 shrink-0 space-y-4">
 				<div
-					className="relative overflow-hidden rounded-2xl border p-6 text-center"
+					className="relative overflow-hidden rounded-2xl border p-6 text-center card-premium"
 					style={{
 						borderColor: "color-mix(in srgb, var(--color-primary) 20%, transparent)",
 						background: `url(/assets/images/background.png) center/cover no-repeat`,
@@ -109,7 +109,7 @@ export default async function RegisterPage() {
 						alt="Frank"
 						width={130}
 						height={170}
-						className="object-contain mx-auto drop-shadow-xl"
+						className="object-contain mx-auto drop-shadow-xl animate-float"
 						unoptimized
 						priority
 					/>