/**
 * ===================================
 * GunCult UI Kit - Skeleton Loaders
 * ===================================
 * 
 * Скелетоны для отображения загрузки
 */

/* Base skeleton */
.gc-skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-content-secondary) 0%,
        var(--bg-content-main) 50%,
        var(--bg-content-secondary) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
    border-radius: 8px;
    display: inline-block;
    width: 100%;
}

@keyframes skeleton-pulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Disable animation if user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
    .gc-skeleton {
        animation: none;
        background: var(--bg-content-secondary);
    }
}

/* ===================================
   Text Skeletons
   =================================== */

.gc-skeleton-text {
    height: 1rem;
    margin-bottom: 0.5rem;
}

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

/* Text sizes */
.gc-skeleton-text-xs {
    height: 0.75rem;
}

.gc-skeleton-text-sm {
    height: 0.875rem;
}

.gc-skeleton-text-md {
    height: 1rem;
}

.gc-skeleton-text-lg {
    height: 1.25rem;
}

.gc-skeleton-text-xl {
    height: 1.5rem;
}

/* Text with random widths */
.gc-skeleton-text-short {
    width: 40%;
}

.gc-skeleton-text-medium {
    width: 60%;
}

.gc-skeleton-text-long {
    width: 80%;
}

.gc-skeleton-text-full {
    width: 100%;
}

/* ===================================
   Heading Skeletons
   =================================== */

.gc-skeleton-heading {
    height: 2rem;
    width: 60%;
    margin-bottom: 1rem;
    border-radius: 8px;
}

.gc-skeleton-heading-sm {
    height: 1.5rem;
    width: 50%;
}

.gc-skeleton-heading-lg {
    height: 2.5rem;
    width: 70%;
}

/* ===================================
   Avatar Skeletons
   =================================== */

.gc-skeleton-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.gc-skeleton-avatar-sm {
    width: 32px;
    height: 32px;
}

.gc-skeleton-avatar-lg {
    width: 64px;
    height: 64px;
}

.gc-skeleton-avatar-xl {
    width: 96px;
    height: 96px;
}

/* Круглый скелетон (универсальный) */
.gc-skeleton-circle {
    border-radius: 50%;
}

/* ===================================
   Image/Thumbnail Skeletons
   =================================== */

.gc-skeleton-image {
    width: 100%;
    padding-top: 56.25%; /* 16:9 aspect ratio */
    border-radius: 12px;
    position: relative;
}

.gc-skeleton-image-square {
    padding-top: 100%; /* 1:1 aspect ratio */
}

.gc-skeleton-image-landscape {
    padding-top: 56.25%; /* 16:9 aspect ratio */
}

.gc-skeleton-image-portrait {
    padding-top: 133.33%; /* 3:4 aspect ratio */
}

/* ===================================
   Button Skeletons
   =================================== */

.gc-skeleton-button {
    height: 44px;
    width: 120px;
    border-radius: 10px;
}

.gc-skeleton-button-sm {
    height: 36px;
    width: 100px;
}

.gc-skeleton-button-lg {
    height: 52px;
    width: 140px;
}

.gc-skeleton-button-full {
    width: 100%;
}

/* ===================================
   Card Skeleton
   =================================== */

.gc-skeleton-card {
    background: var(--bg-content-main);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 1.5rem;
}

.gc-skeleton-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.gc-skeleton-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.gc-skeleton-card-footer {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-primary);
}

/* ===================================
   List Item Skeleton
   =================================== */

.gc-skeleton-list-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-content-main);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    margin-bottom: 0.75rem;
}

.gc-skeleton-list-item:last-child {
    margin-bottom: 0;
}

.gc-skeleton-list-item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ===================================
   Table Skeleton
   =================================== */

.gc-skeleton-table {
    width: 100%;
}

.gc-skeleton-table-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid var(--border-primary);
}

.gc-skeleton-table-cell {
    height: 1rem;
}

/* ===================================
   Form Skeleton
   =================================== */

.gc-skeleton-input {
    height: 48px;
    border-radius: 10px;
    margin-bottom: 1rem;
}

.gc-skeleton-textarea {
    height: 120px;
    border-radius: 10px;
    margin-bottom: 1rem;
}

/* ===================================
   Pulse Variant (alternative animation)
   =================================== */

.gc-skeleton-pulse {
    animation: skeleton-fade 1.5s ease-in-out infinite;
}

@keyframes skeleton-fade {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ===================================
   Wave Variant
   =================================== */

.gc-skeleton-wave {
    position: relative;
    overflow: hidden;
}

.gc-skeleton-wave::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 100%
    );
    animation: skeleton-wave 1.5s ease-in-out infinite;
}

@keyframes skeleton-wave {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Example HTML - Card Skeleton:
<div class="gc-skeleton-card">
    <div class="gc-skeleton-card-header">
        <div class="gc-skeleton gc-skeleton-avatar"></div>
        <div style="flex: 1;">
            <div class="gc-skeleton gc-skeleton-text"></div>
            <div class="gc-skeleton gc-skeleton-text gc-skeleton-text-short"></div>
        </div>
    </div>
    <div class="gc-skeleton-card-body">
        <div class="gc-skeleton gc-skeleton-heading"></div>
        <div class="gc-skeleton gc-skeleton-text"></div>
        <div class="gc-skeleton gc-skeleton-text"></div>
        <div class="gc-skeleton gc-skeleton-text gc-skeleton-text-medium"></div>
    </div>
    <div class="gc-skeleton-card-footer">
        <div class="gc-skeleton gc-skeleton-button"></div>
        <div class="gc-skeleton gc-skeleton-button gc-skeleton-button-sm"></div>
    </div>
</div>

Example - List Item Skeleton:
<div class="gc-skeleton-list-item">
    <div class="gc-skeleton gc-skeleton-avatar"></div>
    <div class="gc-skeleton-list-item-content">
        <div class="gc-skeleton gc-skeleton-text"></div>
        <div class="gc-skeleton gc-skeleton-text gc-skeleton-text-short"></div>
    </div>
</div>
*/