added some nice animation details

src/lib/components/VerseDisplay.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { browser } from "$app/environment";
+  import { fade } from "svelte/transition";
   import type { PageData } from "../../routes/$types.js"; // Approximate type; adjust if needed
   import Container from "./Container.svelte";
 
@@ -20,19 +22,52 @@
       .replace(/^([a-z])/, (c) => c.toUpperCase())
       .replace(/[,:;-—]$/, "...")
   );
+
+  let showReference = $state(false);
+
+  // Delay showing reference until GuessesTable animation completes
+  $effect(() => {
+    if (!isWon) {
+      showReference = false;
+      return;
+    }
+
+    // Check if user already won today (page reload case)
+    const winTrackedKey = `bibdle-win-tracked-${dailyVerse.date}`;
+    const alreadyWonToday = browser && localStorage.getItem(winTrackedKey) === "true";
+
+    if (alreadyWonToday) {
+      // User already won and is refreshing - show immediately
+      showReference = true;
+    } else {
+      // User just won this session - delay for animation
+      const animationDelay = 1800;
+      const timeoutId = setTimeout(() => {
+        showReference = true;
+      }, animationDelay);
+
+      return () => clearTimeout(timeoutId);
+    }
+  });
 </script>
 
-<Container class="w-full p-8 sm:p-12 bg-white/70">
+<Container class="w-full p-8 sm:p-12 bg-white/70 overflow-hidden">
   <blockquote
     class="text-xl sm:text-2xl font-triodion leading-relaxed text-gray-700 text-center"
   >
     {displayVerseText}
   </blockquote>
-  {#if isWon}
-    <p
-      class="text-center text-lg! big-text text-green-600! font-bold mt-8 bg-white/70 rounded-xl px-4 py-2"
-    >
-      {displayReference}
-    </p>
-  {/if}
+  <div
+    class="transition-all duration-500 ease-in-out overflow-hidden"
+    style="max-height: {showReference ? '200px' : '0px'};"
+  >
+    {#if showReference}
+      <p
+        transition:fade={{ duration: 400 }}
+        class="text-center text-lg! big-text text-green-600! font-bold mt-8 bg-white/70 rounded-xl px-4 py-2"
+      >
+        {displayReference}
+      </p>
+    {/if}
+  </div>
 </Container>