/* akong-lazy-image · Web 样式 · 用 var(--ak-*) 接 @akong/tokens */

.ak-lazy-image {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--ak-bg-subtle);
  border-radius: var(--ak-radius-md);
  /* shimmer 占位背景 · loading 时跑 · loaded/error 关 */
}

.ak-lazy-image--loading {
  background-image: linear-gradient(
    90deg,
    var(--ak-bg-subtle) 0%,
    var(--ak-bg-hover) 50%,
    var(--ak-bg-subtle) 100%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: ak-lazy-image-shimmer 1.4s ease-in-out infinite;
}

@keyframes ak-lazy-image-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.ak-lazy-image__img {
  display: block;
  width: 100%;
  height: 100%;
  /* fade-in · loading 时透明 · loaded 时 1 */
  opacity: 0;
  transition: opacity 0.25s ease-out;
}

.ak-lazy-image--loaded .ak-lazy-image__img {
  opacity: 1;
}

.ak-lazy-image__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ak-bg-subtle);
  color: var(--ak-fg-subtle);
}

.ak-lazy-image__broken {
  flex-shrink: 0;
}