/**
 * Skeleton Loaders - Perceived Performance Optimization
 * Shows loading placeholders while content loads
 * Critical for low-end devices and slow connections
 */

/* Base skeleton animation */
@keyframes skeleton-loading {
    0% { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
}

/* Skeleton base class */
.skeleton {
    background: linear-gradient(
        90deg,
        #EEF4F7 0%,
        #252525 50%,
        #EEF4F7 100%
    );
    background-size: 200px 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 4px;
    color: transparent !important;
    pointer-events: none;
    user-select: none;
}

/* Product card skeleton */
.skeleton-product-card {
    display: block;
    background: #151515;
    border-radius: 8px;
    overflow: hidden;
}

.skeleton-product-image {
    width: 100%;
    aspect-ratio: 1;
    background: linear-gradient(
        90deg,
        #EEF4F7 0%,
        #252525 50%,
        #EEF4F7 100%
    );
    background-size: 200px 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
}

.skeleton-product-content {
    padding: 1rem;
}

.skeleton-product-title {
    height: 20px;
    width: 80%;
    margin-bottom: 0.5rem;
    background: linear-gradient(
        90deg,
        #EEF4F7 0%,
        #252525 50%,
        #EEF4F7 100%
    );
    background-size: 200px 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 4px;
}

.skeleton-product-price {
    height: 18px;
    width: 60%;
    background: linear-gradient(
        90deg,
        #EEF4F7 0%,
        #252525 50%,
        #EEF4F7 100%
    );
    background-size: 200px 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 4px;
}

/* Text skeletons */
.skeleton-text {
    height: 16px;
    margin-bottom: 0.5rem;
    background: linear-gradient(
        90deg,
        #EEF4F7 0%,
        #252525 50%,
        #EEF4F7 100%
    );
    background-size: 200px 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 4px;
}

.skeleton-text.short { width: 40%; }
.skeleton-text.medium { width: 60%; }
.skeleton-text.long { width: 90%; }
.skeleton-text.full { width: 100%; }

/* Image skeleton */
.skeleton-image {
    background: linear-gradient(
        90deg,
        #EEF4F7 0%,
        #252525 50%,
        #EEF4F7 100%
    );
    background-size: 200px 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
}

/* Avatar skeleton */
.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(
        90deg,
        #EEF4F7 0%,
        #252525 50%,
        #EEF4F7 100%
    );
    background-size: 200px 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
}

/* Button skeleton */
.skeleton-button {
    height: 40px;
    width: 120px;
    border-radius: 4px;
    background: linear-gradient(
        90deg,
        #EEF4F7 0%,
        #252525 50%,
        #EEF4F7 100%
    );
    background-size: 200px 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
}

/* When content is loaded - hide skeleton */
.loaded .skeleton,
.skeleton.loaded {
    animation: none;
    background: transparent;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .skeleton {
        animation: none;
        background: #252525;
    }
}

/* Low-end device optimization */
@media (max-width: 480px) {
    .skeleton {
        animation-duration: 2s; /* Slower animation to save battery */
    }
}