/* ========================================
   True Skeleton Loaders
   Google/Apple/Microsoft inspired content placeholders
   ======================================== */

/* CSS Variables */
:root {
    --skeleton-base: #e5e7eb;
    --skeleton-shine: #f3f4f6;
}

[data-theme="dark"] {
    --skeleton-base: #27272a;
    --skeleton-shine: #3f3f46;
}

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

    100% {
        background-position: 200% 0;
    }
}

/* Core skeleton element */
.skeleton {
    background: linear-gradient(90deg,
            var(--skeleton-base) 0%,
            var(--skeleton-shine) 50%,
            var(--skeleton-base) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: 8px;
}

/* ========================================
   Skeleton Shapes
   ======================================== */

/* Text lines */
.skeleton-text {
    height: 16px;
    margin-bottom: 12px;
    border-radius: 4px;
}

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

.skeleton-text.sm {
    height: 12px;
}

.skeleton-text.lg {
    height: 20px;
}

.skeleton-text.w-25 {
    width: 25%;
}

.skeleton-text.w-50 {
    width: 50%;
}

.skeleton-text.w-75 {
    width: 75%;
}

.skeleton-text.w-100 {
    width: 100%;
}

/* Headings */
.skeleton-heading {
    height: 32px;
    width: 60%;
    margin-bottom: 16px;
    border-radius: 6px;
}

.skeleton-heading.sm {
    height: 24px;
}

.skeleton-heading.lg {
    height: 48px;
}

/* Paragraph block */
.skeleton-paragraph {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.skeleton-paragraph .skeleton-text:nth-child(1) {
    width: 100%;
}

.skeleton-paragraph .skeleton-text:nth-child(2) {
    width: 95%;
}

.skeleton-paragraph .skeleton-text:nth-child(3) {
    width: 85%;
}

.skeleton-paragraph .skeleton-text:nth-child(4) {
    width: 70%;
}

/* Circular avatars */
.skeleton-avatar {
    border-radius: 50%;
    flex-shrink: 0;
}

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

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

.skeleton-avatar.md {
    width: 56px;
    height: 56px;
}

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

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

/* Rectangle images */
.skeleton-image {
    width: 100%;
    border-radius: 12px;
}

.skeleton-image.ratio-16-9 {
    aspect-ratio: 16/9;
}

.skeleton-image.ratio-4-3 {
    aspect-ratio: 4/3;
}

.skeleton-image.ratio-1-1 {
    aspect-ratio: 1/1;
}

.skeleton-image.ratio-3-4 {
    aspect-ratio: 3/4;
}

/* Buttons */
.skeleton-button {
    height: 44px;
    width: 140px;
    border-radius: 8px;
}

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

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

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

/* Icons */
.skeleton-icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    flex-shrink: 0;
}

.skeleton-icon.sm {
    width: 16px;
    height: 16px;
}

.skeleton-icon.lg {
    width: 32px;
    height: 32px;
}

/* ========================================
   Skeleton Layouts
   ======================================== */

/* Horizontal row with items */
.skeleton-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Card skeleton */
.skeleton-card {
    background: var(--color-bg, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Grid of cards */
.skeleton-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

/* List items */
.skeleton-list-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.skeleton-list-item:last-child {
    border-bottom: none;
}

.skeleton-list-item .skeleton-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ========================================
   Page-Specific Skeletons
   ======================================== */

/* Hero section skeleton */
.skeleton-hero {
    padding: 80px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
}

.skeleton-hero .skeleton-heading {
    width: 50%;
    height: 48px;
}

.skeleton-hero .skeleton-text {
    width: 60%;
}

.skeleton-hero .skeleton-buttons {
    display: flex;
    gap: 16px;
    margin-top: 16px;
}

/* Navigation skeleton */
.skeleton-nav {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 16px 0;
}

.skeleton-nav-item {
    width: 80px;
    height: 16px;
    border-radius: 4px;
}

/* Gallery skeleton */
.skeleton-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.skeleton-gallery-item {
    aspect-ratio: 1;
    border-radius: 12px;
}

/* Form skeleton */
.skeleton-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.skeleton-input {
    height: 52px;
    border-radius: 8px;
}

.skeleton-textarea {
    height: 120px;
    border-radius: 8px;
}

/* ========================================
   Transition & Visibility
   ======================================== */

/* Skeleton wrapper - hidden when content loads */
.skeleton-wrapper {
    transition: opacity 0.3s ease;
}

.skeleton-wrapper.fade-out {
    opacity: 0;
    pointer-events: none;
}

/* Actual content - hidden initially, fades in */
.skeleton-content-actual {
    opacity: 0;
    transition: opacity 0.4s ease;
}

.skeleton-content-actual.visible {
    opacity: 1;
}

/* Alternative: hide skeleton when sibling has content */
[data-skeleton-for]:not(:empty)+.skeleton-wrapper,
.has-content+.skeleton-wrapper {
    display: none;
}

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 768px) {
    .skeleton-grid {
        grid-template-columns: 1fr;
    }

    .skeleton-gallery {
        grid-template-columns: repeat(2, 1fr);
    }

    .skeleton-hero .skeleton-heading {
        width: 80%;
    }

    .skeleton-hero .skeleton-text {
        width: 90%;
    }

    .skeleton-hero .skeleton-buttons {
        flex-direction: column;
        width: 100%;
    }

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

@media (max-width: 480px) {
    .skeleton-gallery {
        grid-template-columns: 1fr;
    }
}