/* 渐进式图片加载 - 从模糊到清晰 */
.tom-progressive-img {
  max-width: 100%;
  height: auto;
  transition: filter 0.6s ease-out, opacity 0.4s ease-out;
  will-change: filter, opacity;
}

/* 加载中状态 - 模糊效果 */
.tom-progressive-img.loading {
  filter: blur(20px);
  opacity: 0.8;
}

/* 加载完成状态 - 清晰 */
.tom-progressive-img.loaded {
  filter: blur(0);
  opacity: 1;
}

/* 图片容器 */
.tom-img-container {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

/* 加载占位符 */
.tom-img-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.4s ease-out;
  pointer-events: none;
  z-index: 1;
}

.tom-img-placeholder.hidden {
  opacity: 0;
}

.tom-img-container > img:not(.tom-img-placeholder) {
  position: relative;
  z-index: 2;
}

/* 加载动画 */
.tom-img-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top-color: #ffd700;
  border-radius: 50%;
  animation: tom-spin 0.8s linear infinite;
}

@keyframes tom-spin {
  to { transform: rotate(360deg); }
}

/* 视频渐进式加载 */
.tom-progressive-video {
  max-width: 100%;
  height: auto;
  transition: opacity 0.4s ease-out;
  will-change: opacity;
}

.tom-progressive-video.loading {
  opacity: 0.6;
}

.tom-progressive-video.loaded {
  opacity: 1;
}

/* 视频容器 */
.tom-video-container {
  position: relative;
  overflow: hidden;
  background: #000;
}

/* 视频占位符 - 显示第一帧 */
.tom-video-poster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.4s ease-out;
  pointer-events: none;
  z-index: 1;
}

.tom-video-poster.hidden {
  opacity: 0;
}

/* 兼容旧类名 */
.tom-img {
  max-width: 100%;
  height: auto;
  transition: filter 0.6s ease-out;
}

.tom-img.tom-img-blur {
  filter: blur(20px);
}

.tom-img.tom-img-ready {
  filter: blur(0);
}

.chat-image.tom-img,
.chat-image.tom-progressive-img {
  transition:
    transform 0.2s,
    border-color 0.2s,
    filter 0.6s ease-out;
}

.example-img.tom-img,
.example-img.tom-progressive-img {
  transition:
    transform 0.5s ease,
    filter 0.6s ease-out;
}

.gallery-item img.tom-img-blur,
.gallery-item img.loading {
  filter: blur(20px) brightness(0.9);
}

.gallery-item.loaded img.tom-img-ready,
.gallery-item img.loaded {
  filter: blur(0) brightness(1);
}

/* 响应式优化 */
@media (prefers-reduced-motion: reduce) {
  .tom-progressive-img,
  .tom-progressive-video,
  .tom-img {
    transition: none;
  }
  
  .tom-img-spinner {
    animation: none;
  }
}