/*
 * perf.css — общие стили для «мгновенного открытия»:
 * скелетон-заглушки (shimmer) + прогрессивная загрузка обложек (fade-in).
 * Подключается на: library.php, user.php, index.php, index_mobile.php
 */

/* ---------- Прогрессивная загрузка обложек (скелетон + fade) ----------
 * До загрузки картинки на её месте виден шиммер-плейсхолдер (скелетон),
 * потому что фон рисуется у самого <img>, пока контент ещё не загружен.
 * Когда картинка загрузилась (класс is-loaded ставит perf.js) — шиммер
 * убирается, а изображение плавно проявляется. */
img.cover-fade {
    background-color: #23232b;
    background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.06) 50%, rgba(255,255,255,0) 100%);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: sk-shimmer 1.3s ease-in-out infinite;
}
img.cover-fade.is-loaded {
    background-image: none;
    animation: none;
    animation: cover-fade-in .35s ease both;
}
@keyframes cover-fade-in { from { opacity: .35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    img.cover-fade { animation: none; }
    img.cover-fade.is-loaded { animation: none; }
}
/* Если JS не выполнился — гарантированно показываем картинки без шиммера. */
.no-js img.cover-fade { animation: none; background-image: none; }

/* ---------- Скелетоны (shimmer) ---------- */
@keyframes sk-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.sk {
    position: relative;
    overflow: hidden;
    background-color: #23232b;
    border-radius: .5rem;
}
.sk::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.055) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: sk-shimmer 1.3s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .sk::after { animation: none; }
}

/* Строчки-заглушки текста */
.sk-line { height: 12px; border-radius: 6px; }
.sk-line.h-4 { height: 16px; }
.sk-line.w-70 { width: 70%; }
.sk-line.w-60 { width: 60%; }
.sk-line.w-50 { width: 50%; }
.sk-line.w-40 { width: 40%; }
.sk-line.w-30 { width: 30%; }
.sk-line.w-20 { width: 20%; }

/* Скелетон карточки трека — совпадает по геометрии с реальной карточкой */
.sk-track {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border-radius: .75rem;
    background: rgba(40, 40, 50, .5);
    border: 1px solid rgba(120,120,140,.12);
}
.sk-track .sk-thumb {
    width: 76px; height: 76px;
    border-radius: .5rem;
    flex: 0 0 auto;
}
.sk-track .sk-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding-top: .25rem;
    min-width: 0;
}
/* Компактный вариант для мобильных списков */
.sk-track.sk-track-sm { padding: .75rem; gap: .75rem; }
.sk-track.sk-track-sm .sk-thumb { width: 56px; height: 56px; }

/* Скелетон плитки (grid-обложка на главной) */
.sk-tile { border-radius: .75rem; overflow: hidden; }
.sk-tile .sk-cover { width: 100%; aspect-ratio: 1 / 1; border-radius: .75rem; }

/* Сентинел бесконечного скролла */
.perf-sentinel { width: 100%; height: 1px; }
.perf-loading-row {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    color: #9ca3af;
    font-size: .85rem;
    gap: .5rem;
}