/**
 * Lazy Loading Styles
 *
 * Styles for lazy-loaded images with loading states and animations
 */

/* ===== Lazy Image States ===== */

/**
 * Lazy images before loading
 * Apply placeholder background and prepare for transition
 */
img.lazy {
  background-color: var(--color-bg-tertiary, #FFF8F0);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: filter 0.3s ease, opacity 0.3s ease;
}

/**
 * Lazy images while loading
 * Show blur effect if placeholder exists
 */
img.lazy-loading {
  opacity: 0.8;
  filter: blur(10px);
  animation: pulse 1.5s ease-in-out infinite;
}

/**
 * Lazy images after loading
 * Fade in smoothly and remove blur
 */
img.lazy-loaded {
  opacity: 1;
  filter: blur(0);
  animation: fadeIn 0.4s ease-in;
}

/**
 * Lazy images with load error
 * Show error state with muted colors
 */
img.lazy-error {
  background-color: #f5f5f5;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 24 24" fill="none" stroke="%23cccccc" stroke-width="1"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>');
  background-size: 50%;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.5;
}

/* ===== Animations ===== */

/**
 * Pulse animation for loading state
 */
@keyframes pulse {
  0%, 100% {
    opacity: 0.8;
  }
  50% {
    opacity: 0.6;
  }
}

/**
 * Fade in animation for loaded images
 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/**
 * Shimmer effect for loading placeholders
 */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

/**
 * Shimmer loading effect (alternative to pulse)
 */
img.lazy-loading.shimmer {
  animation: shimmer 2s infinite linear;
  background: linear-gradient(
    90deg,
    var(--color-bg-tertiary, #FFF8F0) 0%,
    var(--color-accent-pink, #FFE4E1) 50%,
    var(--color-bg-tertiary, #FFF8F0) 100%
  );
  background-size: 1000px 100%;
}

/* ===== Skeleton Loader ===== */

/**
 * Skeleton loader for image placeholders
 * Use when image dimensions are known
 */
.skeleton-image {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 50%,
    #f0f0f0 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}

/* ===== Progressive Image Loading ===== */

/**
 * Container for progressive images
 * Prevents layout shift during loading
 */
.progressive-image-container {
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg-tertiary, #FFF8F0);
}

.progressive-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.3s ease;
}

/**
 * Blur-up effect for progressive images
 * Thumbnail loads blurred, then sharpens when full image loads
 */
.progressive-image-container img.blur-up {
  filter: blur(20px);
  transform: scale(1.05); /* Slightly scale to hide blur edges */
}

.progressive-image-container img.blur-up.loaded {
  filter: blur(0);
  transform: scale(1);
}

/* ===== Accessibility ===== */

/**
 * Reduce motion for users who prefer it
 * Disable animations and transitions
 */
@media (prefers-reduced-motion: reduce) {
  img.lazy,
  img.lazy-loading,
  img.lazy-loaded {
    animation: none;
    transition: none;
  }

  .progressive-image-container img {
    transition: none;
  }
}

/* ===== High Contrast Mode ===== */

/**
 * Improve visibility in high contrast mode
 */
@media (prefers-contrast: high) {
  img.lazy-error {
    border: 2px solid currentColor;
  }

  img.lazy-loading {
    outline: 2px dashed currentColor;
  }
}

/* ===== Loading Spinner Overlay ===== */

/**
 * Optional loading spinner for images
 * Use with data-spinner attribute
 */
.image-with-spinner {
  position: relative;
}

.image-with-spinner::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-top-color: var(--color-wood-dark, #5D4E37);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  opacity: 0;
  transition: opacity 0.2s;
}

.image-with-spinner.loading::before {
  opacity: 1;
}

.image-with-spinner.loaded::before {
  opacity: 0;
}

/**
 * Spin animation for loading spinner
 */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ===== Performance Optimization ===== */

/**
 * Use GPU acceleration for animations
 */
img.lazy-loading,
img.lazy-loaded,
.progressive-image-container img {
  will-change: opacity, filter;
}

/**
 * Remove will-change after animation completes
 */
img.lazy-loaded.animation-complete {
  will-change: auto;
}