/* ================================================== */
/* Lazy Load Image Optimization CSS */
/* Better loading experience for lazy-loaded images */
/* ================================================== */

/* Portfolio Images Optimization */
.d_demo_img img {
  /* Ensure proper aspect ratio to prevent layout shift */
  aspect-ratio: auto;
  /* Enable GPU acceleration for best performance */
  will-change: transform;
  /* Smooth fade-in transition for loaded images */
  transition: opacity 0.3s ease-in-out, filter 0.3s ease-in-out;
  /* Initial state for lazy-loaded images */
  opacity: 0.95;
}

/* Image has fully loaded */
.d_demo_img img[loading="lazy"]:complete,
.d_demo_img img:not([loading="lazy"]) {
  opacity: 1;
}

/* Blur effect while loading (LQIP - Low Quality Image Placeholder) */
.d_demo_img img[loading="lazy"] {
  filter: blur(0px);
  /* Native lazy loading gives better performance */
  content-visibility: auto;
}

/* Once the image is loaded, remove blur */
.d_demo_img img[loading="lazy"]:loaded {
  filter: blur(0px);
}

/* Optimize portfolio column images */
.d_demo_img {
  overflow: hidden;
  position: relative;
  /* Contain layout and paint */
  contain: layout style paint;
}

/* Image container optimization */
.d_demo_img img {
  max-width: 100%;
  height: auto;
  display: block;
  /* Prevent cumulative layout shift */
  line-height: 0;
}

/* Priority loading for critical images (first two rows - 8 items) */
.d_demo_img:nth-child(1) img,
.d_demo_img:nth-child(2) img,
.d_demo_img:nth-child(3) img,
.d_demo_img:nth-child(4) img,
.d_demo_img:nth-child(5) img,
.d_demo_img:nth-child(6) img,
.d_demo_img:nth-child(7) img,
.d_demo_img:nth-child(8) img {
  content-visibility: visible;
  contain: layout style paint;
}

/* Performance optimization: Use content-visibility for better paint performance */
@supports (content-visibility: auto) {
  .col-lg-3 img {
    content-visibility: auto;
  }
}

/* Reduce battery/CPU usage on mobile by limiting animations for lazy-loaded images */
@media (prefers-reduced-motion: reduce) {
  .d_demo_img img {
    transition: none;
  }
}

/* Optimize for slow connections */
@media (prefers-reduced-data: reduce) {
  .d_demo_img img {
    /* Images will load naturally without extra effects */
    filter: none;
  }
}

/* High-DPI screen optimization */
@media (min-resolution: 192dpi) {
  .d_demo_img img {
    /* Use CPU more efficiently on high DPI screens */
    image-rendering: -webkit-optimize-contrast;
  }
}

/* ================================================== */
/* Loading State Styles */
/* ================================================== */

/* Skeleton/placeholder effect while loading */
.d_demo_img {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.1) 25%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.1) 75%
  );
  background-size: 200% 100%;
}

/* Animate the skeleton effect */
@media (prefers-reduced-motion: no-preference) {
  .d_demo_img {
    animation: shimmer 2s infinite;
  }
  
  @keyframes shimmer {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }
}

/* Stop animation once image loads */
.d_demo_img img {
  background: transparent;
  animation: none;
}

/* ================================================== */
/* Performance Tips Applied */
/* ================================================== */
/* 
1. Native lazy loading (loading="lazy") - Most efficient
2. Async decode (decoding="async") - Prevents jank during decode
3. Fetch priority (fetchpriority="low") - Deprioritizes non-critical images
4. CSS contain - Improves paint performance by limiting repaints to children
5. Will-change - GPU acceleration for images
6. Content-visibility - Skips rendering of off-screen content
7. Aspect ratio - Prevents layout shift during load
*/