From df8a9e62bb952d7b9057634ba263655eea73bae4 Mon Sep 17 00:00:00 2001
From: George Powell <geohpowell@gmail.com>
Date: Wed, 11 Feb 2026 17:07:03 -0500
Subject: [PATCH] Add staggered page load animations

Implement elegant fadeInUp animations with staggered delays for main page
elements to create a polished, progressive reveal effect on page load.

Changes:
- layout.css: Added fadeInUp keyframes and delay utility classes
  (200ms, 400ms, 600ms, 800ms)
- +page.svelte: Applied animations to title, date, verse display,
  search input, guesses table, and credits

Animation sequence:
1. Title (0ms)
2. Date + Verse Display (200ms)
3. Search Input (400ms)
4. Guesses Table (600ms)
5. Credits (800ms - when won)

Creates a smooth, professional page load experience without changing any
existing design or functionality.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/routes/+page.svelte | 20 ++++++++++++++------
 src/routes/layout.css   | 32 ++++++++++++++++++++++++++++++++
 2 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index f6eea9b..c4a6fca 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -456,22 +456,26 @@
 <div class="min-h-dvh md:bg-linear-to-br md:from-blue-50 md:to-indigo-200 py-8">
 	<div class="w-full max-w-3xl mx-auto px-4">
 		<h1
-			class="text-3xl md:text-4xl font-bold text-center uppercase text-gray-600 drop-shadow-2xl tracking-widest p-4"
+			class="text-3xl md:text-4xl font-bold text-center uppercase text-gray-600 drop-shadow-2xl tracking-widest p-4 animate-fade-in-up"
 		>
 			<TitleAnimation />
 			<div class="font-normal"></div>
 		</h1>
-		<div class="text-center mb-8">
+		<div class="text-center mb-8 animate-fade-in-up animate-delay-200">
 			<span class="big-text"
 				>{isDev ? "Dev Edition  |  " : ""}{currentDate}</span
 			>
 		</div>
 
 		<div class="flex flex-col gap-6">
-			<VerseDisplay {data} {isWon} {blurChapter} />
+			<div class="animate-fade-in-up animate-delay-200">
+				<VerseDisplay {data} {isWon} {blurChapter} />
+			</div>
 
 			{#if !isWon}
-				<SearchInput bind:searchQuery {guessedIds} {submitGuess} />
+				<div class="animate-fade-in-up animate-delay-400">
+					<SearchInput bind:searchQuery {guessedIds} {submitGuess} />
+				</div>
 			{:else}
 				<WinScreen
 					{grade}
@@ -501,10 +505,14 @@
 				/>
 			{/if}
 
-			<GuessesTable {guesses} {correctBookId} />
+			<div class="animate-fade-in-up animate-delay-600">
+				<GuessesTable {guesses} {correctBookId} />
+			</div>
 
 			{#if isWon}
-				<Credits />
+				<div class="animate-fade-in-up animate-delay-800">
+					<Credits />
+				</div>
 			{/if}
 		</div>
 		<div class="mt-8 flex flex-col items-stretch md:items-center gap-3">
diff --git a/src/routes/layout.css b/src/routes/layout.css
index 77a35d8..a2aae8e 100644
--- a/src/routes/layout.css
+++ b/src/routes/layout.css
@@ -16,4 +16,36 @@ html, body {
 	letter-spacing: 0.2em;
 	color: rgb(107 114 128);
 	font-weight: 700;
+}
+
+/* Page load animations */
+@keyframes fadeInUp {
+	from {
+		opacity: 0;
+		transform: translateY(30px);
+	}
+	to {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+.animate-fade-in-up {
+	animation: fadeInUp 0.8s ease-out both;
+}
+
+.animate-delay-200 {
+	animation-delay: 0.2s;
+}
+
+.animate-delay-400 {
+	animation-delay: 0.4s;
+}
+
+.animate-delay-600 {
+	animation-delay: 0.6s;
+}
+
+.animate-delay-800 {
+	animation-delay: 0.8s;
 }
\ No newline at end of file