/**
 * Article image lazy-loading states.
 *
 * Intrinsic width/height emitted during the Hexo build reserves exact space for
 * local images. Dimensionless remote images still need a fallback block, but
 * only placeholders close to the viewport animate.
 */
/*
 * `width` and `height` attributes emitted during the build reserve layout
 * space. `max-width` alone constrains only the rendered width; explicitly
 * restoring auto height keeps the rendered image on that intrinsic ratio.
 */
#article-container img {
  max-width: 100%;
  height: auto;
}

#article-container img.lazy-placeholder {
  background: linear-gradient(110deg, rgba(147, 112, 219, 0.12), rgba(138, 43, 226, 0.2), rgba(147, 112, 219, 0.12));
  background-size: 200% 100%;
  border-radius: 8px;
}

#article-container img.lazy-placeholder:not([width]):not([height]) {
  width: 100%;
  min-height: 160px;
}

#article-container img.lazy-placeholder-active {
  animation: article-lazy-shimmer 1.8s ease-in-out infinite;
}

#article-container img.lazy-loading {
  opacity: 0.72;
  transition: opacity 180ms ease-out;
}

#article-container img.lazy-loaded {
  opacity: 1;
  transition: opacity 300ms ease-out;
}

#article-container img.lazy-error:not([width]):not([height]) {
  min-height: 100px;
  border: 1px dashed rgba(255, 0, 0, 0.35);
  background: rgba(255, 0, 0, 0.08);
}

@keyframes article-lazy-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

[data-theme='dark'] #article-container img.lazy-placeholder {
  background: linear-gradient(110deg, rgba(75, 0, 130, 0.22), rgba(138, 43, 226, 0.3), rgba(75, 0, 130, 0.22));
}

@media (max-width: 768px), (prefers-reduced-motion: reduce) {
  #article-container img.lazy-placeholder-active {
    animation: none;
  }

  #article-container img.lazy-loading,
  #article-container img.lazy-loaded {
    transition: none;
  }
}