diff --git a/website/static/main.js b/website/static/main.js
index 9ad9534..749aa29 100644
--- a/website/static/main.js
+++ b/website/static/main.js
@@ -100,10 +100,10 @@ function applyFilters() {
   // Filter bar
   if (filterBar) {
     if (activeFilter) {
-      filterBar.hidden = false;
+      filterBar.classList.add('visible');
       if (filterValue) filterValue.textContent = activeFilter.value;
     } else {
-      filterBar.hidden = true;
+      filterBar.classList.remove('visible');
     }
   }
 
diff --git a/website/static/style.css b/website/static/style.css
index 28cf360..46a7b1f 100644
--- a/website/static/style.css
+++ b/website/static/style.css
@@ -60,12 +60,22 @@ a:hover { color: var(--accent-hover); text-decoration: underline; }
 .skip-link:focus { left: 0; }
 
 /* === Hero === */
+@keyframes hero-in {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
 .hero {
   max-width: 1400px;
   margin: 0 auto;
   padding: 3.5rem 2rem 1.5rem;
 }
 
+.hero h1 { animation: hero-in 0.5s cubic-bezier(0.25, 1, 0.5, 1) both; }
+.hero-sub { animation: hero-in 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0.08s both; }
+.hero-gh { animation: hero-in 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0.16s both; }
+.hero-submit { animation: hero-in 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0.16s both; }
+
 .hero-main {
   display: flex;
   flex-wrap: wrap;
@@ -142,6 +152,7 @@ a:hover { color: var(--accent-hover); text-decoration: underline; }
 .search-wrap {
   position: relative;
   margin-bottom: 0.75rem;
+  animation: hero-in 0.5s cubic-bezier(0.25, 1, 0.5, 1) 0.24s both;
 }
 
 .search-icon {
@@ -174,8 +185,6 @@ a:hover { color: var(--accent-hover); text-decoration: underline; }
   background: var(--bg);
 }
 
-.filter-bar[hidden] { display: none; }
-
 .filter-bar {
   display: flex;
   align-items: center;
@@ -183,6 +192,16 @@ a:hover { color: var(--accent-hover); text-decoration: underline; }
   padding: 0.5rem 0;
   font-size: var(--text-sm);
   color: var(--text-secondary);
+  opacity: 0;
+  transform: translateY(-4px);
+  pointer-events: none;
+  transition: opacity 0.15s ease, transform 0.15s cubic-bezier(0.25, 1, 0.5, 1);
+}
+
+.filter-bar.visible {
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
 }
 
 .filter-bar strong {
@@ -297,10 +316,18 @@ th[data-sort] {
   user-select: none;
 }
 
+th[data-sort] {
+  transition: color 0.15s ease;
+}
+
 th[data-sort]:hover {
   color: var(--accent);
 }
 
+th[data-sort]:active {
+  color: var(--accent-hover);
+}
+
 th[data-sort]::after {
   content: " ▼";
   opacity: 0;
diff --git a/website/templates/index.html b/website/templates/index.html
index 92942ef..4d7d885 100644
--- a/website/templates/index.html
+++ b/website/templates/index.html
@@ -58,7 +58,7 @@
       aria-label="Search libraries"
     />
   </div>
-  <div class="filter-bar" hidden>
+  <div class="filter-bar">
     <span>Showing <strong class="filter-value"></strong></span>
     <button class="filter-clear" aria-label="Clear filter">
       &times; Clear