/* ============================================
   RenDS — Skeleton
   ============================================
   Loading placeholder with shimmer animation.
   Respects prefers-reduced-motion (static fill).

   Usage:
     <div class="ren-skeleton ren-skeleton-heading"></div>
     <div class="ren-skeleton ren-skeleton-text"></div>
     <div class="ren-skeleton ren-skeleton-circle"></div>
     <div class="ren-skeleton ren-skeleton-rect"></div>

   Accessibility:
     - Wrap multiple skeletons in a container with
       aria-busy="true" aria-live="polite"
     - Replace with real content when loaded
   ============================================ */

.ren-skeleton {
  display: block;
  background: linear-gradient(
    90deg,
    var(--ren-skeleton-bg) 25%,
    var(--ren-skeleton-shine) 50%,
    var(--ren-skeleton-bg) 75%
  );
  background-size: 200% 100%;
  animation: ren-skeleton-pulse var(--ren-skeleton-speed) var(--ease-loop-pulse) infinite;
  border-radius: var(--ren-skeleton-radius);
  min-height: 1rem;
}

/* ─── Variants ─── */
.ren-skeleton-text {
  height: 1em;
  width: 100%;
  border-radius: var(--radius-sm);
}

.ren-skeleton-heading {
  height: 1.5em;
  width: 60%;
  border-radius: var(--radius-sm);
}

.ren-skeleton-circle {
  width: var(--avatar-md);
  height: var(--avatar-md);
  border-radius: var(--radius-full);
}

.ren-skeleton-rect {
  width: 100%;
  height: 8rem;
  border-radius: var(--radius-md);
}

@keyframes ren-skeleton-pulse {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ren-skeleton {
    animation: none;
    background: var(--ren-skeleton-bg);
  }
}