.project-card {
  animation: fadeUp 0.5s ease both;

  &__link {
    display: block;
    height: 100%;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border);
    transition: border-color 0.2s, transform 0.25s, box-shadow 0.25s;

    &:hover {
      border-color: var(--border-strong);
      transform: translateY(-3px);
      box-shadow: var(--shadow);

      .project-card__media img {
        transform: scale(1.04);
      }
    }
  }

  &__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #0e0e10;

    &.is-loading::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(
        110deg,
        #141416 0%,
        #1c1c20 40%,
        #141416 60%,
        #0e0e10 100%
      );
      background-size: 200% 100%;
      animation: project-card-shimmer 1.25s ease-in-out infinite;
      z-index: 0;
    }

    img {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 100%;
      object-fit: cover;
      // Stay slightly visible under shimmer so cards never look "broken"
      opacity: 0.12;
      transition: transform 0.55s ease, opacity 0.35s ease;

      &.is-loaded {
        opacity: 1;
      }
    }
  }

  &__placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    font-family: var(--font-serif);
    font-size: 3rem;
    color: var(--text-dim);
    background: linear-gradient(145deg, #141416, #0c0c0e);
  }

  &__featured {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
  }

  &__body {
    padding: 1.1rem 1.15rem 1.25rem;

    h3 {
      margin: 0 0 0.35rem;
      font-size: 1.05rem;
    }

    p {
      margin: 0;
      font-size: 0.88rem;
      color: var(--text-muted);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
  }

  &__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
  }

  &__year {
    color: var(--text-dim);
    margin-left: auto;
  }
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.35rem;
}

@keyframes project-card-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}