/* Skeleton Loader Base Variables */
:root {
  --skeleton-bg: rgba(153, 173, 183, .6);
  --skeleton-shine: rgba(255, 255, 255, .8);
  --skeleton-radius: 0.5rem;

  --skeleton-duration: 1.5s;
  --skeleton-delay: 2s;
  --skeleton-angle: 135deg;

  --skeleton-size: 0px;
  --skeleton-blur: 150px;

  --skeleton-shine-position: 0;
}

/* Animate the shine */
@property --skeleton-shine-position {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@keyframes skeletonAnimation {
  0% { --skeleton-shine-position: 0; }
  75% { --skeleton-shine-position: 1; }
  100% { --skeleton-shine-position: 1; }
}

body {
  animation: skeletonAnimation
  calc(var(--skeleton-duration) + var(--skeleton-delay))
  ease-in
  infinite;
}

/* UNIVERSAL SKELETON CLASS */
.skeleton {
  background-color: var(--skeleton-bg);
  border-radius: var(--skeleton-radius);
  overflow: hidden;
  position: relative;

  background-image:
    linear-gradient(
      var(--skeleton-angle),
      transparent,
      transparent calc(var(--skeleton-pos) - var(--skeleton-blur)),
      var(--skeleton-shine) calc(var(--skeleton-pos)),
      var(--skeleton-shine) calc(var(--skeleton-pos) + var(--skeleton-size)),
      transparent calc(var(--skeleton-pos) + var(--skeleton-size) + var(--skeleton-blur))
    );
  background-attachment: fixed;

  /* auto height from row → NO before hack */
}

.lazy-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .5s ease;
}