/* ============================================================
   KEDAI — Skeleton Loading Animation
   ============================================================ */

/* Base skeleton */
.kedai-skeleton {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: kedai-skeleton-shimmer 1.5s infinite;
  border-radius: 0.5rem;
}

@keyframes kedai-skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Skeleton variants */
.kedai-skeleton-text {
  height: 1rem;
  width: 100%;
  border-radius: 0.375rem;
}
.kedai-skeleton-text-sm {
  height: 0.75rem;
  width: 60%;
  border-radius: 0.375rem;
}
.kedai-skeleton-heading {
  height: 1.5rem;
  width: 50%;
  border-radius: 0.5rem;
}
.kedai-skeleton-badge {
  height: 1.25rem;
  width: 4rem;
  border-radius: 9999px;
}
.kedai-skeleton-button {
  height: 2.75rem;
  border-radius: 0.75rem;
}
.kedai-skeleton-image {
  border-radius: 0.75rem;
  background: linear-gradient(90deg, #e2e8f0 25%, #cbd5e1 50%, #e2e8f0 75%);
  background-size: 200% 100%;
  animation: kedai-skeleton-shimmer 1.5s infinite;
}
.kedai-skeleton-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
}
.kedai-skeleton-circle {
  border-radius: 9999px;
}

/* Content enter animation */
.kedai-content-enter {
  animation: kedai-content-enter 0.4s ease;
}
@keyframes kedai-content-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* vscroll container */
.kedai-vscroll {
  content-visibility: auto;
  contain-intrinsic-size: auto 380px;
}
.kedai-skeleton-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 380px;
}