/* css/components/skeleton.css */

/* Base Skeleton Block */
.skeleton-block {
    background: var(--bg-elevated);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.skeleton-block::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg, 
        transparent, 
        rgba(255, 255, 255, 0.05), 
        transparent
    );
    transform: translateX(-100%);
    animation: shimmer 1.5s infinite;
}

[data-theme="light"] .skeleton-block::after {
    background: linear-gradient(
        90deg, 
        transparent, 
        rgba(255, 255, 255, 0.4), 
        transparent
    );
}

/* Specific Skeleton Shapes */
.skeleton-text {
    height: 1.2rem;
    margin-bottom: var(--sp-1);
    border-radius: 4px;
}

.skeleton-text.title {
    height: 2rem;
    width: 60%;
    margin-bottom: var(--sp-2);
}

.skeleton-text.short {
    width: 40%;
}

.skeleton-card {
    aspect-ratio: 4 / 5;
    border-radius: 16px;
}

.skeleton-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}
.error-state {
    text-align: center;
    padding: var(--sp-6) var(--sp-4);
    max-width: 480px;
    margin-inline: auto;
}
.error-icon { font-size: 2rem; margin-bottom: var(--sp-2); }
.fade-in { animation: fadeIn 0.4s ease forwards; }