/**
 * Shoreline Medical Billing - Smooth Progressive Image Loading Styles
 * Conforms strictly to 9-color palette and Lighthouse 95+ performance constraints.
 */

/* Smooth Progressive Image Container (Zero-CLS Layout Reservation) */
.smooth-image-wrapper {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  background-color: var(--color-background-soft);
  border-radius: inherit;
}

/* Base Image Smooth Transition State */
img.smooth-image,
picture.smooth-image img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 1;
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}

/* Base data-image-hash fallback (Always fully visible) */
img[data-image-hash] {
  opacity: 1;
}

/* Progressive Loading State (Only if wrapper has active shimmer) */
.smooth-image-wrapper:not(.is-loaded) img.smooth-image {
  opacity: 0.92;
}

.smooth-image-wrapper.is-loaded img.smooth-image,
img.smooth-image.is-loaded,
picture.smooth-image img.is-loaded {
  opacity: 1;
}

/* Subtle Shimmer Placeholder */
.smooth-image-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(217, 231, 237, 0.45) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: smooth-image-shimmer 1.8s infinite;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.3s ease;
}

.smooth-image-wrapper.is-loaded::before {
  opacity: 0;
  animation: none;
}

@keyframes smooth-image-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Reduced Motion Compliance */
@media (prefers-reduced-motion: reduce) {
  .smooth-image-wrapper::before {
    animation: none !important;
    display: none !important;
  }
  img.smooth-image,
  picture.smooth-image img,
  img[data-image-hash] {
    opacity: 1 !important;
    transition: none !important;
  }
}