/* ── ALL-PROJECTS LISTING PAGE ─────────────────────────
   Standalone scrolling page (no 3D camera). Layout: full-width
   container with a glass panel that holds the section header,
   filter pills, and the 3-column responsive project grid. */

html, body {
  width: 100%; min-height: 100%;
  background: var(--bg);
  font-family: var(--ff-body); color: var(--ink);
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.4s;
}
body { overflow-x: hidden; }

/* Static dot-grid background — simpler than the cursor-reactive
   canvas on the main page; reads as the same visual texture. */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: radial-gradient(circle, var(--dot) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}

.page-shell {
  position: relative; z-index: 2;
  min-height: 100vh;
  padding: 96px 36px 80px;
  display: flex; flex-direction: column; align-items: center;
}

/* Override the shared glass panel: this page has no 3D layer
   issues, so panel content needs full pointer interactivity. */
.glass-panel { pointer-events: auto; }

.page-shell .glass-panel {
  width: 1180px; max-width: 100%;
}

.section-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.14em;
  color: var(--ink2); text-transform: uppercase; text-decoration: none;
  margin-bottom: 28px;
  transition: color 0.15s, transform 0.2s;
}
.section-back:hover { color: var(--ink); }
.section-back .arrow { transition: transform 0.2s; }
.section-back:hover .arrow { transform: translateX(-3px); }

/* Filter pills sit between the section header and the grid */
.filter-row {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 32px;
}
.filter-pill {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.12em;
  color: var(--ink2); background: transparent;
  border: 1px solid var(--panel-line);
  padding: 7px 14px; border-radius: 100px;
  text-transform: uppercase; cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.filter-pill:hover { color: var(--ink); border-color: var(--ink2); }
.filter-pill[aria-pressed="true"] {
  color: var(--bg); background: var(--ink); border-color: var(--ink);
}

/* 3-column grid on desktop */
.all-projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.all-projects-grid .project-card {
  flex: none; max-width: none; position: relative;
}
.all-projects-grid .project-cover { height: 200px; }

/* "Featured" badge on the cover */
.featured-badge {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  font-family: var(--ff-mono); font-size: 8px; letter-spacing: 0.18em;
  color: rgba(255,255,255,0.95); text-transform: uppercase;
  padding: 4px 9px; border-radius: 100px;
  background: rgba(0,0,0,0.32);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.all-projects-grid .project-card.is-leaving {
  transform: scale(0.96);
  opacity: 0.55;
  transition: transform 0.32s cubic-bezier(0.4,0,0.2,1), opacity 0.32s ease;
}

/* Empty state when filter matches nothing */
.empty-state {
  grid-column: 1 / -1;
  padding: 60px 0;
  text-align: center;
  font-family: var(--ff-body); color: var(--ink2);
}

/* Footer note below the grid */
.page-footer {
  margin-top: 48px; padding-top: 24px;
  border-top: 1px solid var(--panel-line);
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px;
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.12em;
  color: var(--ink2); text-transform: uppercase;
}
.page-footer a { color: inherit; text-decoration: none; transition: color 0.15s; }
.page-footer a:hover { color: var(--ink); }

@media (max-width: 980px) {
  .all-projects-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .page-shell { padding: 72px 18px 56px; }
  .all-projects-grid { grid-template-columns: 1fr; }
  .all-projects-grid .project-cover { height: 170px; }
}

/* Theme toggle in the corner */
.theme-toggle {
  position: fixed; top: 22px; left: 36px; z-index: 1000;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  padding: 9px 14px; border-radius: 100px; cursor: pointer;
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.14em;
  color: var(--ink2); text-transform: uppercase; line-height: 1;
  backdrop-filter: blur(40px) saturate(1.4) brightness(1.05);
  -webkit-backdrop-filter: blur(40px) saturate(1.4) brightness(1.05);
  box-shadow: var(--glass-shadow);
  transition: border-color 0.2s, color 0.2s, background 0.4s;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ink2); }

@media (max-width: 600px) {
  .theme-toggle { top: 16px; left: 18px; }
}