/* ==========================================================================
   skeleton.css — Skeleton loading placeholders
   Shimmering blocks that match the dark aesthetic of the site.
   ========================================================================== */

@keyframes skeleton-shimmer {
  0%   { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}

.skeleton-line {
  display: block;
  height: 0.9em;
  margin: var(--space-sm, 0.5rem) 0;
  border-radius: var(--r, 6px);
  background: linear-gradient(
    90deg,
    var(--border, #2a1010) 0px,
    #3a1818 40px,
    var(--border, #2a1010) 80px
  );
  background-size: 200px 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

.skeleton-line:first-child { width: 60%; }
.skeleton-line:nth-child(2) { width: 80%; }
.skeleton-line:nth-child(3) { width: 45%; }
.skeleton-line:nth-child(4) { width: 70%; }

.skeleton-block {
  display: block;
  height: 3rem;
  margin: var(--space-sm, 0.5rem) 0;
  border-radius: var(--r, 6px);
  background: linear-gradient(
    90deg,
    var(--border, #2a1010) 0px,
    #3a1818 40px,
    var(--border, #2a1010) 80px
  );
  background-size: 200px 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

/* High-contrast theme skeleton */
[data-theme="high-contrast"] .skeleton-line,
[data-theme="high-contrast"] .skeleton-block {
  background: linear-gradient(
    90deg,
    #ddd 0px,
    #eee 40px,
    #ddd 80px
  );
  background-size: 200px 100%;
}

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