From eb3f4e719c70a47d204ed4dad6886d03cae6ca12 Mon Sep 17 00:00:00 2001
From: ectasy663 <namansingh4680@gmail.com>
Date: Fri, 23 Oct 2026 16:56:49 +0530
Subject: [PATCH] fix: uniform subtle minimal animations across all Pro tier
 and dashboard pages

---
 .../dashboard/ai-coach/cbt-dpp/[id]/page.tsx  |  4 +--
 src/app/dashboard/ai-coach/cbt-dpp/page.tsx   |  2 +-
 .../ai-coach/college-predictor/page.tsx       |  2 +-
 src/app/dashboard/ai-coach/heatmap/page.tsx   |  2 +-
 src/app/dashboard/ai-coach/page.tsx           |  2 +-
 src/app/dashboard/ai-coach/readiness/page.tsx |  2 +-
 src/app/dashboard/ai-coach/strategy/page.tsx  |  2 +-
 .../dashboard/ai-coach/study-plan/page.tsx    |  8 ++---
 .../ai-coach/time-optimization/page.tsx       |  2 +-
 src/app/dashboard/ai-coach/tutor/page.tsx     |  8 ++---
 .../ai-coach/weekly-progress/page.tsx         |  2 +-
 src/app/dashboard/analytics/page.tsx          |  2 +-
 .../cbt/history/[attemptId]/page.tsx          |  6 ++--
 src/app/dashboard/cbt/page.tsx                |  2 +-
 src/app/dashboard/community/page.tsx          |  2 +-
 src/app/dashboard/dpp/page.tsx                |  2 +-
 src/app/dashboard/layout.tsx                  |  2 +-
 src/app/dashboard/leaderboard/page.tsx        |  2 +-
 src/app/dashboard/materials/page.tsx          |  2 +-
 src/app/dashboard/page.tsx                    |  2 +-
 src/app/dashboard/progress/page.tsx           |  2 +-
 src/app/dashboard/rank-predictor/page.tsx     |  8 ++---
 src/app/dashboard/settings/page.tsx           |  2 +-
 src/app/dashboard/settings/password/page.tsx  |  8 ++---
 src/app/dashboard/streaks/page.tsx            |  2 +-
 src/app/globals.css                           | 31 +++++++++++++------
 26 files changed, 62 insertions(+), 49 deletions(-)

diff --git a/src/app/dashboard/ai-coach/cbt-dpp/[id]/page.tsx b/src/app/dashboard/ai-coach/cbt-dpp/[id]/page.tsx
index d96f2d8..2249042 100644
--- a/src/app/dashboard/ai-coach/cbt-dpp/[id]/page.tsx
+++ b/src/app/dashboard/ai-coach/cbt-dpp/[id]/page.tsx
@@ -105,7 +105,7 @@ export default function AIComCBTDPPPage() {
   return (
     <div className="p-6 md:p-8 space-y-6 max-w-6xl mx-auto min-h-screen">
       {/* Top Header */}
-      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 bg-secondary/20 border border-border p-6 rounded-3xl backdrop-blur-xl">
+      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4 bg-secondary/20 border border-border p-6 rounded-3xl backdrop-blur-xl animate-section animate-section-1">
         <div className="flex items-center gap-4">
           <Link href="/dashboard/dpp">
             <Button variant="outline" size="icon" className="rounded-xl border-border hover:bg-secondary">
@@ -166,7 +166,7 @@ export default function AIComCBTDPPPage() {
       )}
 
       {/* Main CBT Grid */}
-      <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
+      <div className="grid grid-cols-1 lg:grid-cols-4 gap-6 animate-section animate-section-2">
         {/* Question Area */}
         <div className="lg:col-span-3">
           <Card className="border-border bg-background/80 backdrop-blur-xl p-6 rounded-3xl shadow-xl space-y-6">
diff --git a/src/app/dashboard/ai-coach/cbt-dpp/page.tsx b/src/app/dashboard/ai-coach/cbt-dpp/page.tsx
index f5f25fb..ba4fd91 100644
--- a/src/app/dashboard/ai-coach/cbt-dpp/page.tsx
+++ b/src/app/dashboard/ai-coach/cbt-dpp/page.tsx
@@ -132,7 +132,7 @@ export default function DPPPage() {
   const cleanTitle = (title: string) => title.replace(/\s*\(ExamEnum\.[^)]+\)/, '');
 
   return (
-    <div className="p-8 space-y-6 animate-in fade-in zoom-in-95 origin-top duration-500 max-w-7xl mx-auto">
+    <div className="p-8 space-y-6 max-w-7xl mx-auto">
       <div className="flex flex-col md:flex-row md:items-center justify-between p-8 bg-gradient-to-r from-secondary/50 to-background border border-border rounded-2xl shadow-sm gap-6">
         <div>
           <h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-2">
diff --git a/src/app/dashboard/ai-coach/college-predictor/page.tsx b/src/app/dashboard/ai-coach/college-predictor/page.tsx
index 3eedce4..d54ab50 100644
--- a/src/app/dashboard/ai-coach/college-predictor/page.tsx
+++ b/src/app/dashboard/ai-coach/college-predictor/page.tsx
@@ -89,7 +89,7 @@ export default function CollegePredictorPage() {
   const trendData = isDemo ? DEMO_TREND_DATA : ZERO_TREND_DATA
 
   return (
-    <div className="p-6 md:p-8 space-y-8 animate-in fade-in zoom-in-95 origin-top duration-500 max-w-7xl mx-auto min-h-screen">
+    <div className="p-6 md:p-8 space-y-8 max-w-7xl mx-auto min-h-screen">
       {/* Page Header */}
       <div className="border-b border-border/50 pb-6 animate-section animate-section-1">
         <div className="flex items-start justify-between gap-4 flex-wrap">
diff --git a/src/app/dashboard/ai-coach/heatmap/page.tsx b/src/app/dashboard/ai-coach/heatmap/page.tsx
index 316d18e..8b7dce6 100644
--- a/src/app/dashboard/ai-coach/heatmap/page.tsx
+++ b/src/app/dashboard/ai-coach/heatmap/page.tsx
@@ -35,7 +35,7 @@ export default function HeatmapPage() {
   const criticalTopics = isDemo ? DEMO_CRITICAL_TOPICS : []
 
   return (
-    <div className="p-6 md:p-8 max-w-7xl mx-auto space-y-8 min-h-screen animate-in fade-in zoom-in-95 origin-top duration-500">
+    <div className="p-6 md:p-8 max-w-7xl mx-auto space-y-8 min-h-screen">
       {/* Page Header */}
       <div className="border-b border-border/50 pb-6 animate-section animate-section-1">
         <div className="flex items-start justify-between gap-4 flex-wrap">
diff --git a/src/app/dashboard/ai-coach/page.tsx b/src/app/dashboard/ai-coach/page.tsx
index dc5f7e2..fe5cdfa 100644
--- a/src/app/dashboard/ai-coach/page.tsx
+++ b/src/app/dashboard/ai-coach/page.tsx
@@ -89,7 +89,7 @@ export default function AICoachDashboard() {
   const currentStreakDays = `${user?.streak_count || (isDemo ? 12 : 1)} d`
 
   return (
-    <div className="p-6 max-w-6xl mx-auto space-y-8 animate-in fade-in zoom-in-95 origin-top duration-500">
+    <div className="p-6 max-w-6xl mx-auto space-y-8">
 
       {/* ── METRICS BAR ── */}
       <div className="flex flex-wrap items-center justify-end gap-2 pt-2 animate-section animate-section-1">
diff --git a/src/app/dashboard/ai-coach/readiness/page.tsx b/src/app/dashboard/ai-coach/readiness/page.tsx
index 6ab539c..3993897 100644
--- a/src/app/dashboard/ai-coach/readiness/page.tsx
+++ b/src/app/dashboard/ai-coach/readiness/page.tsx
@@ -32,7 +32,7 @@ export default function ReadinessPage() {
   const maxScore = Math.max(1, ...scoreHistory.map(d => d.score))
 
   return (
-    <div className="p-6 md:p-8 space-y-8 animate-in fade-in zoom-in-95 origin-top duration-500 max-w-7xl mx-auto min-h-screen">
+    <div className="p-6 md:p-8 space-y-8 max-w-7xl mx-auto min-h-screen">
       {/* Page Header */}
       <div className="border-b border-border/50 pb-6 animate-section animate-section-1">
         <div className="flex items-start justify-between gap-4 flex-wrap">
diff --git a/src/app/dashboard/ai-coach/strategy/page.tsx b/src/app/dashboard/ai-coach/strategy/page.tsx
index cf4a72c..51f30e7 100644
--- a/src/app/dashboard/ai-coach/strategy/page.tsx
+++ b/src/app/dashboard/ai-coach/strategy/page.tsx
@@ -24,7 +24,7 @@ export default function StrategyPage() {
   const negMarkingData = isDemo ? DEMO_NEG_MARKING_DATA : ZERO_NEG_MARKING_DATA
 
   return (
-    <div className="p-6 md:p-8 space-y-8 animate-in fade-in zoom-in-95 origin-top duration-500 max-w-7xl mx-auto min-h-screen">
+    <div className="p-6 md:p-8 space-y-8 max-w-7xl mx-auto min-h-screen">
       {/* Page Header */}
       <div className="border-b border-border/50 pb-6 animate-section animate-section-1">
         <div className="flex items-start justify-between gap-4 flex-wrap">
diff --git a/src/app/dashboard/ai-coach/study-plan/page.tsx b/src/app/dashboard/ai-coach/study-plan/page.tsx
index da6fd6f..2522efc 100644
--- a/src/app/dashboard/ai-coach/study-plan/page.tsx
+++ b/src/app/dashboard/ai-coach/study-plan/page.tsx
@@ -1,4 +1,4 @@
-"use client"
+"use client"
 
 import { StudyPlanCard } from "@/components/AI/StudyPlanCard"
 import { WeeklyProgressReport } from "@/components/AI/WeeklyProgressReport"
@@ -12,7 +12,7 @@ export default function StudyPlanPage() {
   const streakCount = user?.streak_count || (isDemo ? 12 : 1)
 
   return (
-    <div className="p-6 md:p-8 space-y-8 animate-in fade-in zoom-in-95 origin-top duration-500 max-w-7xl mx-auto min-h-screen">
+    <div className="p-6 md:p-8 space-y-8 max-w-7xl mx-auto min-h-screen">
       {/* Page Header */}
       <div className="border-b border-border/50 pb-6 animate-section animate-section-1">
         <div className="flex items-start justify-between gap-4 flex-wrap">
@@ -34,7 +34,7 @@ export default function StudyPlanPage() {
       </div>
 
       {/* KPI Strip */}
-      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 animate-section animate-section-1">
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 animate-section animate-section-2">
         {[
           { label: "Tasks Today", value: isDemo ? "5" : "3", sub: isDemo ? "2 completed" : "0 completed", icon: <CheckCircle2 size={18} className="text-green-400" />, color: "border-green-400/20 bg-green-400/5" },
           { label: "Study Hours Today", value: isDemo ? "3.8 hrs" : "0.0 hrs", sub: "Target: 5 hrs", icon: <Clock size={18} className="text-[var(--cyan-ai)]" />, color: "border-[var(--cyan-ai-20)] bg-[var(--cyan-ai-10)]" },
@@ -52,7 +52,7 @@ export default function StudyPlanPage() {
         ))}
       </div>
 
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 animate-section animate-section-2">
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 animate-section animate-section-3">
         <div className="lg:col-span-2 space-y-8">
           {/* Today's Schedule */}
           <div className="space-y-3">
diff --git a/src/app/dashboard/ai-coach/time-optimization/page.tsx b/src/app/dashboard/ai-coach/time-optimization/page.tsx
index e0d0894..3893d03 100644
--- a/src/app/dashboard/ai-coach/time-optimization/page.tsx
+++ b/src/app/dashboard/ai-coach/time-optimization/page.tsx
@@ -69,7 +69,7 @@ export default function TimeOptimizationPage() {
   ]
 
   return (
-    <div className="p-6 md:p-8 max-w-7xl mx-auto space-y-8 min-h-screen animate-in fade-in zoom-in-95 origin-top duration-500">
+    <div className="p-6 md:p-8 max-w-7xl mx-auto space-y-8 min-h-screen">
       {/* Page Header */}
       <div className="border-b border-border/50 pb-6 animate-section animate-section-1">
         <div className="flex items-start justify-between gap-4 flex-wrap">
diff --git a/src/app/dashboard/ai-coach/tutor/page.tsx b/src/app/dashboard/ai-coach/tutor/page.tsx
index 74f1b71..a09b833 100644
--- a/src/app/dashboard/ai-coach/tutor/page.tsx
+++ b/src/app/dashboard/ai-coach/tutor/page.tsx
@@ -1,12 +1,12 @@
-"use client"
+"use client"
 
 import { TutorChat } from "@/components/AI/TutorChat"
 import { BrainCircuit, Sparkles } from "lucide-react"
 
 export default function TutorChatPage() {
   return (
-    <div className="h-[calc(100vh-100px)] w-full flex flex-col pt-4 max-w-7xl mx-auto px-4 gap-4 animate-in fade-in zoom-in-95 origin-top duration-500">
-      <div className="border-b border-border/50 pb-4">
+    <div className="h-[calc(100vh-100px)] w-full flex flex-col pt-4 max-w-7xl mx-auto px-4 gap-4">
+      <div className="border-b border-border/50 pb-4 animate-section animate-section-1">
         <div className="flex items-start justify-between gap-4 flex-wrap">
           <div>
             <h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-1">
@@ -26,7 +26,7 @@ export default function TutorChatPage() {
           </div>
         </div>
       </div>
-      <div className="flex-1 rounded-3xl overflow-hidden border border-border/50 shadow-xl bg-background flex flex-col h-full">
+      <div className="flex-1 rounded-3xl overflow-hidden border border-border/50 shadow-xl bg-background flex flex-col h-full animate-section animate-section-2">
         <TutorChat />
       </div>
     </div>
diff --git a/src/app/dashboard/ai-coach/weekly-progress/page.tsx b/src/app/dashboard/ai-coach/weekly-progress/page.tsx
index 5b79940..3527dcd 100644
--- a/src/app/dashboard/ai-coach/weekly-progress/page.tsx
+++ b/src/app/dashboard/ai-coach/weekly-progress/page.tsx
@@ -41,7 +41,7 @@ export default function WeeklyProgressPage() {
   const syllabusProgress = isDemo ? DEMO_SYLLABUS_PROGRESS : ZERO_SYLLABUS_PROGRESS
 
   return (
-    <div className="p-6 md:p-8 max-w-7xl mx-auto space-y-8 min-h-screen animate-in fade-in zoom-in-95 origin-top duration-500">
+    <div className="p-6 md:p-8 max-w-7xl mx-auto space-y-8 min-h-screen">
       {/* Page Header */}
       <div className="border-b border-border/50 pb-6 animate-section animate-section-1">
         <div className="flex items-start justify-between gap-4 flex-wrap">
diff --git a/src/app/dashboard/analytics/page.tsx b/src/app/dashboard/analytics/page.tsx
index 8c7bdee..06485fb 100644
--- a/src/app/dashboard/analytics/page.tsx
+++ b/src/app/dashboard/analytics/page.tsx
@@ -58,7 +58,7 @@ export default function AnalyticsPage() {
 
   return (
     <PremiumGate featureKey="detailed-performance-analytics">
-      <div className="p-8 space-y-8 animate-in fade-in zoom-in-95 origin-top duration-500 max-w-7xl mx-auto">
+      <div className="p-8 space-y-8 max-w-7xl mx-auto">
         <div className="flex flex-col md:flex-row md:items-end justify-between gap-4 animate-section animate-section-1">
           <div>
             <h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-1">
diff --git a/src/app/dashboard/cbt/history/[attemptId]/page.tsx b/src/app/dashboard/cbt/history/[attemptId]/page.tsx
index c2f3f66..0a85afb 100644
--- a/src/app/dashboard/cbt/history/[attemptId]/page.tsx
+++ b/src/app/dashboard/cbt/history/[attemptId]/page.tsx
@@ -88,12 +88,12 @@ export default function AttemptHistoryPage({ params }: { params: Promise<{ attem
   const maxScore = attempt.total_questions * 4;
 
   return (
-    <div className="max-w-6xl mx-auto p-8 animate-in fade-in zoom-in-95 origin-top duration-500">
+    <div className="max-w-6xl mx-auto p-8">
       <Link href={backRoute} className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground mb-6 transition-colors">
         <ArrowLeft size={16} className="mr-2" /> {test?.type === 'DPS' ? 'Back to PrepPilot AI' : 'Back to Tests'}
       </Link>
       
-      <div className="flex flex-col md:flex-row gap-8 mb-10">
+      <div className="flex flex-col md:flex-row gap-8 mb-10 animate-section animate-section-1">
         <div className="flex-1">
           <h1 className="text-3xl font-bold tracking-tight mb-2">{test?.title || 'Practice Test'} Solutions</h1>
           <p className="text-muted-foreground">Review your performance, detailed solutions, and identify your weak spots.</p>
@@ -127,7 +127,7 @@ export default function AttemptHistoryPage({ params }: { params: Promise<{ attem
         </div>
       </div>
 
-      <div className="space-y-6">
+      <div className="space-y-6 animate-section animate-section-2">
         <h2 className="text-xl font-bold border-b border-border pb-2">Answer Key & Explanations</h2>
         
         {attempt.answers.map((ans: any, idx: number) => {
diff --git a/src/app/dashboard/cbt/page.tsx b/src/app/dashboard/cbt/page.tsx
index 93bfd9c..893c7d4 100644
--- a/src/app/dashboard/cbt/page.tsx
+++ b/src/app/dashboard/cbt/page.tsx
@@ -163,7 +163,7 @@ export default function CBTPage() {
 
   return (
     <>
-      <div className="p-8 space-y-8 animate-in fade-in zoom-in-95 origin-top duration-500 max-w-7xl mx-auto">
+      <div className="p-8 space-y-8 max-w-7xl mx-auto">
         <div className="flex flex-col md:flex-row md:items-end justify-between gap-4 animate-section animate-section-1">
         <div>
           <h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-1">
diff --git a/src/app/dashboard/community/page.tsx b/src/app/dashboard/community/page.tsx
index 16ce70a..9cdd9be 100644
--- a/src/app/dashboard/community/page.tsx
+++ b/src/app/dashboard/community/page.tsx
@@ -115,7 +115,7 @@ export default function CommunityPage() {
 
   return (
     <PremiumGate featureKey="doubt-resolution-community">
-      <div className="p-8 space-y-6 animate-in fade-in zoom-in-95 origin-top duration-500 max-w-7xl mx-auto">
+      <div className="p-8 space-y-6 max-w-7xl mx-auto">
         <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-4 animate-section animate-section-1">
         <div>
           <h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-1">
diff --git a/src/app/dashboard/dpp/page.tsx b/src/app/dashboard/dpp/page.tsx
index c45364c..1df29d8 100644
--- a/src/app/dashboard/dpp/page.tsx
+++ b/src/app/dashboard/dpp/page.tsx
@@ -134,7 +134,7 @@ export default function AIDailyPracticePage() {
   const cleanTitle = (title: string) => title.replace(/\s*\(ExamEnum\.[^)]+\)/, '');
 
   return (
-    <div className="p-6 md:p-8 space-y-6 animate-in fade-in zoom-in-95 origin-top duration-500 max-w-7xl mx-auto">
+    <div className="p-6 md:p-8 space-y-6 max-w-7xl mx-auto">
       {/* Page Header */}
       <div className="border-b border-border/50 pb-6 animate-section animate-section-1">
         <div className="flex items-start justify-between gap-4 flex-wrap">
diff --git a/src/app/dashboard/layout.tsx b/src/app/dashboard/layout.tsx
index 5d800d7..f718be5 100644
--- a/src/app/dashboard/layout.tsx
+++ b/src/app/dashboard/layout.tsx
@@ -430,7 +430,7 @@ export default function DashboardLayout({ children }: { children: ReactNode }) {
 
         {/* Scrollable page body */}
         <main className="flex-1 overflow-y-auto relative bg-background/50">
-          <div key={pathname} className="w-full h-full animate-in fade-in zoom-in-95 origin-top duration-500">
+          <div key={pathname} className="w-full h-full animate-page-enter">
             {children}
           </div>
         </main>
diff --git a/src/app/dashboard/leaderboard/page.tsx b/src/app/dashboard/leaderboard/page.tsx
index b1603c1..91982d3 100644
--- a/src/app/dashboard/leaderboard/page.tsx
+++ b/src/app/dashboard/leaderboard/page.tsx
@@ -46,7 +46,7 @@ export default function LeaderboardPage() {
   }
 
   return (
-    <div className="p-8 space-y-8 animate-in fade-in zoom-in-95 origin-top duration-500 max-w-7xl mx-auto">
+    <div className="p-8 space-y-8 max-w-7xl mx-auto">
       <div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-4 animate-section animate-section-1">
         <div>
           <h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-1">
diff --git a/src/app/dashboard/materials/page.tsx b/src/app/dashboard/materials/page.tsx
index a58bb24..b223882 100644
--- a/src/app/dashboard/materials/page.tsx
+++ b/src/app/dashboard/materials/page.tsx
@@ -32,7 +32,7 @@ export default function MaterialsPage() {
   };
 
   return (
-    <div className="p-8 space-y-8 animate-in fade-in zoom-in-95 origin-top duration-500 max-w-7xl mx-auto">
+    <div className="p-8 space-y-8 max-w-7xl mx-auto">
       <div className="flex flex-col md:flex-row md:items-end justify-between gap-4 animate-section animate-section-1">
         <div>
           <h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-1">
diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index 742c47f..4a8c069 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -121,7 +121,7 @@ export default function DashboardPage() {
   const isNeet = user?.target_exam === "NEET"
 
   return (
-    <div className="p-8 max-w-7xl mx-auto space-y-10 animate-in fade-in zoom-in-95 origin-top duration-500">
+    <div className="p-8 max-w-7xl mx-auto space-y-10">
 
       {/* Basic Performance Dashboard (F-05) */}
       <section className="animate-section animate-section-1">
diff --git a/src/app/dashboard/progress/page.tsx b/src/app/dashboard/progress/page.tsx
index 693a32b..47223c5 100644
--- a/src/app/dashboard/progress/page.tsx
+++ b/src/app/dashboard/progress/page.tsx
@@ -261,7 +261,7 @@ export default function ProgressTrackerPage() {
 
   return (
     <PremiumGate featureKey="chapter-wise-progress-tracking">
-      <div className="p-8 space-y-8 animate-in fade-in zoom-in-95 origin-top duration-500 max-w-7xl mx-auto">
+      <div className="p-8 space-y-8 max-w-7xl mx-auto">
         <div className="flex flex-col md:flex-row md:items-end justify-between gap-4 animate-section animate-section-1">
           <div>
           <h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-1">
diff --git a/src/app/dashboard/rank-predictor/page.tsx b/src/app/dashboard/rank-predictor/page.tsx
index a97a1fd..cae95fc 100644
--- a/src/app/dashboard/rank-predictor/page.tsx
+++ b/src/app/dashboard/rank-predictor/page.tsx
@@ -72,10 +72,10 @@ export default function RankPredictorPage() {
   ]
 
   return (
-    <div className="p-6 md:p-8 space-y-8 animate-in fade-in zoom-in-95 origin-top duration-500 max-w-7xl mx-auto min-h-screen">
+    <div className="p-6 md:p-8 space-y-8 max-w-7xl mx-auto min-h-screen">
       
       {/* Header */}
-      <div className="text-center max-w-3xl mx-auto space-y-3">
+      <div className="text-center max-w-3xl mx-auto space-y-3 animate-section animate-section-1">
         <div className="inline-flex items-center gap-2 px-4 py-1.5 bg-[var(--cyan-ai-10)] text-[var(--cyan-ai)] rounded-full border border-[var(--cyan-ai-30)] text-xs font-black tracking-widest uppercase shadow-[0_0_15px_rgba(12,96,96,0.15)]">
           <Sparkles size={14} /> AI Neural Prediction Engine
         </div>
@@ -133,7 +133,7 @@ export default function RankPredictorPage() {
       </div>
 
       {/* Main Grid */}
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 animate-section animate-section-2">
         
         {/* Left Interactive Simulator */}
         <div className="lg:col-span-2 space-y-6">
@@ -240,7 +240,7 @@ export default function RankPredictorPage() {
               {totalScore === 0 ? "AIR --" : `AIR ~${predictedRank.toLocaleString()}`}
             </div>
             <div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-[var(--cyan-ai-20)] text-[var(--cyan-ai)] text-xs font-bold border border-[var(--cyan-ai-40)]">
-              <CheckCircle2 size={13} /> {totalScore === 0 ? "Calibrating · Adjust Sliders" : "High Accuracy Confidence"}
+              <CheckCircle2 size={13} /> {totalScore === 0 ? "Calibrating � Adjust Sliders" : "High Accuracy Confidence"}
             </div>
           </Card>
 
diff --git a/src/app/dashboard/settings/page.tsx b/src/app/dashboard/settings/page.tsx
index 77a1d0b..e2707fe 100644
--- a/src/app/dashboard/settings/page.tsx
+++ b/src/app/dashboard/settings/page.tsx
@@ -107,7 +107,7 @@ export default function SettingsPage() {
   }
 
   return (
-    <div className="p-8 space-y-8 animate-in fade-in zoom-in-95 origin-top duration-500 max-w-7xl mx-auto">
+    <div className="p-8 space-y-8 max-w-7xl mx-auto">
       <div className="flex flex-col md:flex-row md:items-end justify-between gap-4 animate-section animate-section-1">
         <div>
           <h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-1">
diff --git a/src/app/dashboard/settings/password/page.tsx b/src/app/dashboard/settings/password/page.tsx
index cdeea22..5c01ac4 100644
--- a/src/app/dashboard/settings/password/page.tsx
+++ b/src/app/dashboard/settings/password/page.tsx
@@ -1,4 +1,4 @@
-"use client";
+"use client";
 
 import { fetchWithAuth } from "@/lib/apiClient";
 import { useState } from "react";
@@ -45,8 +45,8 @@ export default function PasswordPage() {
   };
 
   return (
-    <div className="p-8 space-y-8 animate-in fade-in zoom-in-95 origin-top duration-500 max-w-3xl mx-auto">
-      <div className="flex flex-col md:flex-row md:items-end justify-between gap-4">
+    <div className="p-8 space-y-8 max-w-3xl mx-auto">
+      <div className="flex flex-col md:flex-row md:items-end justify-between gap-4 animate-section animate-section-1">
         <div>
           <h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-1">
             <span className="p-2.5 rounded-xl bg-purple-50 dark:bg-[var(--cyan-ai-10)] border border-purple-300/60 dark:border-[var(--cyan-ai-20)]">
@@ -60,7 +60,7 @@ export default function PasswordPage() {
         </div>
       </div>
 
-      <Card className="border-border bg-background shadow-sm">
+      <Card className="border-border bg-background shadow-sm animate-section animate-section-2">
         <CardHeader>
           <CardTitle>Change Password</CardTitle>
           <CardDescription>Update your account password</CardDescription>
diff --git a/src/app/dashboard/streaks/page.tsx b/src/app/dashboard/streaks/page.tsx
index 1f576a7..86879d8 100644
--- a/src/app/dashboard/streaks/page.tsx
+++ b/src/app/dashboard/streaks/page.tsx
@@ -46,7 +46,7 @@ export default function StreaksPage() {
   ];
 
   return (
-    <div className="p-8 space-y-8 animate-in fade-in zoom-in-95 origin-top duration-500 max-w-7xl mx-auto">
+    <div className="p-8 space-y-8 max-w-7xl mx-auto">
       <div className="flex flex-col md:flex-row md:items-end justify-between gap-4 animate-section animate-section-1">
         <div>
           <h1 className="text-3xl md:text-4xl font-black tracking-tight flex items-center gap-3 mb-1">
diff --git a/src/app/globals.css b/src/app/globals.css
index 069c1d4..fa20cba 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -121,17 +121,20 @@ body {
     text-wrap: balance;
   }
 
-  /* ─── Uniform staggered section entry animations ─── */
-  /* Usage: add animate-section to each section/card group */
+  /* ─── Uniform staggered subtle page & section entry animations ─── */
+  .animate-page-enter {
+    animation: pageFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
+  }
+
   .animate-section {
-    animation: sectionFadeUp 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
+    animation: sectionFadeUp 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
   }
   .animate-section-1 { animation-delay: 0ms; }
-  .animate-section-2 { animation-delay: 80ms; }
-  .animate-section-3 { animation-delay: 160ms; }
-  .animate-section-4 { animation-delay: 240ms; }
-  .animate-section-5 { animation-delay: 320ms; }
-  .animate-section-6 { animation-delay: 400ms; }
+  .animate-section-2 { animation-delay: 50ms; }
+  .animate-section-3 { animation-delay: 100ms; }
+  .animate-section-4 { animation-delay: 150ms; }
+  .animate-section-5 { animation-delay: 200ms; }
+  .animate-section-6 { animation-delay: 250ms; }
 
 
   
@@ -188,13 +191,23 @@ body {
   background: var(--muted-foreground);
 }
 
+@keyframes pageFadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
 @keyframes sectionFadeUp {
   from {
     opacity: 0;
-    transform: translateY(18px);
+    transform: translateY(8px);
   }
   to {
     opacity: 1;
     transform: translateY(0);
   }
 }
+