/**
 * Lazy-load skeleton placeholders.
 *
 * Paired with js/lazy-skeleton.js. Images inside a [data-lz-section] carry a
 * transparent 1x1 placeholder in src and the real file in data-src; the shimmer
 * below is painted on the element's own background until the real file loads.
 */

@keyframes lz-shimmer {
  0% {
    background-position: 150% 0;
  }
  100% {
    background-position: -50% 0;
  }
}

.lz-img,
.lz-bg {
  background-color: #f5f5f5;
  background-image: linear-gradient(
    100deg,
    #f5f5f5 30%,
    #fcfcfc 50%,
    #f5f5f5 70%
  );
  background-repeat: no-repeat;
  background-size: 200% 100%;
  background-position: 150% 0;
  animation: lz-shimmer 1.4s ease-in-out infinite;
}

.lz-img {
  border-radius: inherit;
}

.lz-img.lz-loaded,
.lz-bg.lz-loaded {
  background-color: transparent;
  background-image: none;
  animation: none;
}

.lz-img.lz-loaded {
  animation: lz-fade-in 0.35s ease-out;
}

@keyframes lz-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Background tiles get their real image assigned inline by the JS. */
.lz-bg.lz-loaded {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

@media (prefers-reduced-motion: reduce) {
  .lz-img,
  .lz-bg {
    background-image: none;
    background-color: #f5f5f5;
    animation: none;
  }

  .lz-img.lz-loaded {
    animation: none;
  }
}