/* ── BBS Skeleton Loader — pure CSS, PJAX-safe ───────────────── */

/* Kill theme's PJAX play-button overlay — skeleton replaces it */
.tab-preloader,
.site-preloader { display: none !important; }

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

/* skeleton fades out at 0.8s, collapses at end */
@keyframes bbs-sk-hide {
  0%   { opacity: 1; }
  99%  { opacity: 0; }
  100% { opacity: 0; height: 0; overflow: hidden; visibility: hidden; padding: 0; margin: 0; }
}

/* content fades in at 0.8s */
@keyframes bbs-ct-show {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.bbs-skeleton {
  animation: bbs-sk-hide 0.4s ease-in 0.8s forwards;
}
.bbs-content {
  opacity: 0;
  animation: bbs-ct-show 0.4s ease-out 0.8s forwards;
}

/* ── shimmer base ───────────────────────────────────────────── */
.sk {
  background: linear-gradient(90deg, #e9edf3 25%, #f6f8fc 50%, #e9edf3 75%);
  background-size: 200% 100%;
  animation: bbs-shimmer 1.6s infinite;
  border-radius: 6px;
}

/* ── page heading ───────────────────────────────────────────── */
.sk-title { height: 26px; width: 180px; margin-bottom: 8px; }
.sk-sub   { height: 14px; width: 100px; margin-bottom: 32px; }

/* ── card grid (albums / categories) ───────────────────────── */
.sk-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(6, 1fr);
}
@media (max-width: 1199px) { .sk-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width:  767px) { .sk-grid { grid-template-columns: repeat(2, 1fr); } }

.sk-card-img  { width: 100%; aspect-ratio: 1/1; border-radius: 8px; margin-bottom: 10px; }
.sk-card-line { height: 12px; margin-bottom: 8px; border-radius: 4px; }
.sk-card-line.s { width: 65%; }

/* ── artist circle grid ─────────────────────────────────────── */
.sk-artist-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(6, 1fr);
  text-align: center;
}
@media (max-width: 1199px) { .sk-artist-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width:  767px) { .sk-artist-grid { grid-template-columns: repeat(2, 1fr); } }

.sk-circle      { width: 110px; height: 110px; border-radius: 50%; margin: 0 auto 12px; }
.sk-artist-name { height: 12px; width: 70%; margin: 0 auto 8px; border-radius: 4px; }
.sk-artist-sub  { height: 10px; width: 50%; margin: 0 auto;     border-radius: 4px; }

/* ── track list rows ────────────────────────────────────────── */
.sk-track-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 0; border-bottom: 1px solid #e6ecf5;
}
.sk-track-num   { width: 22px;  height: 13px; border-radius: 3px; flex-shrink: 0; }
.sk-track-thumb { width: 40px;  height: 40px; border-radius: 6px; flex-shrink: 0; }
.sk-track-info  { flex: 1; }
.sk-track-t1    { height: 13px; width: 55%; margin-bottom: 8px; border-radius: 4px; }
.sk-track-t2    { height: 10px; width: 35%; border-radius: 4px; }
.sk-track-dur   { width: 44px;  height: 12px; border-radius: 4px; flex-shrink: 0; }