/* 
 * ChatBiz - Lazy Loading CSS
 * Styling for lazy-loaded images with placeholder and loading effects
 */

/* Base styling for lazy images */
img.lazy {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  min-height: 1px;
  min-width: 1px;
}

/* When image is loaded */
img:not(.lazy) {
  opacity: 1;
}

/* Placeholder styling */
.img-placeholder {
  background-color: #f0f0f0;
  position: relative;
  overflow: hidden;
}

/* Loading animation */
.img-placeholder::before {
  content: "";
  display: block;
  position: absolute;
  left: -150px;
  top: 0;
  height: 100%;
  width: 150px;
  background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.8) 50%, transparent 100%);
  animation: loading-shimmer 1.5s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
}

@keyframes loading-shimmer {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(100% + 150px));
  }
}

/* Maintain aspect ratio for images */
.img-ratio {
  position: relative;
  overflow: hidden;
}

.img-ratio::before {
  content: "";
  display: block;
  padding-top: 56.25%; /* Default 16:9 aspect ratio */
}

.img-ratio img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Common aspect ratios */
.img-ratio-1x1::before {
  padding-top: 100%; /* 1:1 */
}

.img-ratio-4x3::before {
  padding-top: 75%; /* 4:3 */
}

.img-ratio-16x9::before {
  padding-top: 56.25%; /* 16:9 */
}

.img-ratio-21x9::before {
  padding-top: 42.85%; /* 21:9 */
}

/* Blur-up technique for progressive loading */
.blur-up {
  filter: blur(5px);
  transition: filter 0.3s ease-in-out;
}

.blur-up.lazyloaded {
  filter: blur(0);
}