/* ==========================================================================
   skeleton.css — universal skeleton loading placeholders.

   Usage: add class "skeleton" to any element that wraps a loading asset.
   The skeleton shimmer shows until you remove the class (e.g. on load).
   The element should have dimensions set (via aspect-ratio, width/height,
   or inherited from its container) so the skeleton matches the final size.
   ========================================================================== */

.skeleton {
  position: relative;
  overflow: hidden;
  background: #e4e4e7;
  border-radius: inherit;
}

.skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.5) 50%,
    transparent 100%
  );
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

.skeleton > * {
  visibility: hidden;
}

@keyframes skeleton-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}