/* ===== Kog Taraz Placeholder — لوگو + شیشه، هم‌اندازه تصویر، بدون خروج از کادر ===== */
:root {
  --sk-base: rgba(255, 255, 255, 0.05);
  --sk-mid: rgba(255, 255, 255, 0.14);
  --sk-glow: rgba(0, 255, 255, 0.18);
  --sk-logo: url('/assets/images/logo.png');
  --sk-bg: rgba(8, 12, 24, 0.94);
}

@keyframes kogtaraz-sk-shimmer {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

/* والدها */
.item-card.kogtaraz-sk-loading,
.genre-card.kogtaraz-sk-loading,
.song-card.kogtaraz-sk-loading,
.kogtaraz-sk-media.kogtaraz-sk-loading,
.swiper-slide.kogtaraz-sk-loading,
.splash-cover-wrap.kogtaraz-sk-loading,
.singer-main.kogtaraz-sk-loading {
  position: relative;
  overflow: hidden;
}

/* لوگو روی کارت‌های مربعی (index / latest / mylist / ...) */
.item-card.kogtaraz-sk-loading::before,
.genre-card.kogtaraz-sk-loading::before,
.song-card.kogtaraz-sk-loading::before,
.kogtaraz-sk-media.kogtaraz-sk-loading::before,
.swiper-slide.kogtaraz-sk-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
  background-color: var(--sk-bg);
  background-image: var(--sk-logo);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* شیشه روی کارت‌ها */
.item-card.kogtaraz-sk-loading::after,
.genre-card.kogtaraz-sk-loading::after,
.song-card.kogtaraz-sk-loading::after,
.kogtaraz-sk-media.kogtaraz-sk-loading::after,
.swiper-slide.kogtaraz-sk-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    var(--sk-base) 18%,
    var(--sk-mid) 38%,
    var(--sk-glow) 50%,
    var(--sk-mid) 62%,
    var(--sk-base) 82%,
    transparent 100%
  );
  background-size: 220% 100%;
  animation: kogtaraz-sk-shimmer 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/*
  لوگو روی خود <img> — هم‌اندازه با باکس تصویر
  بیت‌مپ واقعی با object-position خارج می‌شود
*/
img.kogtaraz-sk-loading {
  opacity: 1 !important;
  background-color: var(--sk-bg) !important;
  background-image: var(--sk-logo) !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  background-clip: border-box !important;
  object-position: -99999px -99999px !important;
  /* اندازه و شعاع را از CSS صفحه می‌گیرد — عوض نکن */
  box-sizing: border-box !important;
  overflow: hidden !important;
  transition: opacity 0.2s ease-out;
}

img.kogtaraz-sk-ready {
  opacity: 1 !important;
  filter: none !important;
  background-image: none !important;
  background-color: transparent !important;
  object-position: center !important;
  visibility: visible !important;
}

/* ===== اسپلش دایره‌ای — لوگو دقیقاً داخل دایره، بدون بیرون‌زدگی ===== */
.splash-cover-wrap.kogtaraz-sk-loading {
  overflow: hidden !important;
  border-radius: 50% !important;
  /* اندازه را از song.css نگه می‌دارد (clamp 130–200) */
}
/* روی wrap لوگو نگذار تا دوبل نشود؛ فقط روی img دایره‌ای */
.splash-cover-wrap.kogtaraz-sk-loading::before {
  content: none !important;
  display: none !important;
}
.splash-cover-wrap.kogtaraz-sk-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: 50% !important;
  overflow: hidden;
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    var(--sk-base) 18%,
    var(--sk-mid) 38%,
    var(--sk-glow) 50%,
    var(--sk-mid) 62%,
    var(--sk-base) 82%,
    transparent 100%
  );
  background-size: 220% 100%;
  animation: kogtaraz-sk-shimmer 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

img.splash-cover.kogtaraz-sk-loading {
  border-radius: 50% !important;
  overflow: hidden !important;
  background-size: cover !important;
  background-position: center center !important;
  /* عرض/ارتفاع را دست نزن — همان 100% والد از song.css */
}

/* ===== صفحه موسیقی / خواننده — کاور دایره‌ای هیرو ===== */
img.singer-cover.kogtaraz-sk-loading,
img.singer-photo.kogtaraz-sk-loading {
  border-radius: 50% !important;
  overflow: hidden !important;
  background-size: cover !important;
  background-position: center center !important;
}

/* مینی‌کاور پلیر */
img.mini-cover.kogtaraz-sk-loading {
  overflow: hidden !important;
  background-size: cover !important;
  background-position: center center !important;
  border-radius: inherit;
}

/* پاک‌سازی بعد از لود */
.item-card.kogtaraz-sk-ready::before,
.genre-card.kogtaraz-sk-ready::before,
.song-card.kogtaraz-sk-ready::before,
.kogtaraz-sk-media.kogtaraz-sk-ready::before,
.swiper-slide.kogtaraz-sk-ready::before,
.splash-cover-wrap.kogtaraz-sk-ready::before,
.item-card.kogtaraz-sk-ready::after,
.genre-card.kogtaraz-sk-ready::after,
.song-card.kogtaraz-sk-ready::after,
.kogtaraz-sk-media.kogtaraz-sk-ready::after,
.swiper-slide.kogtaraz-sk-ready::after,
.splash-cover-wrap.kogtaraz-sk-ready::after,
.singer-main.kogtaraz-sk-ready::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  background: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .item-card.kogtaraz-sk-loading::after,
  .song-card.kogtaraz-sk-loading::after,
  .genre-card.kogtaraz-sk-loading::after,
  .splash-cover-wrap.kogtaraz-sk-loading::after {
    animation-duration: 2.2s;
  }
}