/* Image Performance Optimization Styles */

/* Preload critical images */
.hero-logo {
  content-visibility: auto;
  contain-intrinsic-size: 200px 100px;
}

/* Gallery image optimizations */
.gallery-image {
  content-visibility: auto;
  contain-intrinsic-size: 400px 300px;
  object-fit: cover;
  object-position: center;
  transition: transform 0.3s ease;
  will-change: transform;
}

/* Lazy loading enhancement */
.gallery-image[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery-image[loading="lazy"].loaded {
  opacity: 1;
}

/* Progressive image loading */
.image-placeholder {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

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

/* Responsive image containers */
.responsive-image-container {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.responsive-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Intersection observer optimization */
.io-image {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.io-image.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Critical image optimizations */
img[loading="eager"] {
  contain: size layout style;
}

img[loading="lazy"] {
  contain: size layout;
  content-visibility: auto;
}

/* Modern image formats fallback */
picture {
  display: block;
  line-height: 0;
}

/* Performance hints */
.gallery-grid img {
  contain: size layout;
  content-visibility: auto;
  contain-intrinsic-size: 400px 300px;
}