/* 
 * DZone Premium Skeleton Loading Suite 
 * Modernizing the loading experience with shimmer effects and fluid scaling
 */

:root {
    --skel-base: #f3f3f3;
    --skel-highlight: #fafafa;
    --skel-speed: 2s;
}

/* 1. High-Fidelity Shimmer Animation */
@keyframes skeleton-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.skeleton {
    background-color: var(--skel-base);
    position: relative;
    overflow: hidden;
    border-radius: 12px; /* Standardizing with our modern theme */
    display: block;
}

.skeleton::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0.4) 20%,
        rgba(255, 255, 255, 0.7) 60%,
        rgba(255, 255, 255, 0)
    );
    animation: skeleton-shimmer var(--skel-speed) infinite;
}

/* 2. Fluid Layout Skeletons */
.skeleton-banner {
    width: 100%;
    aspect-ratio: 21 / 9; /* Modern aspect ratio for hero areas */
    min-height: 300px;
}

@media (max-width: 767px) {
    .skeleton-banner { aspect-ratio: 4 / 3; }
}

.skeleton-category {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 20px;
}

.skeleton-product {
    padding: 15px;
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 20px;
}

.skeleton-product-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    margin-bottom: 15px;
}

.skeleton-product-title {
    width: 90%;
    height: 1.2rem;
    margin-bottom: 10px;
}

.skeleton-product-price {
    width: 40%;
    height: 1rem;
}

/* 3. Logic Zoning Skeletons */
.skeleton-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    background: #fff;
    border-radius: 20px;
    border: 1px solid #f5f5f5;
}

.skeleton-filter-title {
    width: 120px;
    height: 1.5rem;
    margin-bottom: 16px;
}

.skeleton-filter-item {
    width: 100%;
    height: 1.2rem;
    margin-bottom: 8px;
    opacity: 0.6;
}

/* 4. Fluid Typography Skeletons */
.skeleton-title-lg { width: 60%; height: clamp(2rem, 5vw, 3rem); margin: 20px auto; }
.skeleton-text-md { width: 100%; height: 1rem; margin-bottom: 0.5rem; }