/* =========================================================
   Ya Madhir's Marketing | portfolio.css
   ========================================================= */

/* ---------- Filters ---------- */
.filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.filter-btn{
  padding:11px 22px;
  border:1px solid var(--line-strong);
  border-radius:999px;
  background:transparent;
  color:var(--ember-4);
  font-family:var(--body);
  font-size:.875rem;
  font-weight:500;
  letter-spacing:.08em;
  line-height:1.2;
  cursor:pointer;
  transition:background .25s ease, box-shadow .25s ease, color .25s ease, border-color .25s ease;
}
.filter-btn:hover{
  background:rgba(122,15,15,.28);
  box-shadow:0 0 18px rgba(200,30,30,.35);
}
.filter-btn[aria-pressed="true"]{
  border-color:transparent;
  background:linear-gradient(180deg,var(--ember-4) 0%,var(--ember-3) 60%,var(--ember-2) 100%);
  color:#100000;
  font-weight:600;
  box-shadow:0 0 22px rgba(255,77,61,.4);
}

.result-count{
  margin:18px 0 clamp(28px,4vw,48px);
  color:var(--gold-dim);
  font-size:.9rem;
  letter-spacing:.06em;
}

/* ---------- Grid ---------- */
.work-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));
  gap:clamp(30px,3.4vw,52px) clamp(24px,3vw,44px);
}

/* reveal + filter share one element, so keep their timings together here */
.js .work-grid .tile{
  transition:opacity .4s ease, transform .4s ease;
}
.js .work-grid .tile.is-visible{ transition-delay:0s; }
.js .work-grid .tile.is-out{
  opacity:0;
  transform:scale(.96);
  transition-delay:0s;
}
.work-grid .tile[hidden]{ display:none; }
.work-grid .tile.is-in{ animation:tileIn .55s var(--ease); }

@keyframes tileIn{
  from{ opacity:0; transform:translateY(18px) scale(.98); }
  to{ opacity:1; transform:none; }
}

.work-empty{
  padding:48px 0;
  color:var(--bone-dim);
}