/* progressive_loading.css */

/* Blur-up Image Styles */
.lazy-load {
  transition:
    filter 0.5s ease-out,
    opacity 0.5s ease-in;
  will-change: filter, opacity;
}

.lazy-load.blur-up {
  filter: blur(10px); /* Adjust blur amount */
  transform: scale(1.02); /* Prevents white edges when blurring */
}

.lazy-load.loaded {
  filter: blur(0);
  transform: scale(1);
}

/* Skeleton Screens */
.skeleton {
  background-color: #f0f0f0;
  position: relative;
  overflow: hidden;
}

/* Shimmer Animation */
.skeleton::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.5),
    transparent
  );
  animation: shimmer 0s infinite;
}

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

/* Specific Skeleton Types */
.skeleton-text {
  height: 1em;
  border-radius: 4px;
  margin-bottom: 0.5em;
  width: 100%;
}

.skeleton-text.short {
  width: 50%;
}
.skeleton-text.title {
  height: 2em;
  margin-bottom: 1rem;
}

.skeleton-img {
  width: 100%;
  height: 100%;
  display: block;
  min-height: 200px; /* Default min-height for empty boxes */
}

/* Dark Mode Support (if app has it) */
[data-theme="dark"] .skeleton {
  background-color: #1f2937;
}
[data-theme="dark"] .skeleton::after {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.05),
    transparent
  );
}