/* ═══════════════════════════════════════════
   04 — PROJECTS
═══════════════════════════════════════════ */
#projects {
  padding:120px 72px;
  border-top:1px solid var(--border);
}
.projects-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:48px; }
.filter-row { display:flex; gap:8px; }
.filter-btn {
  font-family:'DM Mono',monospace; font-size:10px; letter-spacing:2px;
  text-transform:uppercase; padding:8px 18px;
  border:1px solid var(--border); color:var(--muted);
  background:transparent; cursor:none; border-radius:2px;
  transition:all .2s;
}
.filter-btn.active { color:var(--amber); border-color:var(--amber-dim); background:var(--amber-glow); }
.filter-btn:hover:not(.active) { color:var(--text); border-color:var(--muted2); }

.projects-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border); margin-bottom:1px; }
.project-card {
  background:var(--bg); overflow:hidden;
  transition:background .2s;
  cursor:none;
  position:relative;
}
.project-card.flip-animate {
  transition:transform .45s cubic-bezier(.4,0,.2,1), opacity .35s ease;
}
.project-card.filter-fade-out {
  opacity:0;
  transform:scale(.9);
  position:absolute;
  pointer-events:none;
}
.project-card.filter-fade-in {
  opacity:0;
  transform:scale(.9);
}
.project-card.filter-hidden {
  display:none;
}
.project-card:hover { background:var(--bg2); }
.project-card:hover .proj-thumb-overlay { opacity:1; }
.proj-thumb {
  height:200px; background:var(--bg2); position:relative; overflow:hidden;
  border-bottom:1px solid var(--border);
}
.proj-thumb-bg {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
}
.proj-thumb-num {
  font-family:'Bebas Neue',sans-serif; font-size:80px; color:transparent;
  -webkit-text-stroke:1px rgba(var(--amber-rgb),.08); letter-spacing:4px;
}
.proj-thumb-overlay {
  position:absolute; inset:0; background:rgba(var(--amber-rgb),.06);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .2s;
}
.proj-thumb-overlay span {
  font-family:'DM Mono',monospace; font-size:10px; letter-spacing:3px;
  color:var(--amber); text-transform:uppercase;
  border:1px solid var(--amber-dim); padding:8px 16px;
}
/* Rich thumbnail gradient compositions */
.proj-thumb[data-n="1"] { background:linear-gradient(135deg,#0c0c0a 0%,color-mix(in srgb, var(--amber) 8%, #0c0c0a) 40%,color-mix(in srgb, var(--amber) 12%, #0c0c0a) 100%); }
.proj-thumb[data-n="1"] .proj-thumb-bg::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 80% at 70% 40%, rgba(var(--amber-rgb),.18) 0%, transparent 65%);
}
.proj-thumb[data-n="2"] { background:linear-gradient(135deg,#0a0c0c 0%,#081418 40%,#0a1c20 100%); }
.proj-thumb[data-n="2"] .proj-thumb-bg::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 50% 70% at 30% 60%, rgba(100,200,220,.12) 0%, transparent 65%);
}
.proj-thumb[data-n="3"] { background:linear-gradient(135deg,#0c0a0a 0%,#180c08 40%,#201008 100%); }
.proj-thumb[data-n="3"] .proj-thumb-bg::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 55% 75% at 60% 50%, rgba(192,69,26,.15) 0%, transparent 65%);
}
.proj-thumb[data-n="4"] { background:linear-gradient(135deg,#0a0a0c 0%,#0e0c18 40%,#141020 100%); }
.proj-thumb[data-n="4"] .proj-thumb-bg::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 50% 70% at 50% 40%, rgba(155,93,229,.1) 0%, transparent 65%);
}
/* grid pattern overlay on all thumbs */
.proj-thumb .proj-thumb-bg::before {
  content:''; position:absolute; inset:0;
  background-image:linear-gradient(rgba(var(--amber-rgb),.04) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--amber-rgb),.04) 1px,transparent 1px);
  background-size:32px 32px;
}
.proj-body { padding:22px 24px; }
.proj-tags { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.proj-tag {
  font-family:'DM Mono',monospace; font-size:9px; letter-spacing:1px;
  color:var(--amber); border:1px solid var(--amber-dim);
  padding:3px 8px; text-transform:uppercase;
  background:var(--amber-glow);
}
.proj-name { font-family:'Bebas Neue',sans-serif; font-size:26px; letter-spacing:1px; margin-bottom:8px; }
.proj-desc { font-family:'DM Mono',monospace; font-size:11px; color:var(--muted); line-height:1.7; margin-bottom:16px; letter-spacing:.3px; }
.proj-links { display:flex; gap:10px; }
.proj-link {
  font-family:'DM Mono',monospace; font-size:10px; letter-spacing:2px; text-transform:uppercase;
  color:var(--muted); text-decoration:none; padding:6px 14px; border:1px solid var(--border);
  transition:border-color .2s,color .2s;
}
.proj-link:hover { border-color:var(--amber-dim); color:var(--amber); }
/* featured big project */
.project-card.featured {
  grid-column:span 2;
}
.project-card.featured .proj-thumb { height:280px; }
.project-card.featured .proj-name { font-size:36px; }

.view-all-row {
  background:var(--bg2); border:1px solid var(--border); border-top:none;
  padding:18px 24px; display:flex; align-items:center; justify-content:space-between;
}
.view-all-row span { font-family:'DM Mono',monospace; font-size:10px; color:var(--muted); letter-spacing:2px; text-transform:uppercase; }
.view-all-link {
  font-family:'DM Mono',monospace; font-size:10px; letter-spacing:2px; text-transform:uppercase;
  color:var(--amber); text-decoration:none;
  display:flex; align-items:center; gap:8px;
  transition:gap .2s;
}
.view-all-link:hover { gap:14px; }