/* Skeleton loading styles */

.skeleton {
  background: linear-gradient(
    90deg,
    rgba(220, 210, 209, 0.4) 25%,
    rgba(230, 220, 219, 0.6) 50%,
    rgba(220, 210, 209, 0.4) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}

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

/* Skeleton for carousel */
.carousel-skeleton {
  width: 100vw;
  height: 100vh;
  position: relative;
}

/* Skeleton for gallery grid */
.gallery-skeleton {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  padding: 20px;
}

.gallery-skeleton-item {
  aspect-ratio: 4 / 3;
  border-radius: 8px;
}

/* Hide skeleton when content loads */
.skeleton-hidden {
  display: none;
}

/* Carousel loading state */
.carousel-image-wrapper.loading {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(
    90deg,
    rgba(220, 210, 209, 0.4) 25%,
    rgba(230, 220, 219, 0.6) 50%,
    rgba(220, 210, 209, 0.4) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.carousel-image-wrapper.loading img {
  opacity: 0;
  transition: opacity 0.3s ease-in;
}

.carousel-image-wrapper.loaded img {
  opacity: 1;
}