/**
 * Image Translate Easy - Loading Styles
 * These styles provide visual feedback while translated images load
 */


/* Skeleton shimmer animation */
@keyframes it-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Hide images immediately before JS processes them (set by inline style in Liquid) */
/* This selector is generated dynamically: img[src*="filename"]:not(.it-swapped):not(.it-ready) */

/* Homepage/listing fallback: JS adds this only while product-page translations are pending. */
img.it-page-fallback-pending:not(.it-swapped):not(.it-ready):not(.it-fallback) {
  opacity: 0 !important;
}

/* Loading state - shown while translated image loads */
img.it-loading {
  /* Make image invisible but maintain layout */
  color: transparent;

  /* Skeleton shimmer background */
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e8e8e8 37%,
    #f0f0f0 63%
  ) !important;
  background-size: 200% 100% !important;
  animation: it-shimmer 1.5s ease-in-out infinite !important;

  /* Smooth corners */
  border-radius: 4px;
}

/* Processing state - image is being intercepted */
img.it-processing {
  /* Show skeleton shimmer while processing */
  color: transparent !important;
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e8e8e8 37%,
    #f0f0f0 63%
  ) !important;
  background-size: 200% 100% !important;
  animation: it-shimmer 1.5s ease-in-out infinite !important;
  border-radius: 4px;
}

/* Ready state - image has loaded (translated or original) */
img.it-ready {
  /* Reset any loading styles */
  background: none;
  animation: none;
}

/* Swapped state - translated image loaded successfully */
img.it-swapped {
  /* Add subtle fade-in for smooth appearance */
  animation: it-fade-in 0.2s ease-out;
}

/* Smooth product-gallery image/thumbnail updates during variant switches */
.product__media .media img,
.thumbnail-list__item img {
  transition: opacity 0.16s ease-out;
  backface-visibility: hidden;
}

@keyframes it-fade-in {
  from {
    opacity: 0.8;
  }
  to {
    opacity: 1;
  }
}

/* Fallback state - original image shown due to error/timeout */
img.it-fallback {
  /* No special styling, just works as normal */
}

/* A translated asset that failed to load must not reveal the source language. */
img.it-translation-unavailable {
  color: transparent !important;
  background: #f0f0f0 !important;
  animation: none !important;
  border-radius: 4px;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  img.it-loading {
    background: linear-gradient(
      90deg,
      #2a2a2a 25%,
      #333333 37%,
      #2a2a2a 63%
    );
    background-size: 200% 100%;
  }

  img.it-translation-unavailable {
    background: #2a2a2a !important;
  }
}

/* Noscript fallback - if JS is disabled, show images normally */
noscript ~ style,
.no-js img.it-loading {
  background: none !important;
  animation: none !important;
  opacity: 1 !important;
}

/* Picture element source elements - no visual needed */
source[data-it-swapped] {
  /* Marker only, no visual styles needed */
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  img.it-loading {
    animation: none;
    background: #f0f0f0;
  }

  img.it-swapped {
    animation: none;
  }

  .product__media .media img,
  .thumbnail-list__item img {
    transition: none;
  }
}

/* Video processing state - hide while swapping */
video.it-processing {
  display: none !important;
}

/* Video ready state */
video.it-ready {
  /* Reset any hiding */
}

/* Video swapped state - smooth fade in */
video.it-swapped {
  animation: it-fade-in 0.2s ease-out;
}