/* Kriptoisme — Loading Skeleton
 * Pure CSS shimmer placeholders. No external deps.
 * Auto-hide via .skeleton-hidden applied by skeleton.js.
 */

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

.skeleton {
  display: block;
  background: linear-gradient(90deg, #ececec 0%, #f5f5f5 50%, #ececec 100%);
  background-size: 200% 100%;
  animation: kriptoisme-shimmer 1.5s ease-in-out infinite;
  border-radius: 4px;
  color: transparent !important;
  user-select: none;
  pointer-events: none;
  overflow: hidden;
}

.skeleton-hidden {
  opacity: 0 !important;
  transition: opacity 0.3s ease-out;
  pointer-events: none;
}

/* Modifiers */
.skeleton-text     { height: 14px; margin: 6px 0; }
.skeleton-text-sm  { height: 10px; margin: 4px 0; }
.skeleton-text-lg  { height: 20px; margin: 8px 0; }
.skeleton-title    { height: 24px; width: 70%; margin: 10px 0; }
.skeleton-circle   { width: 40px; height: 40px; border-radius: 50%; }
.skeleton-circle-sm { width: 24px; height: 24px; border-radius: 50%; }
.skeleton-block    { width: 100%; height: 180px; border-radius: 6px; }
.skeleton-block-sm { width: 100%; height: 100px; border-radius: 4px; }

/* Composed card: image + lines */
.skeleton-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  margin: 0 0 20px;
}
.skeleton-card .skeleton-image { width: 100%; aspect-ratio: 16/9; border-radius: 6px; }
.skeleton-card .skeleton-meta  { display: flex; gap: 8px; align-items: center; }

/* Widget list item skeleton */
.skeleton-widget-item {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}
.skeleton-widget-item .skeleton-thumb { width: 70px; height: 50px; border-radius: 4px; flex-shrink: 0; }
.skeleton-widget-item .skeleton-content { flex: 1; }

/* Crypto price swiper skeleton */
.skeleton-crypto-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  min-width: 180px;
}
.skeleton-crypto-item .skeleton-icon  { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; }
.skeleton-crypto-item .skeleton-name   { width: 70px; }
.skeleton-crypto-item .skeleton-price  { width: 60px; margin-left: auto; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; background: #ececec; }
  .skeleton-hidden { transition: none; }
}

/* Inline SVG base64 placeholder for lazy images (replaces blank.png) */
.lazy-image[data-src] {
  background: #f0f0f0 url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxIDEnPjxyZWN0IHdpZHRoPScxJyBoZWlnaHQ9JzEnIGZpbGw9JyUyM2YwZjBmMCcvPjwvc3ZnPg==") center/cover;
}