:root {
  --site-skeleton-base: rgba(255, 255, 255, 0.07);
  --site-skeleton-mid: rgba(255, 255, 255, 0.15);
}

.site-skeleton,
.site-text-loading,
.site-img-loading {
  position: relative;
  overflow: hidden;
}

.site-skeleton::after,
.site-text-loading::after,
.site-img-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    var(--site-skeleton-base) 25%,
    var(--site-skeleton-mid) 50%,
    var(--site-skeleton-base) 75%
  );
  background-size: 220% 100%;
  animation: site-skeleton-shimmer 1.15s ease-in-out infinite;
}

.site-text-loading {
  color: transparent !important;
  min-width: var(--site-skeleton-width, 64px);
  min-height: var(--site-skeleton-height, 1em);
  border-radius: 7px;
}

.site-text-loading > * {
  opacity: 0 !important;
}

img.site-img-loading {
  background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border-radius: inherit;
  color: transparent;
}

.site-async-image {
  opacity: 0;
  transition: opacity 0.18s ease, filter 0.18s ease;
}

.site-async-image[src]:not([src=""]) {
  opacity: 1;
}

.site-async-image-shell {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

.site-async-image-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    var(--site-skeleton-base) 25%,
    var(--site-skeleton-mid) 50%,
    var(--site-skeleton-base) 75%
  );
  background-size: 220% 100%;
  animation: site-skeleton-shimmer 1.15s ease-in-out infinite;
}

.site-async-image-shell:has(img[src]:not([src=""]))::after {
  display: none;
}

img.site-img-loading:not([width]):not([height]) {
  min-height: 42px;
}

img.site-img-loading {
  opacity: 0.55;
  filter: saturate(0.75);
  transition: opacity 0.18s ease, filter 0.18s ease;
}

img:not(.site-img-loading).site-img-ready {
  opacity: 1;
  filter: none;
}

.ref-stat-card__skeleton {
  background: linear-gradient(
    90deg,
    var(--site-skeleton-base) 25%,
    var(--site-skeleton-mid) 50%,
    var(--site-skeleton-base) 75%
  ) !important;
  background-size: 220% 100% !important;
  animation: site-skeleton-shimmer 1.15s ease-in-out infinite !important;
}

@keyframes site-skeleton-shimmer {
  0% { background-position: 220% 0; }
  100% { background-position: -220% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .site-skeleton::after,
  .site-text-loading::after,
  .site-img-loading::after,
  .ref-stat-card__skeleton {
    animation: none !important;
    background-position: 50% 0;
  }
}