/**
 * Lazy Loading Styles
 * Provides smooth transitions and visual feedback for lazy-loaded images
 */

/* Fade-in animation for lazy-loaded images */
@keyframes lazy-load-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Apply fade-in to images that have been loaded */
img[loading='lazy'].lazy-loaded {
  animation: lazy-load-fade-in 0.6s ease-in;
}

/* Smooth transition for all images during loading */
img[loading='lazy'] {
  transition: opacity 0.4s ease-in-out;
}

/* Placeholder background for images before they load */
img[loading='lazy']:not([src]) {
  background-color: #f0f0f0;
  opacity: 0.7;
}

/* Fine-tune specific image types */

/* Insurance card images */
.insurance-image-card img[loading='lazy'] {
  transition: opacity 0.5s ease-in-out;
}

/* Service cards */
.service-media-card img[loading='lazy'] {
  transition: opacity 0.5s ease-in-out;
}

/* Info cards */
.info-card img[loading='lazy'] {
  transition: opacity 0.5s ease-in-out;
}

/* Hero images (should load immediately but still get styling) */
.hero-image[loading='eager'],
.hero-image[loading='auto'] {
  transition: opacity 0.4s ease-in-out;
}

/* About page images */
.about-image[loading='lazy'],
.about-image[loading='auto'] {
  transition: opacity 0.4s ease-in-out;
}

/* Mission images */
.mission-image[loading='lazy'],
.mission-image[loading='auto'] {
  transition: opacity 0.4s ease-in-out;
}

/* News/article images */
.article-image[loading='lazy'],
.article-thumbnail[loading='lazy'] {
  transition: opacity 0.4s ease-in-out;
}

/* Responsive image loading hints */
@media (prefers-reduced-motion: reduce) {
  img[loading='lazy'],
  img[loading='lazy'].lazy-loaded {
    animation: none;
    transition: none;
  }
}

/* Performance optimization: Prevent layout shift with aspect-ratio */
img[loading='lazy'] {
  aspect-ratio: auto;
  max-width: 100%;
  height: auto;
  display: block;
}