/* ===== Skeleton Loading — CSS-only approach =====
 *
 * Работает через класс body.is-loading.
 * Реальная HTML-разметка остаётся, элементы получают shimmer-эффект.
 * При снятии класса контент плавно появляется.
 */

/* Shimmer animation */
@keyframes skeleton-shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* ─── Shimmer mixin ─── */
/* Reusable shimmer gradient */

/* ─── Ссылки — отключить взаимодействие ─── */
.is-loading a {
    pointer-events: none !important;
}

/* ─── Изображения ───
 * <img> — replaced element, ::after не работает.
 * Поэтому: скрываем src через object-position, показываем CSS background.
 */
.is-loading .hero-img,
.is-loading .featured-item-image,
.is-loading .article-item-image,
.is-loading .article-hero-img,
.is-loading .feed-hero-img,
.is-loading .feed-list-img {
    object-fit: none !important;
    object-position: -99999px -99999px !important;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.10) 50%,
        rgba(255, 255, 255, 0.04) 100%
    ) !important;
    background-size: 200% 100% !important;
    animation: skeleton-shimmer 1.5s ease-in-out infinite !important;
}

/* Shorts — inline-styled imgs внутри short-card-inner */
.is-loading .short-card-inner img {
    object-fit: none !important;
    object-position: -99999px -99999px !important;
}

.is-loading .short-card-inner {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.10) 50%,
        rgba(255, 255, 255, 0.04) 100%
    ) !important;
    background-size: 200% 100% !important;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

/* Инфлюэнсер слайд — background-image */
.is-loading .influencer-slide {
    background-image: none !important;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.10) 50%,
        rgba(255, 255, 255, 0.04) 100%
    ) !important;
    background-size: 200% 100% !important;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

/* ─── Текст — скрыть, показать shimmer ─── */
.is-loading .hero-content h2,
.is-loading .hero-content h2 span,
.is-loading .featured-item-title h2,
.is-loading .featured-item-title h2 span,
.is-loading .article-item-title h2,
.is-loading .article-item-title h2 span,
.is-loading .sidebar-item-title,
.is-loading .sidebar-item-time,
.is-loading .influencer-badge,
.is-loading .influencer-name,
.is-loading .influencer-description,
.is-loading .short-title,
.is-loading .short-date,
.is-loading .shorts-title h2,
.is-loading .footer-logo,
.is-loading .footer-links a,
.is-loading .footer-copy {
    color: transparent !important;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.10) 50%,
        rgba(255, 255, 255, 0.04) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 6px;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}

/* ─── Лого ─── */
.is-loading .logo {
    color: transparent !important;
    -webkit-text-fill-color: transparent;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.10) 50%,
        rgba(255, 255, 255, 0.04) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 8px;
}

/* ─── Кнопки навигации ─── */
.is-loading .nav-btn,
.is-loading .header-bottom ul li a {
    color: transparent !important;
    border-color: rgba(255, 255, 255, 0.04) !important;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.02) 0%,
        rgba(255, 255, 255, 0.06) 50%,
        rgba(255, 255, 255, 0.02) 100%
    ) !important;
    background-size: 200% 100% !important;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 6px;
    pointer-events: none !important;
}

.is-loading .nav-btn svg {
    opacity: 0;
}

/* ─── Слайдер кнопки ─── */
.is-loading .shorts-controls button,
.is-loading .inf-arrow {
    background: rgba(255, 255, 255, 0.04) !important;
    color: transparent !important;
}

.is-loading .shorts-controls button svg,
.is-loading .inf-arrow svg {
    opacity: 0;
}

/* ─── Dots ─── */
.is-loading .influencer-dots .dot {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* ─── Hero overlay / card bg — скрыть градиенты ─── */
.is-loading .hero-bg,
.is-loading .feed-hero-bg,
.is-loading .short-card-bg {
    background: none !important;
}

/* ─── Article page specifics ─── */
.is-loading .article-rubric,
.is-loading .article-title {
    color: transparent !important;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.10) 50%,
        rgba(255, 255, 255, 0.04) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 6px;
}

.is-loading .article-author,
.is-loading .article-date,
.is-loading .article-meta-sep,
.is-loading .article-read-time {
    color: transparent !important;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.10) 50%,
        rgba(255, 255, 255, 0.04) 100%
    ) !important;
    background-size: 200% 100% !important;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 4px;
}

.is-loading .article-body p,
.is-loading .article-lead,
.is-loading .article-h2 {
    color: transparent !important;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.10) 50%,
        rgba(255, 255, 255, 0.04) 100%
    ) !important;
    background-size: 200% 100% !important;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 6px;
}

.is-loading .article-quote {
    border-color: rgba(255, 255, 255, 0.06) !important;
    background: rgba(255, 255, 255, 0.02) !important;
}

.is-loading .article-quote p,
.is-loading .article-quote cite {
    color: transparent !important;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.10) 50%,
        rgba(255, 255, 255, 0.04) 100%
    ) !important;
    background-size: 200% 100% !important;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 4px;
}

.is-loading .article-inset {
    background: rgba(255, 255, 255, 0.02) !important;
}

.is-loading .article-inset-label,
.is-loading .article-inset p {
    color: transparent !important;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.10) 50%,
        rgba(255, 255, 255, 0.04) 100%
    ) !important;
    background-size: 200% 100% !important;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 4px;
}

.is-loading .article-hero-caption {
    color: transparent !important;
    background: rgba(255, 255, 255, 0.02) !important;
}

.is-loading .article-tag {
    color: transparent !important;
    border-color: rgba(255, 255, 255, 0.04) !important;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.02) 0%,
        rgba(255, 255, 255, 0.06) 50%,
        rgba(255, 255, 255, 0.02) 100%
    ) !important;
    background-size: 200% 100% !important;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

/* ─── Breadcrumb ─── */
.is-loading .article-breadcrumb a,
.is-loading .article-breadcrumb span,
.is-loading .breadcrumb-current {
    color: transparent !important;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.10) 50%,
        rgba(255, 255, 255, 0.04) 100%
    ) !important;
    background-size: 200% 100% !important;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 3px;
}

/* ─── Rubric page ─── */
.is-loading .rubric-header-label,
.is-loading .rubric-title,
.is-loading .rubric-desc,
.is-loading .rubric-count {
    color: transparent !important;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.10) 50%,
        rgba(255, 255, 255, 0.04) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 6px;
}

.is-loading .rubric-filter {
    color: transparent !important;
    border-color: rgba(255, 255, 255, 0.04) !important;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.02) 0%,
        rgba(255, 255, 255, 0.06) 50%,
        rgba(255, 255, 255, 0.02) 100%
    ) !important;
    background-size: 200% 100% !important;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

.is-loading .feed-hero-rubric,
.is-loading .feed-hero-title,
.is-loading .feed-hero-meta,
.is-loading .feed-hero-meta span {
    color: transparent !important;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.10) 50%,
        rgba(255, 255, 255, 0.04) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 6px;
}

.is-loading .feed-list-rubric,
.is-loading .feed-list-title,
.is-loading .feed-list-meta {
    color: transparent !important;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.10) 50%,
        rgba(255, 255, 255, 0.04) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 4px;
}

.is-loading .feed-load-btn {
    color: transparent !important;
    border-color: rgba(255, 255, 255, 0.04) !important;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.02) 0%,
        rgba(255, 255, 255, 0.06) 50%,
        rgba(255, 255, 255, 0.02) 100%
    ) !important;
    background-size: 200% 100% !important;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

.is-loading .feed-load-btn svg {
    opacity: 0;
}

.is-loading .sidebar-rubrics-label,
.is-loading .sidebar-rubric-name,
.is-loading .sidebar-rubric-count {
    color: transparent !important;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.10) 50%,
        rgba(255, 255, 255, 0.04) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 4px;
}

/* ─── Footer ─── */
.is-loading .footer-divider {
    background: rgba(255, 255, 255, 0.03) !important;
}

/* ─── Плавное появление контента при снятии is-loading ─── */
@keyframes skeletonFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

body:not(.is-loading) .hero-img,
body:not(.is-loading) .featured-item-image,
body:not(.is-loading) .article-item-image,
body:not(.is-loading) .article-hero-img,
body:not(.is-loading) .feed-hero-img,
body:not(.is-loading) .feed-list-img,
body:not(.is-loading) .influencer-slide {
    animation: skeletonFadeIn 0.4s ease both;
}