/**
 * Loading Skeleton Styles
 * Shows placeholder content while API data loads
 */

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

/* Base skeleton style */
.skeleton {
    background: linear-gradient(
        90deg,
        #f0f0f0 0px,
        #f8f8f8 40px,
        #f0f0f0 80px
    );
    background-size: 200px 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 4px;
}

/* Skeleton for large hero card */
.skeleton-hero-large {
    width: 100%;
    height: 400px;
    background: linear-gradient(
        90deg,
        #e0e0e0 0px,
        #f0f0f0 40px,
        #e0e0e0 80px
    );
    background-size: 200px 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 8px;
    position: relative;
}

/* Skeleton for small hero cards */
.skeleton-hero-small {
    width: 100%;
    height: 250px;
    background: linear-gradient(
        90deg,
        #e0e0e0 0px,
        #f0f0f0 40px,
        #e0e0e0 80px
    );
    background-size: 200px 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 8px;
}

/* Skeleton for side story items */
.skeleton-side-story {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.skeleton-side-story-image {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    background: linear-gradient(
        90deg,
        #e0e0e0 0px,
        #f0f0f0 40px,
        #e0e0e0 80px
    );
    background-size: 200px 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 4px;
}

.skeleton-side-story-content {
    flex: 1;
}

.skeleton-side-story-title {
    width: 100%;
    height: 16px;
    margin-bottom: 8px;
    background: linear-gradient(
        90deg,
        #e0e0e0 0px,
        #f0f0f0 40px,
        #e0e0e0 80px
    );
    background-size: 200px 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 4px;
}

.skeleton-side-story-meta {
    width: 60%;
    height: 12px;
    background: linear-gradient(
        90deg,
        #e0e0e0 0px,
        #f0f0f0 40px,
        #e0e0e0 80px
    );
    background-size: 200px 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 4px;
}

/* Skeleton for schedule cards */
.skeleton-schedule-card {
    width: 200px;
    height: 90px;
    background: linear-gradient(
        90deg,
        #f0f0f0 0px,
        #f8f8f8 40px,
        #f0f0f0 80px
    );
    background-size: 200px 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 8px;
    flex-shrink: 0;
}

/* Skeleton for video cards */
.skeleton-video-card {
    width: 320px;
    height: 240px;
    background: linear-gradient(
        90deg,
        #e0e0e0 0px,
        #f0f0f0 40px,
        #e0e0e0 80px
    );
    background-size: 200px 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 8px;
    flex-shrink: 0;
}

/* Skeleton for quick stats */
.skeleton-quick-stat {
    width: 130px;
    height: 80px;
    background: linear-gradient(
        90deg,
        #f0f0f0 0px,
        #f8f8f8 40px,
        #f0f0f0 80px
    );
    background-size: 200px 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 10px;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .skeleton-hero-large {
        height: 280px;
    }

    .skeleton-hero-small {
        height: 180px;
    }

    .skeleton-schedule-card {
        width: 200px;
        height: 100px;
    }

    .skeleton-video-card {
        width: 260px;
        height: 200px;
    }

    .skeleton-quick-stat {
        width: 110px;
        height: 64px;
    }
}

@media (max-width: 480px) {
    .skeleton-schedule-card {
        width: 160px;
        height: 90px;
    }

    .skeleton-video-card {
        width: 240px;
        height: 180px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .skeleton,
    .skeleton-hero-large,
    .skeleton-hero-small,
    .skeleton-side-story-image,
    .skeleton-side-story-title,
    .skeleton-side-story-meta,
    .skeleton-schedule-card,
    .skeleton-video-card,
    .skeleton-quick-stat {
        animation: none;
        background: #f0f0f0;
    }
}