/*
 * Shared skeleton loader utilities.
 *
 * Goal: prevent CLS (content jumping) when async fetches fill in lists/grids.
 * Strategy: render N placeholder elements with the same outer shape (size,
 * aspect-ratio, padding) as the real items, animate with a subtle shimmer,
 * then replace them in-place when data arrives.
 *
 * Usage:
 *   <div class="skel skel-card" style="aspect-ratio:16/9"></div>
 *   <div class="skel skel-line" style="width:60%"></div>
 *   <div class="skel skel-avatar"></div>
 *
 * Tokens inherit from the page's design system (var(--surface-input),
 * var(--surface-elevated)); falls back to safe dark-mode defaults.
 */

:root {
  --skel-bg: var(--surface-input, #222);
  --skel-highlight: var(--surface-elevated, #2c2c2c);
  --skel-radius: 8px;
  --skel-radius-sm: 4px;
  --skel-radius-full: 999px;
}

.skel {
  background: linear-gradient(
    90deg,
    var(--skel-bg) 25%,
    var(--skel-highlight) 37%,
    var(--skel-bg) 63%
  );
  background-size: 400% 100%;
  animation: skel-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--skel-radius);
  pointer-events: none;
}

/*
 * Light variant for use on cream/white surfaces (viewer About / Info panels).
 * The dark .skel gradient looks like a black rectangle on a light card —
 * this one is a gentle translucent shimmer that reads correctly on paper-
 * toned backgrounds. Meant to be set on image wrappers so the shimmer
 * shows while the inner <img> is still decoding.
 */
.skel-light {
  background: linear-gradient(
    90deg,
    rgba(55,55,55,0.04) 25%,
    rgba(55,55,55,0.10) 37%,
    rgba(55,55,55,0.04) 63%
  );
  background-size: 400% 100%;
  animation: skel-shimmer 1.4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes skel-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .skel,
  .skel-light { animation: none; opacity: 0.8; }
}

/* Primitives ------------------------------------------------------------- */

.skel-line {
  display: block;
  height: 12px;
  border-radius: var(--skel-radius-sm);
}

.skel-line.skel-line-lg { height: 16px; }
.skel-line.skel-line-sm { height: 10px; }

.skel-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--skel-radius-full);
  flex-shrink: 0;
}

.skel-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--skel-radius);
}

.skel-thumb.skel-thumb-square { aspect-ratio: 1 / 1; }
.skel-thumb.skel-thumb-pano   { aspect-ratio: 2 / 1; }
.skel-thumb.skel-thumb-4-3    { aspect-ratio: 4 / 3; }

/* Composite cards -------------------------------------------------------- */

.skel-card {
  background: transparent;
  animation: none;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: var(--radius-lg, 14px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.skel-card > .skel-thumb { border-radius: 0; }
.skel-card-body {
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Stack & grid helpers --------------------------------------------------- */

.skel-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.skel-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface-card, #181818);
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 8px;
}