/* Gallery Image Loading Optimizations */

/* Prevent layout shift with proper aspect ratio containers */
.gallery-image-container {
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-out;
  will-change: transform, box-shadow;
}

.gallery-image-container:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Smooth image loading with blur-to-sharp effect */
.gallery-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.3s ease-out, opacity 0.3s ease-out;
}

.gallery-image[data-loading="true"] {
  filter: blur(5px);
  opacity: 0.7;
}

.gallery-image[data-loading="false"] {
  filter: blur(0);
  opacity: 1;
}

/* Optimize hardware acceleration for smooth animations */
.gallery-item {
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Preload placeholder with skeleton effect */
.gallery-placeholder {
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 50%,
    #f0f0f0 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

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

/* Responsive optimizations */
@media (max-width: 640px) {
  .gallery-item {
    margin-bottom: 1rem;
  }
}

@media (max-width: 1024px) {
  .gallery-item {
    margin-bottom: 1.25rem;
  }
}

/* Critical performance optimizations */
.gallery-container {
  contain: layout style paint;
  transform: translateZ(0);
}

/* Reduce paint and layout thrashing */
.gallery-masonry-column {
  contain: layout;
  will-change: contents;
}

/* Optimize scroll performance */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* High contrast and accessibility improvements */
@media (prefers-contrast: high) {
  .gallery-image-container {
    border: 2px solid #000;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-item,
  .gallery-image,
  .gallery-image-container {
    transition: none;
    animation: none;
  }
  
  .gallery-placeholder {
    animation: none;
    background: #f0f0f0;
  }
}