/**
 * ============================================================================
 * GudStories Framework
 * ============================================================================
 *
 * File
 * ----
 * gs-framework-animations.css
 *
 * Version
 * -------
 * 1.0.0
 *
 * Status
 * ------
 * FRAMEWORK FOUNDATION
 *
 * Purpose
 * -------
 * Universal Animation Engine.
 *
 * Used By
 * -------
 * Search
 * Home
 * Rails
 * Cards
 * Universe
 * Galaxy
 * Player
 * My List
 * Continue Journey
 * Recommendations
 *
 * ============================================================================
 */


/* ==========================================================================
   Fade In
   ========================================================================== */

.gs-fade-in{

    animation:
        gsFadeIn
        .30s ease forwards;

}

@keyframes gsFadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}


/* ==========================================================================
   Fade Out
   ========================================================================== */

.gs-fade-out{

    animation:
        gsFadeOut
        .25s ease forwards;

}

@keyframes gsFadeOut{

    from{

        opacity:1;

    }

    to{

        opacity:0;

    }

}


/* ==========================================================================
   Slide Up
   ========================================================================== */

.gs-slide-up{

    animation:
        gsSlideUp
        .35s ease forwards;

}

@keyframes gsSlideUp{

    from{

        opacity:0;

        transform:
            translateY(30px);

    }

    to{

        opacity:1;

        transform:
            translateY(0);

    }

}


/* ==========================================================================
   Slide Down
   ========================================================================== */

.gs-slide-down{

    animation:
        gsSlideDown
        .35s ease forwards;

}

@keyframes gsSlideDown{

    from{

        opacity:0;

        transform:
            translateY(-30px);

    }

    to{

        opacity:1;

        transform:
            translateY(0);

    }

}


/* ==========================================================================
   Zoom In
   ========================================================================== */

.gs-zoom-in{

    animation:
        gsZoomIn
        .30s ease forwards;

}

@keyframes gsZoomIn{

    from{

        opacity:0;

        transform:
            scale(.90);

    }

    to{

        opacity:1;

        transform:
            scale(1);

    }

}


/* ==========================================================================
   Zoom Out
   ========================================================================== */

.gs-zoom-out{

    animation:
        gsZoomOut
        .30s ease forwards;

}

@keyframes gsZoomOut{

    from{

        opacity:1;

        transform:
            scale(1);

    }

    to{

        opacity:0;

        transform:
            scale(.90);

    }

}


/* ==========================================================================
   Hover Lift
   ========================================================================== */

.gs-hover-lift{

    transition:
        transform var(--gs-transition-fast),
        box-shadow var(--gs-transition-fast);

}

.gs-hover-lift:hover{

    transform:
        translateY(-6px);

    box-shadow:
        var(--gs-shadow-lg);

}


/* ==========================================================================
   Hover Grow
   ========================================================================== */

.gs-hover-grow{

    transition:
        transform var(--gs-transition-fast);

}

.gs-hover-grow:hover{

    transform:
        scale(1.04);

}


/* ==========================================================================
   Netflix Expand
   ========================================================================== */

.gs-hover-expand{

    transition:
        transform .25s ease;

}

.gs-hover-expand:hover{

    transform:
        scale(1.08);

    z-index:20;

}


/* ==========================================================================
   Pulse
   ========================================================================== */

.gs-pulse{

    animation:
        gsPulse
        2s infinite;

}

@keyframes gsPulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.05);

    }

    100%{

        transform:scale(1);

    }

}


/* ==========================================================================
   Spin
   ========================================================================== */

.gs-spin{

    animation:
        gsSpin
        1s linear infinite;

}

@keyframes gsSpin{

    from{

        transform:
            rotate(0deg);

    }

    to{

        transform:
            rotate(360deg);

    }

}


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

.gs-shimmer{

    position:relative;

    overflow:hidden;

}

.gs-shimmer::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.18),

            transparent

        );

    animation:
        gsShimmer
        1.5s infinite;

}

@keyframes gsShimmer{

    from{

        transform:
            translateX(-100%);

    }

    to{

        transform:
            translateX(100%);

    }

}


/* ==========================================================================
   Overlay Blur
   ========================================================================== */

.gs-overlay-blur{

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

}


/* ==========================================================================
   Disable Motion
   ========================================================================== */

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

    *{

        animation:none !important;

        transition:none !important;

    }

}