/* resilient-img.css -- loading + terminal states for product photos.
 * Companion to resilient-img.js. The site's tiles are dark (#0a0a0a
 * theme); the shimmer and the neutral dead tile match so a photo slot
 * never flashes white and never shows the browser's broken-image icon. */

.aurea-img-wrap {
  position: relative;
  background: #141414;
  overflow: hidden;
}

/* Loading shimmer while the photo is in flight. */
.aurea-img-wrap.aurea-img-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    #141414 40%,
    #202020 50%,
    #141414 60%
  );
  background-size: 200% 100%;
  animation: aurea-img-shimmer 1.2s linear infinite;
}

@keyframes aurea-img-shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

/* Photos fade in once loaded instead of popping. */
img.aurea-img-fade {
  opacity: 0;
  transition: opacity 0.35s ease;
}

img.aurea-img-fade.aurea-img-loaded {
  opacity: 1;
}

/* Terminal failure state: the JS swaps in a transparent pixel, so the
 * tile is just this neutral surface. No broken icon, no placeholder
 * text -- a photo slot that quietly stays a tile. */
.aurea-img-wrap.aurea-img-dead-wrap {
  background: linear-gradient(135deg, #101010 0%, #181818 100%);
}

.aurea-img-wrap.aurea-img-dead-wrap::after {
  display: none;
}

img.aurea-img-dead {
  opacity: 0;
}

/* Motion-sensitive customers: no shimmer animation. */
@media (prefers-reduced-motion: reduce) {
  .aurea-img-wrap.aurea-img-loading::after {
    animation: none;
    background: #181818;
  }
  img.aurea-img-fade {
    transition: none;
  }
}