/* ============================================
   BIZ RENT CAR - PERFORMANCE CSS
   Skeleton loading states for lazy images
   ============================================ */

/* ============================================
   SKELETON SHIMMER
   ============================================ */
@keyframes skeleton-shimmer {
  0% {
    background-position: -400px 0;
  }
  100% {
    background-position: 400px 0;
  }
}

/* Skeleton loader classes */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--pearl-gray) 0%,
    #e8e8e6 40%,
    var(--pearl-gray) 80%
  );
  background-size: 800px 100%;
  border-radius: var(--radius-md);
  animation: skeleton-shimmer 1.5s infinite linear;
}

.skeleton--text {
  height: 16px;
  width: 80%;
}

.skeleton--title {
  height: 24px;
  width: 60%;
}

.skeleton--image {
  aspect-ratio: 3 / 2;
}

/* Apply skeleton to lazy images that haven't loaded */
img[loading="lazy"] {
  background: linear-gradient(
    90deg,
    var(--pearl-gray) 0%,
    #e8e8e6 40%,
    var(--pearl-gray) 80%
  );
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.5s infinite linear;
}

/* Remove skeleton once loaded */
img[loading="lazy"].loaded {
  background: none;
  animation: none;
}

/* Smooth fade-in for lazy images */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.3s ease;
}

img[loading="lazy"].loaded {
  opacity: 1;
}

/* JS-managed lazy images (data-src) */
.lazy-image {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.lazy-image.loaded {
  opacity: 1;
}

/* Images already in viewport should be visible */
img:not([loading="lazy"]):not(.lazy-image) {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .skeleton,
  img[loading="lazy"] {
    animation: none;
  }
}