/*
 * skeleton.css — shared loading-skeleton base for buyer pages.
 *
 * Usage: <link rel="stylesheet" href="/common/skeleton.css"> before the page's
 * own <style> block, then use class="skeleton" on any placeholder element.
 *
 * This file owns ONLY the shared shimmer: the @keyframes and the .skeleton
 * base (gradient, animation, default radius). Page-specific skeleton SHAPES
 * — .skeleton-card on the storefront, .sk-product on the product page,
 * .skeleton-order on my-orders, .skeleton-seller on sellers — stay in their
 * own pages, because they mirror that page's layout and nothing else.
 *
 * It exists because four pages had drifted into four byte-identical copies of
 * the same shimmer, with no mechanism keeping them in step. One definition
 * means a palette change lands everywhere at once.
 *
 * Palette: #ede9e2 → #f5f2ec → #ede9e2. Warm greys that sit on the cream
 * --paper backdrop, sweeping light-over-dark rather than the previous
 * dark-over-light.
 */

@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.skeleton {
  background: linear-gradient(90deg, #ede9e2 0px, #f5f2ec 200px, #ede9e2 400px);
  background-size: 800px 100%;
  animation: shimmer 1.4s infinite linear;
  border-radius: 8px;
}

/* A shimmering block is decorative, not content — keep it out of the a11y
   tree so screen readers announce the real content once it loads. */
.skeleton { user-select: none; }

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
}