/*
#	Project: DevBlog / YtDevBlog - Multi-project developer changelog portal
#	Skeleton placeholder styles for lazy-loaded cover thumbnails.
#	This is NOT a freeware, use is subject to license terms.
#	Website: (injected by release brand: supixsoft.com | youtem.net)
#	Author: SupixSoft / Youtem
#	Copyright (C) 2026 SupixSoft / Youtem. All Rights Reserved.
*/

.dv-lazy-wrap,
.project-cover.has-lazy-cover,
.proj-cover-thumb-link.dv-lazy-wrap {
    position: relative;
    overflow: hidden;
}

.dv-skeleton {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(110deg, #e2e8f0 0%, #e2e8f0 35%, #f8fafc 50%, #e2e8f0 65%, #e2e8f0 100%);
    background-size: 220% 100%;
    animation: dv-skeleton-shine 1.15s ease-in-out infinite;
}

.dv-skeleton-thumb {
    border-radius: 6px;
}

.project-cover.has-lazy-cover .dv-skeleton {
    z-index: 0;
}

.project-cover.has-lazy-cover img.dv-lazy {
    position: relative;
    z-index: 1;
    background: transparent;
}

.project-cover.has-lazy-cover img.dv-lazy:not(.is-loaded),
.dv-lazy-wrap img.dv-lazy:not(.is-loaded) {
    opacity: 0;
}

.project-cover.has-lazy-cover img.dv-lazy.is-loaded,
.dv-lazy-wrap img.dv-lazy.is-loaded {
    opacity: 1;
    transition: opacity 0.32s ease;
}

.project-cover.has-lazy-cover.is-media-ready .dv-skeleton,
.dv-lazy-wrap.is-media-ready .dv-skeleton {
    opacity: 0;
    transition: opacity 0.28s ease;
}

.project-cover.has-lazy-cover.is-media-failed .dv-skeleton,
.dv-lazy-wrap.is-media-failed .dv-skeleton {
    animation: none;
    background: #e2e8f0;
    opacity: 1;
}

[data-theme="dark"] .dv-skeleton {
    background:
        linear-gradient(110deg, #1e293b 0%, #1e293b 35%, #334155 50%, #1e293b 65%, #1e293b 100%);
    background-size: 220% 100%;
}

[data-theme="dark"] .project-cover.has-lazy-cover.is-media-failed .dv-skeleton,
[data-theme="dark"] .dv-lazy-wrap.is-media-failed .dv-skeleton {
    background: #1e293b;
}

@keyframes dv-skeleton-shine {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .dv-skeleton {
        animation: none;
        background: #e2e8f0;
    }
    [data-theme="dark"] .dv-skeleton {
        background: #1e293b;
    }
    .project-cover.has-lazy-cover img.dv-lazy.is-loaded,
    .dv-lazy-wrap img.dv-lazy.is-loaded,
    .project-cover.has-lazy-cover.is-media-ready .dv-skeleton,
    .dv-lazy-wrap.is-media-ready .dv-skeleton {
        transition: none;
    }
}