/* ═══════════════════════════════════════
   VLADFX FILTER BAR — Tag-based filtering
   Research, Tutorials, KB pages.
   ═══════════════════════════════════════ */

.filter-bar{
  display:flex;gap:8px;flex-wrap:wrap;
  justify-content:center;margin-bottom:32px;
}

.filter-btn{
  padding:6px 16px;border-radius:100px;
  border:1px solid var(--border);background:var(--bg2);
  color:var(--dim);font-size:.82rem;font-weight:600;
  cursor:pointer;transition:all .2s var(--ease-spring);
  font-family:inherit;
}
.filter-btn:hover{border-color:rgba(244,64,65,.3);color:var(--text)}
.filter-btn.active{background:var(--brand);border-color:var(--brand);color:#fff}
.filter-btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* ── Card show/hide animation ── */
.card-item{
  transition:opacity .3s var(--ease-out-expo),
             transform .3s var(--ease-out-expo);
}
.card-item.hidden{
  opacity:0;transform:scale(.95);pointer-events:none;
  position:absolute;visibility:hidden;
}