feat(website): add entrance animations and CSS-based filter bar visibility

Replace hidden attribute on filter-bar with opacity/transform transition
driven by a .visible class, allowing smooth fade-in/slide-down when a
filter is active. Add staggered hero-in keyframe animations to the page
title, subtitle, action buttons, and search box. Polish sortable table
headers with color transition on hover and active states.

Co-Authored-By: Claude <noreply@anthropic.com>

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');
     }
   }
 

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;

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