/**
 * Lazy Loading Styles per FlexSlider
 * Progressive loading con placeholder e transizioni smooth
 */

/* Immagini lazy con placeholder */
.slider-image.lazy-load {
  background-color: #f0f0f0;
  background-image: linear-gradient(90deg, #f0f0f0 0%, #e0e0e0 20%, #f0f0f0 40%, #f0f0f0 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  min-height: 400px;
  opacity: 0.6;
  filter: blur(5px);
  transition: opacity 0.4s ease-in-out, filter 0.4s ease-in-out;
}

/* Animazione shimmer per placeholder */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

/* Thumbnail caricata (bassa risoluzione) */
.slider-image.thumb-loaded {
  opacity: 0.8;
  filter: blur(3px);
}

/* Immagine completamente caricata */
.slider-image.loaded {
  opacity: 1;
  filter: blur(0);
  animation: fadeInSharp 0.3s ease-in-out;
}

/* Animazione fade-in per immagini caricate */
@keyframes fadeInSharp {
  from {
    opacity: 0.8;
    filter: blur(2px);
  }

  to {
    opacity: 1;
    filter: blur(0);
  }
}

/* Errore caricamento */
.slider-image.load-error {
  background-color: #f8f8f8;
  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath fill="%23ccc" d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 64px 64px;
  opacity: 0.5;
}

/* Ottimizzazione performance: preload hint */
.slider-image[loading="eager"] {
  content-visibility: auto;
}

/* Responsive: adatta altezza minima su mobile */
@media (max-width: 768px) {
  .slider-image.lazy-load {
    min-height: 300px;
  }
}

@media (max-width: 480px) {
  .slider-image.lazy-load {
    min-height: 200px;
  }
}

/* Thumbnails carousel - sempre eager loading (sono piccole) */
#carousel .slides img {
  background-color: transparent;
  transition: opacity 0.2s ease;
}

#carousel .slides img:hover {
  opacity: 1;
}

/* Accessibilità: riduzione movimento per utenti con preferenza */
@media (prefers-reduced-motion: reduce) {
  .slider-image.lazy-load {
    animation: none;
    transition: opacity 0.1s ease;
  }

  @keyframes shimmer {

    0%,
    100% {
      background-position: 0 0;
    }
  }

  @keyframes fadeInSharp {

    from,
    to {
      opacity: 1;
      filter: blur(0);
    }
  }
}