/**
 * LazySizes - Skeleton/Shimmer Effect
 * Modern loading like YouTube & Facebook
 * Faster transitions for large images (600px+)
 */

/* ========================================
   ACTIVE: Skeleton/Shimmer Effect
   ======================================== */

/* Skeleton placeholder for lazy images */
img.lazy:not(.loaded) {
  background: linear-gradient(
    90deg,
    #ededed,
    #ededed,
    #fff,
    #ededed,
    #ededed,
    #ededed,
    #fff,
    #ededed,
    #ededed
  );
  background-size: 200% 100%;
  background-origin: border-box;
  background-clip: padding-box;
  animation: shimmer 1s linear infinite;
  min-height: 150px;
  opacity: 1;
  overflow: hidden;
}

/* SVG images - smaller shimmer, hide content until loaded */
img.lazy:not(.loaded)[src*=".svg"],
img.lazy:not(.loaded)[data-src*=".svg"] {
  min-height: 50px;
  animation: shimmer 1.5s ease-in-out infinite;
  visibility: hidden;
  position: relative;
}

/* Show shimmer background for SVG */
img.lazy:not(.loaded)[src*=".svg"]::after,
img.lazy:not(.loaded)[data-src*=".svg"]::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  animation: inherit;
  visibility: visible;
}

/* Show SVG when loaded */
img.lazy.loaded[src*=".svg"],
img.lazy.loaded[data-src*=".svg"] {
  visibility: visible;
  animation: fadeIn 0.3s ease-out;
}

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

/* Loading state */
img.lazy.loading {
  opacity: 0.7;
  transition: opacity 0.3s ease-out;
}

/* Loaded state - fade in */
img.lazy.loaded {
  opacity: 1;
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Large images (600px+) - faster transition */
img.lazy.lazy-large.loading {
  transition: opacity 0.2s ease-out;
}

img.lazy.lazy-large.loaded {
  animation: fadeIn 0.2s ease-out;
}


/* ========================================
   DISABLED: Blur-up Effect (Old)
   Uncomment to use blur instead of shimmer
   ======================================== */

/*
img.lazy:not(.loaded) {
  filter: blur(5px);
  transform: scale(1.05);
}

img.lazy.loading {
  filter: blur(5px);
  transform: scale(1.05);
  transition: filter 0.05s ease-out, transform 0.05s ease-out;
}

img.lazy.loaded {
  filter: blur(0);
  transform: scale(1);
  transition: filter 0.05s ease-out, transform 0.05s ease-out;
}

img.lazy.lazy-large.loading {
  transition: filter 0.03s ease-out, transform 0.03s ease-out;
}

img.lazy.lazy-large.loaded {
  transition: filter 0.03s ease-out, transform 0.03s ease-out;
}
*/

/* Cached images - instant display */
img.lazy.ls-is-cached {
  filter: none !important;
  transform: none !important;
  transition: none !important;
}

/* Gallery images work normally with blur-up */

/* Mobile optimization */
@media (max-width: 768px) {
  img.lazy:not(.loaded) {
    animation: shimmer 1.5s ease-in-out infinite;
    min-height: 120px;
  }
  
  img.lazy:not(.loaded)[src*=".svg"],
  img.lazy:not(.loaded)[data-src*=".svg"] {
    min-height: 40px;
    visibility: hidden;
  }
  
  img.lazy:not(.loaded)[src*=".svg"]::after,
  img.lazy:not(.loaded)[data-src*=".svg"]::after {
    visibility: visible;
  }
  
  img.lazy.loaded[src*=".svg"],
  img.lazy.loaded[data-src*=".svg"] {
    visibility: visible;
    animation: fadeIn 0.2s ease-out;
  }
  
  img.lazy.loading {
    transition: opacity 0.2s ease-out;
  }
  
  img.lazy.loaded {
    animation: fadeIn 0.2s ease-out;
  }
  
  img.lazy.lazy-large.loaded {
    animation: fadeIn 0.15s ease-out;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  img.lazy:not(.loaded) {
    background: linear-gradient(
      90deg,
      #2a2a2a 0%,
      #333333 25%,
      #3a3a3a 50%,
      #333333 75%,
      #2a2a2a 100%
    );
  }
}