/**
 * TOCHKA Skeleton Screens (v27.2)
 * Путь: css/skeletons.css
 * Фичи: GPU Acceleration, Feed Support, Cinema Glass Style
 * Описание: Высокопроизводительные плейсхолдеры с эффектом стеклянного мерцания.
 */

/* 1. АНИМАЦИЯ (Swipe Effect) */
@keyframes glass-shimmer-swipe {
    0% { transform: translateX(-150%); }
    100% { transform: translateX(150%); }
}

/* 2. ЛОГИКА ОТОБРАЖЕНИЯ (Universal) */
/* Если у родителя класс .is-loading, скрываем реальный контент, показываем скелет */
.is-loading .real-content { display: none !important; }
.is-loading .skeleton-wrapper { display: block !important; }
:not(.is-loading) .skeleton-wrapper { display: none !important; }

/* Универсальный слой мерцания */
.skeleton-image::after,
.skeleton-line::after,
.skeleton-avatar::after,
.skeleton-btn::after,
.skeleton-card::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(
        90deg, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.04) 45%, 
        rgba(255, 255, 255, 0.08) 50%, 
        rgba(255, 255, 255, 0.04) 55%, 
        rgba(255, 255, 255, 0) 100%
    );
    /* Использование cubic-bezier для плавности iOS-типа */
    animation: glass-shimmer-swipe 1.8s infinite cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
}

.skeleton-image,
.skeleton-line,
.skeleton-avatar,
.skeleton-btn,
.skeleton-card {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06); /* Чуть ярче для Glass эффекта */
    transform: translateZ(0); /* Force GPU Acceleration */
    will-change: transform;
}

/* 3. СКЕЛЕТОНЫ ДЛЯ ЛЕНТЫ (FEED) */
.skeleton-feed-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    max-width: 500px; /* Согласовано с feed.css */
    margin: 0 auto;
}

.skeleton-card {
    height: 320px; /* Увеличено под новый дизайн карточек */
    width: 100%;
    border-radius: 32px; /* --card-radius из main-v26 */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Внутренние линии внутри скелета карточки */
.skeleton-card .skeleton-line { 
    background: rgba(255, 255, 255, 0.1); 
    margin-bottom: 8px;
}
.skeleton-card .skeleton-line:last-child { width: 60%; }

/* 4. СКЕЛЕТОНЫ ДЛЯ ШТОРКИ (SHEET / MODAL) */
.skeleton-sheet-wrapper {
    background: #1c1c1e;
    min-height: 100vh;
}

.skeleton-sheet-wrapper .skeleton-image {
    height: 35vh; /* Динамическая высота под Cinema Glass */
    width: 100%;
    border-radius: 0 0 32px 32px;
}

.skeleton-body { 
    padding: 28px 20px; 
}

.skeleton-line { 
    height: 14px; 
    border-radius: 8px; 
    margin-bottom: 16px; 
}

.skeleton-line.title { 
    width: 85%; 
    height: 28px; 
    border-radius: 14px; 
    margin-bottom: 24px; 
    background: rgba(255, 255, 255, 0.12);
}

.skeleton-line.meta { 
    width: 40%; 
    height: 14px; 
    opacity: 0.6; 
}

.skeleton-line.desc { 
    width: 100%; 
    height: 14px; 
    margin-bottom: 12px; 
    opacity: 0.35; 
}

.skeleton-line.desc.short { width: 70%; }

/* 5. ФУТЕР И АВАТАРЫ */
.skeleton-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(28, 28, 30, 0.8);
    backdrop-filter: blur(20px);
}

.skeleton-avatar { 
    width: 48px; 
    height: 48px; 
    border-radius: 18px; 
    flex-shrink: 0;
}

.skeleton-btn {
    flex-grow: 1;
    height: 54px;
    border-radius: 20px;
}

/* 6. ГЕО-ФИЛЬТР СКЕЛЕТОН */
.skeleton-geo-bar {
    width: 220px;
    height: 40px;
    margin: 12px auto;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
}

/* ОПТИМИЗАЦИЯ ДЛЯ ТЕМНОЙ ТЕМЫ */
@media (prefers-color-scheme: dark) {
    .skeleton-image, .skeleton-card, .skeleton-avatar {
        background: rgba(255, 255, 255, 0.04);
    }
}