.projects-page {
  background-color: #1c2240;
  color: #c0e0ff;
}

.projects-home {
  width: min(1100px, 92%);
  margin: 0 auto;
  padding: 2.5rem 0 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  text-align: center;
}

.projects-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
}

.project-card {
  background: #1d3356;
  border: 4px solid #c0e0ff;
  padding: 1.6rem;
  display: grid;
  gap: 0.75rem;
  min-height: 200px;
  flex: 1 1 260px;
  max-width: 320px;
  position: relative;
  overflow: hidden;
  text-align: center;
  justify-items: center;
  box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.4);
  transition: color 0.3s ease, transform 0.3s ease;
}

.project-card>* {
  position: relative;
  z-index: 1;
}

.project-thumb {
  position: absolute;
  inset: 0;
  border: 0;
  background: #1c2240;
  display: grid;
  place-items: center;
  z-index: 0;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #c0e0ff;
  transition: opacity 0.3s ease;
}

.project-title {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.25rem;
  color: #ffffff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  z-index: 1;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.project-logo {
  transition: opacity 0.3s ease, filter 0.3s ease;
}

.project-logo-image {
  width: min(200px, 70%);
  height: auto;
  transition: opacity 0.3s ease, filter 0.3s ease;
}

.project-details {
  display: grid;
  gap: 0.5rem;
  opacity: 0;
  max-height: 0;
  transition: opacity 0.3s ease, max-height 0.3s ease;
  overflow: hidden;
}

.project-card:hover {
  color: #ffffff;
  transform: scale(1.05);
}

.project-card:hover .project-thumb,
.project-card:focus-visible .project-thumb,
.project-card:focus-within .project-thumb {
  opacity: 0.75;
}

.project-card:hover .project-title,
.project-card:focus-visible .project-title,
.project-card:focus-within .project-title {
  opacity: 1;
  transform: translateY(0);
}

.project-card:hover .project-logo,
.project-card:hover .project-logo-image,
.project-card:focus-visible .project-logo,
.project-card:focus-visible .project-logo-image,
.project-card:focus-within .project-logo,
.project-card:focus-within .project-logo-image {
  opacity: 0.35;
  filter: blur(2px);
}

.project-card:hover .project-details,
.project-card:focus-visible .project-details,
.project-card:focus-within .project-details {
  opacity: 1;
  max-height: 200px;
}

.project-card h2 {
  margin: 0;
}

.project-card p {
  margin: 0;
}

.project-details p {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.card-cta {
  display: inline-block;
  font-weight: 600;
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 0.3s ease 0.08s, transform 0.3s ease 0.08s;
}

.project-card:hover .project-details p,
.project-card:focus-visible .project-details p,
.project-card:focus-within .project-details p {
  opacity: 1;
  transform: translateY(0);
}

.project-card:hover .card-cta,
.project-card:focus-visible .card-cta,
.project-card:focus-within .card-cta {
  opacity: 1;
  transform: translateY(32px);
}

.project-card.placeholder {
  border-style: dashed;
  background: #1c2240;
  opacity: 0.85;
}

.project-card.placeholder .project-thumb {
  color: #c0e0ff;
}

.project-card.scytheful .project-thumb {
  background-image: url("/portfolio/projects/scytheful/images/bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.project-card.website .project-thumb {
  background-image: linear-gradient(rgba(12, 14, 26, 0.72), rgba(12, 14, 26, 0.72)),
    url("/portfolio/projects/misc/github-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.project-card.furry-funkers .project-thumb {
  background-image: linear-gradient(180deg, #1a0b52 0%, #2a0f66 45%, #1e082f 100%);
}

.project-card.redrift .project-thumb {
  background:
    radial-gradient(circle at center, rgba(140, 120, 255, 0.08), transparent 60%),
    linear-gradient(135deg, #151a2e 0%, #241b36 55%, #0d0f1b 100%);
}

.project-card.placeholder:hover {
  transform: none;
  color: #c0e0ff;
}

.github-mark {
  width: 60%;
  opacity: 0.5;
  fill: #c0e0ff;
}


@media (max-width: 768px) {
  .projects-home {
    padding: 2rem 0 3rem;
  }
}