/*
 * Skeleton Loading Styles
 * Story 2.3: Skeleton Loading Screens
 *
 * Provides animated skeleton placeholders for loading states.
 * Uses shimmer animation to indicate activity.
 */

/* Base skeleton element */
.skeleton {
    background: linear-gradient(
        90deg,
        #e0e0e0 0%,
        #f0f0f0 50%,
        #e0e0e0 100%
    );
    background-size: 200% 100%;
    animation: shimmer 2s ease-in-out infinite;
    will-change: background-position;
    border-radius: 4px;
}

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

/* Skeleton variants */
.skeleton-text {
    height: 20px;
}

.skeleton-badge {
    height: 28px;
    border-radius: 14px;
}

.skeleton-button {
    height: 32px;
    border-radius: 4px;
}

/* Skeleton row styling */
.skeleton-row {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Screen reader only class (accessibility) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .skeleton {
        animation: none;
        background: #e0e0e0;
    }

    .skeleton-row {
        animation: none;
    }
}