/* Filters */
.projects-filters { margin-block-end: var(--spacing-xl); }

.tags {
  list-style: none;
  padding: 0;
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}
.tags button {
  padding: var(--spacing-xs) var(--spacing-md);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-weight: 600;
  font-size: var(--font-sm);
  cursor: pointer;
  transition: all var(--transition-base) ease;
  position: relative;
  overflow: hidden;
}
.tags button::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan));
  opacity: 0;
  transition: opacity var(--transition-base) ease;
}
.tags button:hover { color: white; border-color: transparent; transform: translateY(-2px); box-shadow: 0 4px 12px color-mix(in oklab, var(--accent-purple), transparent 80%); }
.tags button:hover::before { opacity: 1; }

/* List */
.projects-list { display: grid; gap: var(--spacing-xl); }

/* Card */
.project-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--spacing-lg);
  align-items: start;
  padding: var(--spacing-xl);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: all var(--transition-slow) ease;
}
.project-card::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: -100%;
  inline-size: 100%;
  block-size: 100%;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--accent-purple), transparent 85%), transparent);
  transition: inset-inline-start 0.8s ease;
  pointer-events: none;
}
.project-card:hover {
  transform: translateX(12px) translateY(-8px) perspective(1000px) rotateY(-2deg);
  border-color: var(--accent-purple);
  box-shadow:
    -8px 8px 32px color-mix(in oklab, var(--accent-purple), transparent 75%),
    0 0 80px color-mix(in oklab, var(--accent-purple), transparent 90%);
}
.project-card:hover::before { inset-inline-start: 100%; }

/* Per-project glow */
.project-card--marketplace::after,
.project-card--detection::after,
.project-card--trading::after {
  content: '';
  position: absolute;
  inset-block-end: -3rem;
  inset-inline-end: -3rem;
  inline-size: 12rem;
  block-size: 12rem;
  pointer-events: none;
  animation: glowPulse 4s ease-in-out infinite;
}
.project-card--marketplace::after { background: radial-gradient(circle, color-mix(in oklab, var(--accent-purple), transparent 80%) 0%, transparent 70%); animation-delay: 0s; }
.project-card--detection::after  { background: radial-gradient(circle, color-mix(in oklab, var(--accent-cyan), transparent 80%) 0%, transparent 70%); animation-delay: 1.5s; }
.project-card--trading::after    { background: radial-gradient(circle, color-mix(in oklab, var(--accent-pink), transparent 80%) 0%, transparent 70%); animation-delay: 3s; }

@keyframes glowPulse { 0%,100% { opacity: 0.4; transform: scale(1);} 50% { opacity: 0.7; transform: scale(1.2);} }

/* Badge */
.project-number {
  font-size: clamp(var(--font-3xl), 4vw, var(--font-4xl));
  font-weight: 900;
  inline-size: 5.5rem;
  block-size: 5.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in oklab, var(--accent-purple), transparent 85%);
  border: 3px solid var(--accent-purple);
  color: var(--accent-purple);
  transition: all var(--transition-slow) ease;
  flex-shrink: 0;
  position: relative;
}
.project-number::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan));
  opacity: 0;
  filter: blur(8px);
  transition: opacity var(--transition-base) ease;
  z-index: -1;
}
.project-card:hover .project-number { transform: scale(1.15) rotate(-8deg); background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan)); color: white; box-shadow: 0 8px 24px color-mix(in oklab, var(--accent-purple), transparent 70%); }
.project-card:hover .project-number::before { opacity: 0.6; }

/* Content */
.project-content { display: grid; gap: var(--spacing-md); }
.project-content h3 { margin: 0; font-size: clamp(var(--font-xl), 2vw, var(--font-2xl)); line-height: 1.3; }
.project-description { color: var(--muted); line-height: 1.8; font-size: var(--font-base); margin: 0; }

/* Meta */
.project-meta { display: grid; gap: var(--spacing-sm); margin-block-start: var(--spacing-md); }
.project-meta dt {
  font-weight: 700;
  color: var(--accent-purple);
  font-size: var(--font-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.project-meta dd { margin: 0; color: var(--muted); font-size: var(--font-sm); padding-inline-start: var(--spacing-md); border-inline-start: 2px solid var(--border); }

/* Result */
.project-result {
  margin-block-start: var(--spacing-md);
  padding: var(--spacing-md);
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--accent-cyan), transparent 88%) 0%,
    color-mix(in oklab, var(--accent-purple), transparent 90%) 100%);
  border: 1px solid color-mix(in oklab, var(--accent-cyan), transparent 70%);
  border-radius: var(--radius-sm);
}
.project-result p { margin: 0; font-size: var(--font-sm); }
.project-result p strong { color: var(--accent-cyan); font-weight: 700; }
.project-result:hover { border-color: var(--accent-cyan); box-shadow: 0 4px 16px color-mix(in oklab, var(--accent-cyan), transparent 80%); transform: scale(1.02); }

/* Case notes */
.case-notes { margin-block-start: var(--spacing-md); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.case-notes summary {
  padding: var(--spacing-md);
  background: color-mix(in oklab, var(--surface-elevated), transparent 50%);
  cursor: pointer;
  font-weight: 700;
  color: var(--accent-purple);
  transition: all var(--transition-base) ease;
  list-style: none;
}
.case-notes summary::-webkit-details-marker { display: none; }
.case-notes summary::before { content: '▸'; display: inline-block; margin-inline-end: var(--spacing-xs); transition: transform var(--transition-base) ease; }
.case-notes[open] summary::before { transform: rotate(90deg); }
.case-notes ul { padding: var(--spacing-md); margin: 0; background: var(--surface); }
.case-notes ul li { color: var(--muted); font-size: var(--font-sm); }

/* Spotlight */
.spotlight {
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--accent-purple), transparent 90%) 0%,
    color-mix(in oklab, var(--accent-cyan), transparent 92%) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--spacing-xl);
  margin-block: var(--spacing-xl);
}
.spotlight-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-xl); margin-block-start: var(--spacing-lg); }
.spotlight-figure img { inline-size: 100%; block-size: auto; border-radius: var(--radius-sm); border: 2px solid var(--border); box-shadow: 0 12px 40px color-mix(in oklab, var(--accent-purple), transparent 80%); transition: all var(--transition-base) ease; }
.spotlight-figure img:hover { transform: scale(1.05); box-shadow: 0 20px 60px color-mix(in oklab, var(--accent-purple), transparent 70%); }
.spotlight-figure figcaption { margin-block-start: var(--spacing-sm); text-align: center; font-size: var(--font-sm); color: var(--muted); }
.spotlight-notes h3 { font-size: var(--font-lg); margin-block-start: 0; margin-block-end: var(--spacing-sm); }
.spotlight-notes p, .spotlight-notes ul { color: var(--muted); font-size: var(--font-sm); }

/* Extras */
.extras { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--spacing-xl); }
.grid-cards { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--spacing-md); }
.grid-cards li { height: 100%; }
.grid-cards project-card { height: 100%; margin: 0; padding: var(--spacing-md); display: flex; flex-direction: column; gap: var(--spacing-xs); }
.grid-cards project-card strong { font-size: var(--font-base); color: var(--accent-purple); }
.grid-cards project-card p { margin: 0; color: var(--muted); font-size: var(--font-sm); flex-grow: 1; }

/* Entry animations */
.project-card:nth-child(1) { animation: slideInLeft 0.6s ease-out 0.1s both; }
.project-card:nth-child(2) { animation: slideInLeft 0.6s ease-out 0.2s both; }
.project-card:nth-child(3) { animation: slideInLeft 0.6s ease-out 0.3s both; }
@keyframes slideInLeft { from { opacity: 0; transform: translateX(-30px);} to { opacity: 1; transform: translateX(0);} }

/* Responsive */
@media (max-width: 820px) {
  .project-card { grid-template-columns: 1fr; padding: var(--spacing-lg); }
  .project-card:hover { transform: translateY(-8px) perspective(1000px) rotateY(0); }
  .project-number { inline-size: 4.5rem; block-size: 4.5rem; font-size: var(--font-2xl); justify-self: center; }
  .project-content h3 { text-align: center; }
  .spotlight-grid { grid-template-columns: 1fr; }
  .grid-cards { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

@media (max-width: 480px) {
  .projects-list { gap: var(--spacing-lg); }
  .project-card { padding: var(--spacing-md); gap: var(--spacing-md); }
  .project-number { inline-size: 3.5rem; block-size: 3.5rem; font-size: var(--font-xl); }
  .spotlight, .extras { padding: var(--spacing/md); }
  .grid-cards { grid-template-columns: 1fr; }
}