(function(){
'use strict';

const qs  = (s, ctx) => (ctx||document).querySelector(s);
const qsa = (s, ctx) => [...(ctx||document).querySelectorAll(s)];

/* ── Portfolio Filter */
const filterBtns = qsa('.port-filter-btn');
const portItems  = qsa('.port-item[data-category]');
const gridTotal  = qs('#gridTotal');

filterBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    const filter = btn.dataset.filter;

    filterBtns.forEach(b => b.classList.remove('active'));
    btn.classList.add('active');

    let visCount = 0;
    portItems.forEach(item => {
      const match = filter === 'all' || item.dataset.category === filter;
      if (match) {
        item.classList.remove('hidden');
        item.style.opacity = '0';
        item.style.transform = 'translateY(20px)';
        requestAnimationFrame(() => {
          item.style.transition = 'opacity .4s ease, transform .4s ease';
          item.style.opacity = '1';
          item.style.transform = 'translateY(0)';
        });
        visCount++;
      } else {
        item.classList.add('hidden');
      }
    });

    if (gridTotal) {
      gridTotal.textContent = `Showing ${visCount} project${visCount !== 1 ? 's' : ''}`;
    }
  });
});

})();
