feat: chip stagger animation, IB green color theme

static/css/index.css

@@ -48,6 +48,52 @@
       box-shadow: 0 8px 18px rgba(24, 124, 72, .35);
     }
 
+    /* IB colour overrides */
+    body.scope-ib .chip.active {
+      background: linear-gradient(140deg, #1a7a47, #27a362);
+      box-shadow: 0 6px 16px rgba(27,122,71,.28);
+    }
+    body.scope-ib .tag {
+      background: linear-gradient(135deg, #edfaf3, #d8f5e7);
+      color: #165c35;
+      border-color: #b3e8cc;
+    }
+    body.scope-ib .tag:hover,
+    body.scope-ib a.tag:hover {
+      background: linear-gradient(135deg, #d6f5e5, #c0edda);
+      box-shadow: 0 4px 8px rgba(22,92,53,.12);
+    }
+    body.scope-ib .count-badge {
+      color: #1d8d54;
+      background: #e2f7ed;
+      border-color: #b8e8cc;
+    }
+    body.scope-ib .row-card::before {
+      background: linear-gradient(90deg, #27a362 0%, #7dd9a8 60%, transparent 100%);
+    }
+    body.scope-ib .active-filter {
+      border-color: #b8e8cc;
+      background: linear-gradient(145deg, #f2fbf6, #e2f7ed);
+      color: #165c35;
+    }
+    body.scope-ib .active-filter .remove {
+      background: #c8edda;
+      color: #1a6b40;
+    }
+    body.scope-ib .active-filter .remove:hover { background: #a8e0c0; }
+    body.scope-ib .card h2::before {
+      background: linear-gradient(180deg, #27a362, #1a7a47);
+    }
+    body.scope-ib .vtt-link.mont,
+    body.scope-ib .vib-link.mont {
+      background: linear-gradient(135deg, #1a7a47, #27a362);
+    }
+    body.scope-ib .vib-logo-text { color: #27a362; }
+    body.scope-ib .vendor-info-bar {
+      background: linear-gradient(135deg, #edfaf3 0%, #d8f5e7 100%);
+      border-color: #b3e8cc;
+    }
+
     .wrap {
       width: min(1400px, calc(100% - 32px));
       margin: 18px auto 28px;
@@ -267,6 +313,11 @@
       padding-right: 4px;
     }
 
+    @keyframes chipIn {
+      from { opacity: 0; transform: translateY(6px) scale(.96); }
+      to   { opacity: 1; transform: translateY(0)   scale(1); }
+    }
+
     .chip {
       border: 1px solid #ccdbf7;
       border-radius: 999px;
@@ -276,7 +327,8 @@
       font-size: 13px;
       cursor: pointer;
       user-select: none;
-      transition: .18s ease;
+      transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease, opacity .18s ease;
+      animation: chipIn .22s ease both;
     }
 
     .chip:hover {

static/js/index.js

@@ -199,10 +199,13 @@
     const categoryQ = normalize(state.categorySearch);
 
     el.vendorList.innerHTML = "";
+    let vi = 0;
     for (const vendor of state.data.vendors) {
       if (vendorQ && !normalize(vendor.name).includes(vendorQ)) continue;
       const node = document.createElement("button");
       node.className = "chip";
+      node.style.animationDelay = Math.min(vi * 16, 320) + 'ms';
+      vi++;
       if (state.selectedVendors.has(vendor.id)) node.classList.add("active");
       else if (!allowedVendors.has(vendor.id)) node.classList.add("dim");
       node.textContent = vendor.name;
@@ -229,11 +232,14 @@
 
     el.categoryList.innerHTML = "";
     const showOnlyLinkedCategories = state.selectedVendors.size > 0;
+    let ci = 0;
     for (const category of state.data.categories) {
       if (categoryQ && !normalize(category.name).includes(categoryQ)) continue;
       if (showOnlyLinkedCategories && !allowedCategories.has(category.id) && !state.selectedCategories.has(category.id)) continue;
       const node = document.createElement("button");
       node.className = "chip";
+      node.style.animationDelay = Math.min(ci * 14, 280) + 'ms';
+      ci++;
       if (state.selectedCategories.has(category.id)) node.classList.add("active");
       else if (!allowedCategories.has(category.id)) node.classList.add("dim");
       node.textContent = category.name;