/* ============================================================
   Lazy Loading States
   Applied by js/utils/lazy-loader.js during image loading.
   ============================================================ */

/* Placeholder background while image is pending or loading */
[data-lazy-src] {
  background-color: var(--color-gray-100);
  display: block;
}

/* Fade-in during active load */
.lazy-loading {
  opacity: 0.4;
  transition: opacity 0.15s ease;
}

/* Reveal on successful load */
.lazy-loaded {
  opacity: 1;
  animation: lazyFadeIn 0.35s ease forwards;
}

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

/* Error state — subtle indicator, never hides the broken image slot */
.lazy-error {
  opacity: 1;
  background-color: var(--color-gray-100);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpolyline points='21 15 16 10 5 21'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40px 40px;
  min-height: 80px;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .lazy-loaded {
    animation: none;
    opacity: 1;
  }
}