/* =============================================================================
   LAZY LOADING OPTIMIZATION - Buske.ai
   Melhora UX durante carregamento de imagens dos anúncios
   ============================================================================= */

/* ===== SKELETON PLACEHOLDERS ===== */
.anuncio-card-imagem-principal,
.thumbnail-item img,
.lightbox-thumbnail-item img {
  /* Background placeholder gradiente suave */
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;

  /* Animação skeleton (sutil) */
  animation: skeleton-loading 1.5s ease-in-out infinite;

  /* Transição suave quando carrega */
  transition: opacity 0.3s ease, transform 0.2s ease;
}

/* ===== KEYFRAMES SKELETON ===== */
@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ===== OTIMIZAÇÃO PRIMEIRO CARD ===== */
.anuncio-card:first-child .anuncio-card-imagem-principal {
  /* Primeiro card: sem skeleton, carrega imediatamente */
  animation: none;
  background: #f8f8f8;
}

/* ===== ESTADO LOADED ===== */
.anuncio-card-imagem-principal.loaded,
.thumbnail-item img.loaded,
.lightbox-thumbnail-item img.loaded {
  /* Para skeleton e mostra imagem */
  animation: none;
  background: transparent;
  opacity: 1;
  transform: scale(1);
}

/* ===== OTIMIZAÇÃO MOBILE ===== */
@media (max-width: 768px) {
  .anuncio-card-imagem-principal {
    /* Mobile: skeleton mais discreto */
    animation-duration: 2s;
  }

  /* Reduce motion para usuarios que preferirem */
  @media (prefers-reduced-motion: reduce) {
    .anuncio-card-imagem-principal,
    .thumbnail-item img,
    .lightbox-thumbnail-item img {
      animation: none;
    }
  }
}

/* ===== PLACEHOLDER ERROR ===== */
.anuncio-card-imagem-principal[src*="no-image"],
.anuncio-card-imagem-principal[src*="erro"],
.anuncio-card-imagem-principal[src*="placeholder"] {
  /* Estado de erro: sem skeleton */
  animation: none;
  background: #f5f5f5;
  opacity: 0.8;
}

/* ===== HOVER STATES ===== */
.anuncio-card:hover .anuncio-card-imagem-principal {
  transform: scale(1.02);
}

/* ===== LAZY LOADING INDICATORS ===== */
.anuncio-card-imagem-principal[loading="lazy"] {
  /* Indicador visual discreto para lazy loading */
  position: relative;
}

.anuncio-card-imagem-principal[loading="eager"] {
  /* Primeiro card: carregamento prioritário */
  animation: none;
  background: #fafafa;
}

/* ===== INTERSECTION OBSERVER SUPPORT ===== */
.anuncio-card.in-viewport .anuncio-card-imagem-principal {
  /* Quando entra no viewport, acelera skeleton */
  animation-duration: 1s;
}

/* ===== PERFORMANCE OPTIMIZATION ===== */
.anuncio-card-imagem-principal,
.thumbnail-item img,
.lightbox-thumbnail-item img {
  /* GPU acceleration para melhor performance */
  will-change: opacity, transform;
  transform: translateZ(0);
}

/* ===== DARK MODE SUPPORT ===== */
@media (prefers-color-scheme: dark) {
  .anuncio-card-imagem-principal,
  .thumbnail-item img,
  .lightbox-thumbnail-item img {
    background: linear-gradient(90deg, #2a2a2a 25%, #1a1a1a 50%, #2a2a2a 75%);
  }

  .anuncio-card-imagem-principal[loading="eager"] {
    background: #222;
  }
}