/* ==========================================================================
   BigDisha Skeleton Loading System Framework
   Boneyard-Inspired CSS Utilities & Zero-CLS Layout Rules
   ========================================================================== */

:root {
    --bd-skeleton-base: #e2e8f0;
    --bd-skeleton-highlight: #f1f5f9;
    --bd-skeleton-radius: 12px;
}

html[data-theme="dark"] {
    --bd-skeleton-base: #1e293b;
    --bd-skeleton-highlight: #334155;
}

/* System default dark scheme auto overrides disabled */

/* Base Skeleton Pulse & Shimmer Animation */
.bd-skeleton {
    position: relative;
    overflow: hidden;
    background-color: var(--bd-skeleton-base);
    border-radius: var(--bd-skeleton-radius);
    pointer-events: none !important;
    user-select: none !important;
    display: block;
}

.bd-skeleton::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0.4) 20%,
        rgba(255, 255, 255, 0.6) 60%,
        rgba(255, 255, 255, 0)
    );
    animation: bdShimmer 2s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

html[data-theme="dark"] .bd-skeleton::after {
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0.04) 20%,
        rgba(255, 255, 255, 0.08) 60%,
        rgba(255, 255, 255, 0)
    );
}



@keyframes bdShimmer {
    100% {
        transform: translateX(100%);
    }
}

/* Reduced Motion Override for Accessibility */
@media (prefers-reduced-motion: reduce) {
    .bd-skeleton::after {
        animation: none !important;
        background: transparent !important;
    }
    
    .bd-skeleton {
        animation: bdPulseReduced 2s infinite ease-in-out !important;
    }
}

@keyframes bdPulseReduced {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* Specialized Skeleton Element Primitives */
.bd-skeleton-text {
    height: 14px;
    margin-bottom: 10px;
    border-radius: 6px;
}

.bd-skeleton-text:last-child {
    margin-bottom: 0;
}

.bd-skeleton-title {
    height: 28px;
    margin-bottom: 16px;
    border-radius: 8px;
}

.bd-skeleton-heading {
    height: 42px;
    margin-bottom: 20px;
    border-radius: 10px;
}

.bd-skeleton-badge {
    height: 24px;
    width: 120px;
    border-radius: 9999px;
    margin-bottom: 16px;
    display: inline-block;
}

.bd-skeleton-btn {
    height: 46px;
    width: 140px;
    border-radius: var(--bd-radius, 24px);
    display: inline-block;
}

.bd-skeleton-circle {
    border-radius: 50% !important;
    flex-shrink: 0;
}

.bd-skeleton-img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

.bd-skeleton-input {
    height: 46px;
    width: 100%;
    border-radius: 10px;
}

/* Varying Line Width Helpers for Realistic Article & Paragraph Text */
.bd-w-100 { width: 100%; }
.bd-w-96  { width: 96%; }
.bd-w-88  { width: 88%; }
.bd-w-75  { width: 75%; }
.bd-w-72  { width: 72%; }
.bd-w-60  { width: 60%; }
.bd-w-50  { width: 50%; }
.bd-w-40  { width: 40%; }
.bd-w-30  { width: 30%; }

/* Card Container Skeleton Shell */
.bd-skeleton-card {
    background: var(--bd-card-bg);
    border: 1px solid var(--bd-border);
    border-radius: var(--bd-radius);
    padding: 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Progressive Image Aspect Ratio Wrapper (Zero CLS) */
.bd-img-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: var(--bd-skeleton-base);
    border-radius: inherit;
}

.bd-img-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.bd-img-wrapper img.bd-img-loaded {
    opacity: 1;
}

.bd-img-wrapper.bd-img-loaded .bd-skeleton {
    display: none !important;
}

/* Aspect Ratio Utility Classes */
.aspect-16-9 { aspect-ratio: 16 / 9; }
.aspect-4-3  { aspect-ratio: 4 / 3; }
.aspect-1-1  { aspect-ratio: 1 / 1; }
.aspect-21-9 { aspect-ratio: 21 / 9; }