/* ==========================================================================
   Lazy poster loading — skeleton placeholder + fade-in for movie previews
   ========================================================================== */

/* Reserve stable aspect ratio for the poster box so nothing jumps around
   (CLS) whether the image is eager, lazy, loading, or already loaded.
   Screenshots come out of the 406x229 thumbs endpoint — 16:9. */
.movie-item .movie-img {
  aspect-ratio: 16 / 9;
  background-color: var(--theme-bg-light);
}

.movie-item .movie-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Skeleton shown while the poster hasn't started/finished loading.
   Uses the site's own theme variables (--theme-bg-light /
   --border-info-color) instead of hardcoded colors so it looks right
   in both the dark and light (.theme-mode-variables) modes. */
.movie-img .poster-skeleton {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(100deg,
    var(--theme-bg-light) 30%,
    var(--border-info-color) 50%,
    var(--theme-bg-light) 70%);
  background-size: 200% 100%;
  animation: poster-shimmer 2.4s ease-in-out infinite;
}

@keyframes poster-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Lazy image itself: invisible until swapped in by JS, then fades in */
.movie-img img.lazy-poster {
  opacity: 0;
  transition: opacity 0.35s ease;
}

.movie-img img.lazy-poster.is-loaded {
  opacity: 1;
}