/**
 * Скелетон-плейсхолдеры для слайдеров главной (Фаза 2, задача 11).
 *
 * Подключается только на главной. Скелетон показывается до инициализации
 * Swiper-слайдера и убирается, как только слайдер готов (см. js/home-sliders.js).
 * Цель — меньше визуального джанка при прогреве страницы. Тёмная тема — в
 * css/dark-theme.css. Референс анимации — skeleton-loading из my/bookmarks.php.
 */

.slider-skeleton {
    display: flex;
    gap: 10px;
    overflow: hidden;
    width: 99.5%;
    margin: 8px auto;
    padding: 0;
    pointer-events: none;
}

.slider-skeleton-card {
    flex: 0 0 auto;
    width: 144px;
    height: 216px;
    border-radius: 0.375rem;
    background: linear-gradient(90deg, #eeeeee 25%, #e0e0e0 50%, #eeeeee 75%);
    background-size: 200% 100%;
    animation: sliderSkeletonShimmer 1.5s ease-in-out infinite;
}

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

/* Плавное исчезновение скелетона после инициализации слайдера */
.slider-skeleton-hide {
    opacity: 0;
    transition: opacity 0.25s ease;
}

/* Мягкое появление слайдера при попадании во вьюпорт (IntersectionObserver) */
.book-rows-swiper.slider-inview {
    animation: sliderFadeIn 0.3s ease;
}

@keyframes sliderFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 500px) {
    .slider-skeleton-card {
        width: 130px;
        height: 195px;
    }
}