/* 🚀 TAGEASY PERFORMANCE OPTIMIZATIONS CSS */

/* Lazy loading placeholder styling */
.lazy {
  transition: opacity 0.3s ease;
  opacity: 0;
}

.lazy.loaded {
  opacity: 1;
}

/* Preloader per lazy images */
.lazy-placeholder {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Media query ottimizzazioni performance */
@media (prefers-reduced-motion: reduce) {
  .lazy {
    transition: none;
  }
  
  .lazy-placeholder {
    animation: none;
    background: #f0f0f0;
  }
}

/* Preload critico per above-the-fold content */
.critical-image {
  opacity: 1 !important;
}

/* Video performance optimizations */
video {
  object-fit: cover;
}

video:not([preload="metadata"]):not([preload="auto"]) {
  /* Video ottimizzato per lazy loading */
  background: #f0f0f0;
}

/* Ottimizzazioni carousel specifiche */
.gallery-carousel .swiper-slide img {
  will-change: auto;
  transform: translateZ(0); /* Hardware acceleration */
}

.gallery-carousel .swiper-slide.swiper-slide-active img {
  will-change: transform, opacity;
}

/* Throttle hover effects per performance */
@media (hover: hover) {
  .media-preview:hover {
    transform: scale(1.02);
    transition: transform 0.2s ease;
  }
}

/* Riduce reflow e repaint */
.media-wrapper {
  contain: layout style paint;
}

/* Toast notification styling */
.toast-container {
  pointer-events: none;
}

.toast-container .toast {
  pointer-events: auto;
}

.custom-toast {
  animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Performance optimized grid layout */
.img-canale, .img-utente {
  contain: layout style;
}