/**
 * Sistema de Optimización de Imágenes - Design Reyes
 * Carga inteligente, lazy loading, WebP, y placeholders
 */

/* ============================================
   PRELOAD DE IMÁGENES CRÍTICAS
   ============================================ */

/* Las imágenes críticas ya deben tener loading="eager" en HTML */

/* ============================================
   LAZY LOADING CON EFECTO BLUR
   ============================================ */

/* Contenedor de imagen con efecto de carga */
.img-wrapper {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(167, 139, 250, 0.05));
  border-radius: inherit;
}

/* Imagen mientras está cargando */
.img-wrapper img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
  position: relative;
  z-index: 2;
}

/* Estado inicial: invisible */
.img-wrapper img[loading="lazy"]:not(.loaded) {
  opacity: 0;
}

/* Estado cargado: visible */
.img-wrapper img.loaded {
  opacity: 1;
}

/* Quitar placeholder cuando la imagen cargó */
.img-wrapper.loaded::before {
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* ============================================
   OPTIMIZACIÓN DE IMÁGENES DEL CATÁLOGO
   ============================================ */

/* Grid de diseños optimizado */
.design-card-img-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(167, 139, 250, 0.04));
}

/* Placeholder del catálogo */
.design-card-img-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 50% 50%, rgba(124, 58, 237, 0.2), transparent 60%),
    linear-gradient(135deg, rgba(124, 58, 237, 0.05), rgba(167, 139, 250, 0.08));
  animation: shimmer 2s ease-in-out infinite;
  z-index: 1;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0.6;
  }
}

/* Imagen del diseño */
.design-card-img-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  opacity: 1;
  transform: scale(1);
  transition: transform 0.3s ease;
  z-index: 2;
}

/* Hover en la tarjeta de diseño */
.design-card:hover .design-card-img-wrapper img {
  transform: scale(1.08);
}

/* ============================================
   OPTIMIZACIÓN DE LOGO E IMÁGENES CRÍTICAS
   ============================================ */

/* Logo en navbar - siempre visible inmediato */
.nav-brand img {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
  /* No lazy loading, carga inmediata */
}

/* Logo en hero - crítico */
.hero-logo-img {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  /* No lazy loading, carga inmediata */
}

/* ============================================
   IMÁGENES RESPONSIVE
   ============================================ */

/* Contenedor responsive para imágenes */
.responsive-img-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Imagen responsive básica */
.responsive-img {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

/* ============================================
   OPTIMIZACIÓN DE PRODUCTO INDIVIDUAL
   ============================================ */

/* Imagen principal del producto */
.dr-product-image-frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-lg, 20px);
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.1), rgba(167, 139, 250, 0.05));
}

.dr-product-image-frame img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* ============================================
   FALLBACK PARA IMÁGENES NO ENCONTRADAS
   ============================================ */

/* Estilo para placeholder SVG */
img[src*="placeholder.svg"] {
  opacity: 0.6;
  filter: brightness(0.9);
}

/* ============================================
   OPTIMIZACIÓN PARA MÓVILES
   ============================================ */

@media (max-width: 768px) {
  /* Reducir animaciones en móvil para mejor performance */
  .img-wrapper::before,
  .design-card-img-wrapper::before {
    animation-duration: 3s;
  }
  
  /* Desactivar transform en hover para móvil */
  .design-card:hover .design-card-img-wrapper img.loaded {
    transform: scale(1);
  }
}

/* ============================================
   PREFETCH HINT PARA NAVEGADORES
   ============================================ */

/* Los navegadores pueden precargar imágenes del viewport siguiente */
@supports (content-visibility: auto) {
  .design-card {
    content-visibility: auto;
    contain-intrinsic-size: 300px;
  }
}

/* ============================================
   PROGRESSIVE IMAGE LOADING
   ============================================ */

/* Imágenes sin blur - carga directa */
.img-blur,
.img-sharp {
  filter: none;
  transform: scale(1);
}

/* ============================================
   OPTIMIZACIÓN DE THUMBNAILS
   ============================================ */

/* Thumbnails pequeños del dashboard */
.thumbnail-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(124, 58, 237, 0.05);
}

.thumbnail-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.thumbnail-wrapper img.loaded {
  opacity: 1;
}

/* ============================================
   LAZY LOADING NATIVO + INTERSECTION OBSERVER
   ============================================ */

/* Clase para imágenes observadas */
.lazy-observe {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.lazy-observe.in-view {
  opacity: 1;
}

/* ============================================
   FORMATO WEBP CON FALLBACK
   ============================================ */

/* Los navegadores que soportan WebP lo cargarán automáticamente con <picture> */
picture {
  display: block;
  width: 100%;
  height: 100%;
}

picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================
   ANTI-LAYOUT-SHIFT
   ============================================ */

/* Prevenir saltos de layout con aspect-ratio */
.img-container-ratio {
  position: relative;
  width: 100%;
  aspect-ratio: var(--img-ratio, 1);
}

.img-container-ratio img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================
   CARGA PRIORITARIA
   ============================================ */

/* Imágenes above-the-fold (visibles inmediatamente) */
/* .priority-image: No se definen reglas CSS aquí; usar fetchpriority="high" en HTML */

/* ============================================
   PERFORMANCE HINTS
   ============================================ */

/* Optimización para GPU */
.gpu-accelerated-img {
  transform: translateZ(0);
  will-change: transform, opacity;
}

/* Desactivar will-change después de la carga */
.gpu-accelerated-img.loaded {
  will-change: auto;
}