Extract fade transition CSS into site.css; link from index.html. Update AGENTS.md to document site.css.

script.js

@@ -29,6 +29,42 @@
   const $q = document.getElementById('q');
   const $results = document.getElementById('results');
 
+  // Small utility: sequentially fade out one element and fade in another.
+  // We keep DOM flow predictable: hide via `hidden` only after fade-out completes.
+  function fadeSwap(outEl, inEl) {
+    return new Promise((resolve) => {
+      // Ensure both have the base fade class
+      outEl.classList.add('fade');
+      inEl.classList.add('fade');
+
+      // Start fade-out for the current element
+      outEl.classList.remove('fade-visible');
+      outEl.classList.add('fade-hidden');
+
+      const onOutEnd = () => {
+        outEl.removeEventListener('transitionend', onOutEnd);
+        outEl.hidden = true; // remove from layout after fade completes
+
+        // Prepare incoming element at opacity 0, then show and fade to 1
+        inEl.hidden = false;
+        inEl.classList.add('fade-hidden');
+        // Next frame to ensure the opacity 0 state is committed before we flip to visible
+        requestAnimationFrame(() => {
+          inEl.classList.remove('fade-hidden');
+          inEl.classList.add('fade-visible');
+          // Resolve shortly after the fade-in, no need to wait full duration strictly
+          inEl.addEventListener('transitionend', function onInEnd(e) {
+            if (e.propertyName === 'opacity') {
+              inEl.removeEventListener('transitionend', onInEnd);
+              resolve();
+            }
+          });
+        });
+      };
+      outEl.addEventListener('transitionend', onOutEnd);
+    });
+  }
+
   function setStep(text) {
     $loaderStep.textContent = text;
   }
@@ -184,10 +220,10 @@
       // Very small sanity check (does not assume tables exist yet). If desired, we could
       // run `SELECT name FROM sqlite_master LIMIT 1` here. Keep minimal per project goals.
 
-      // 4) Reveal app UI
-      $loader.hidden = true;
-      $app.hidden = false;
-      $q.disabled = false;
+      // 4) Reveal app UI with a fade transition
+      // Hide loader first, then fade the app in to avoid both showing at once.
+      await fadeSwap($loader, $app);
+      $q.disabled = false; // enable search once visible
       $q.removeAttribute('aria-disabled');
       $results.innerHTML = '<p class="has-text-success">Database initialized. Stub UI ready.</p>';