/**
 * ============================================================================
 * GudStories Framework
 * ============================================================================
 *
 * File
 * ----
 * gs-framework-skeleton.css
 *
 * Version
 * -------
 * 1.0.0
 *
 * Status
 * ------
 * OTT FRAMEWORK
 *
 * Purpose
 * -------
 * Universal Skeleton Loading Engine.
 *
 * Used By
 * -------
 * Home
 * Search
 * Rails
 * Stories
 * Universes
 * Galaxies
 * Continue Journey
 * My List
 * Profile
 * Player
 *
 * ============================================================================
 */


/* ==========================================================================
   Base Skeleton
   ========================================================================== */

.gs-skeleton{

    position:relative;

    overflow:hidden;

    background:var(--gs-color-surface);

    border-radius:var(--gs-radius-md);

}


/* ==========================================================================
   Universal Shimmer
   ========================================================================== */

.gs-skeleton::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            90deg,

            transparent 0%,

            rgba(255,255,255,.12) 50%,

            transparent 100%

        );

    transform:translateX(-100%);

    animation:

        gsSkeletonShimmer

        1.4s infinite;

}


@keyframes gsSkeletonShimmer{

    from{

        transform:translateX(-100%);

    }

    to{

        transform:translateX(100%);

    }

}


/* ==========================================================================
   Hero Skeleton
   ========================================================================== */

.gs-skeleton-hero{

    width:100%;

    height:520px;

    border-radius:var(--gs-radius-xl);

}


/* ==========================================================================
   Rail Skeleton
   ========================================================================== */

.gs-skeleton-rail{

    display:flex;

    gap:var(--gs-space-4);

    overflow:hidden;

}


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

.gs-skeleton-card{

    width:240px;

    flex-shrink:0;

}


/* ==========================================================================
   Poster Skeleton
   ========================================================================== */

.gs-skeleton-poster{

    width:100%;

    aspect-ratio:16/9;

    border-radius:var(--gs-radius-lg);

}


/* ==========================================================================
   Square Skeleton
   ========================================================================== */

.gs-skeleton-square{

    aspect-ratio:1/1;

}


/* ==========================================================================
   Circle Skeleton
   ========================================================================== */

.gs-skeleton-circle{

    width:60px;

    height:60px;

    border-radius:50%;

}


/* ==========================================================================
   Title
   ========================================================================== */

.gs-skeleton-title{

    height:18px;

    width:75%;

    margin-top:var(--gs-space-3);

}


/* ==========================================================================
   Subtitle
   ========================================================================== */

.gs-skeleton-subtitle{

    height:14px;

    width:50%;

    margin-top:var(--gs-space-2);

}


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

.gs-skeleton-text{

    height:12px;

    width:100%;

    margin-top:var(--gs-space-2);

}

.gs-skeleton-text-short{

    width:65%;

}


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

.gs-skeleton-button{

    width:120px;

    height:42px;

    margin-top:var(--gs-space-4);

    border-radius:var(--gs-radius-round);

}


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

.gs-skeleton-avatar{

    width:80px;

    height:80px;

    border-radius:50%;

}


/* ==========================================================================
   Search Result
   ========================================================================== */

.gs-skeleton-search{

    display:flex;

    gap:var(--gs-space-4);

    padding:var(--gs-space-4);

}

.gs-skeleton-search-image{

    width:160px;

    aspect-ratio:16/9;

    border-radius:var(--gs-radius-md);

}

.gs-skeleton-search-content{

    flex:1;

}


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

.gs-skeleton-list{

    display:flex;

    align-items:center;

    gap:var(--gs-space-3);

    padding:var(--gs-space-3) 0;

}


/* ==========================================================================
   Hide Overflow
   ========================================================================== */

.gs-skeleton-wrapper{

    overflow:hidden;

}


/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion:reduce){

    .gs-skeleton::after{

        animation:none;

    }

}