.media-shimmer {
  position: relative;
  display: block;
  overflow: hidden;
  background: color-mix(in srgb, var(--text-muted, #888) 14%, transparent);
  line-height: 0;
}

.media-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--text-primary, #fff) 8%, transparent) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: media-shimmer-slide 1.45s ease-in-out infinite;
  pointer-events: none;
}

.media-shimmer.is-loaded::after {
  display: none;
}

.media-shimmer.is-fallback:not(:has(img)):not(:has(video)) {
  min-height: 48px;
  min-width: 48px;
}

.media-shimmer.is-fallback:not(:has(img)):not(:has(video))::after {
  display: block;
}

.media-shimmer > img,
.media-shimmer > video {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.media-shimmer.is-loaded > img,
.media-shimmer.is-loaded > video {
  opacity: 1;
}

.media-shimmer.is-fallback {
  background: color-mix(in srgb, var(--text-muted, #888) 10%, transparent);
}

.media-shimmer.is-fallback::after {
  display: none;
}

.gallery-card__logo.media-shimmer,
.app-page-hero__logo.media-shimmer,
.home-hero__brand-icon.media-shimmer,
.preview-dialog__logo.media-shimmer {
  border-radius: 12px;
}

.gallery-card__logo.media-shimmer > img,
.app-page-hero__logo.media-shimmer > img,
.home-hero__brand-icon.media-shimmer > img,
.preview-dialog__logo.media-shimmer > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.company-icon__img--deferred {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.media-shimmer.is-loaded > .company-icon__img--deferred {
  opacity: 1;
}

.catalog-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  padding: 8px 0 32px;
}

.catalog-skeleton-card {
  border-radius: var(--radius-card, 16px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--text-muted, #888) 16%, transparent);
}

.catalog-skeleton-card__preview {
  aspect-ratio: 16 / 11;
}

.catalog-skeleton-card__meta {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px 16px 16px;
}

.catalog-skeleton-card__logo {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  flex-shrink: 0;
}

.catalog-skeleton-card__lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.catalog-skeleton-card__line {
  height: 12px;
  border-radius: 999px;
}

.catalog-skeleton-card__line--short {
  width: 55%;
}

@keyframes media-shimmer-slide {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .media-shimmer::after {
    animation: none;
  }
}