.project {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-soft);
}

/* IMAGE */
.project img {
  height: 520px;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.1);
  transition: transform 0.7s ease, filter 0.7s ease;
}

/* DARK SHADE */
.project::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.95),
    rgba(0,0,0,0.2)
  );
  opacity: 0.9;
}

/* CONTENT */
.project-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1.2rem;
}

/* TITLE */
.project-content h3 {
  font-size: 2rem;
  letter-spacing: 0.08em;
}

/* DESC */
.project-content p {
  color: var(--muted);
  max-width: 360px;
  font-size: 0.95rem;
}

/* ACTIONS */
.project-actions {
  display: flex;
  gap: 2rem;
}

.project-actions a {
  position: relative;
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  padding-bottom: 6px;
}

/* underline animation */
.project-actions a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 1px;
  background: var(--accent);
  transition: width 0.4s ease;
}

/* HOVER MAGIC */
.project:hover img {
  transform: scale(1.08);
  filter: grayscale(0%);
}

.project:hover .project-actions a::after {
  width: 100%;
}