.skeleton-card,
.skeleton-line {
  position: relative;
  overflow: hidden;
  background: var(--surface-container-highest);
}

.skeleton-card::after,
.skeleton-line::after,
.project-card__media.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(192, 193, 255, 0.08) 45%,
    rgba(192, 193, 255, 0.16) 50%,
    rgba(192, 193, 255, 0.08) 55%,
    transparent 100%
  );
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

.skeleton-card {
  aspect-ratio: 4 / 3;
  min-height: 180px;
}

.project-card__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--surface-container-highest);
  transform: translateZ(0);
}

@keyframes skeleton-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton-card::after,
  .skeleton-line::after,
  .project-card__media.is-loading::after {
    animation: none;
  }
}