/**
 * ============================================================================
 * GudStories Framework
 * ============================================================================
 *
 * File
 * ----
 * gs-framework-effects.css
 *
 * Version
 * -------
 * 1.0.0
 *
 * Status
 * ------
 * FRAMEWORK FOUNDATION
 *
 * Purpose
 * -------
 * Universal Visual Effects Engine.
 *
 * Used By
 * -------
 * Search
 * Home
 * Hero
 * Cards
 * Rails
 * Player
 * Dialogs
 * Overlays
 * Profile
 * Kids
 *
 * ============================================================================
 */


/* ==========================================================================
   Glass Effect
   ========================================================================== */

.gs-glass{

    background:rgba(18,32,27,.72);

    backdrop-filter:blur(18px);

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

    border:1px solid rgba(255,255,255,.08);

}


/* ==========================================================================
   Frosted Glass
   ========================================================================== */

.gs-frost{

    background:rgba(255,255,255,.06);

    backdrop-filter:blur(24px);

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

}


/* ==========================================================================
   Blur Background
   ========================================================================== */

.gs-blur{

    backdrop-filter:blur(10px);

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

}


/* ==========================================================================
   Cinematic Gradient
   ========================================================================== */

.gs-gradient-dark{

    background:

        linear-gradient(

            to top,

            rgba(0,0,0,.92),

            rgba(0,0,0,.45),

            rgba(0,0,0,0)

        );

}


/* ==========================================================================
   Hero Gradient
   ========================================================================== */

.gs-gradient-hero{

    background:

        linear-gradient(

            180deg,

            rgba(0,0,0,.10),

            rgba(0,0,0,.45),

            rgba(0,0,0,.90)

        );

}


/* ==========================================================================
   Left Gradient
   ========================================================================== */

.gs-gradient-left{

    background:

        linear-gradient(

            90deg,

            rgba(0,0,0,.88),

            rgba(0,0,0,0)

        );

}


/* ==========================================================================
   Right Gradient
   ========================================================================== */

.gs-gradient-right{

    background:

        linear-gradient(

            270deg,

            rgba(0,0,0,.88),

            rgba(0,0,0,0)

        );

}


/* ==========================================================================
   Primary Glow
   ========================================================================== */

.gs-glow{

    box-shadow:

        0 0 30px rgba(95,143,123,.45);

}


/* ==========================================================================
   Strong Glow
   ========================================================================== */

.gs-glow-lg{

    box-shadow:

        0 0 60px rgba(95,143,123,.60);

}


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

.gs-text-glow{

    text-shadow:

        0 0 10px rgba(95,143,123,.40);

}


/* ==========================================================================
   Elevation
   ========================================================================== */

.gs-elevation-1{

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

}

.gs-elevation-2{

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

}

.gs-elevation-3{

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

}

.gs-elevation-4{

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

}


/* ==========================================================================
   Image Darken
   ========================================================================== */

.gs-image-dark{

    position:relative;

}

.gs-image-dark::after{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.28);

    pointer-events:none;

}


/* ==========================================================================
   Image Vignette
   ========================================================================== */

.gs-image-vignette{

    position:relative;

}

.gs-image-vignette::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(

            circle,

            transparent 45%,

            rgba(0,0,0,.55) 100%

        );

    pointer-events:none;

}


/* ==========================================================================
   Spotlight
   ========================================================================== */

.gs-spotlight{

    position:relative;

    overflow:hidden;

}

.gs-spotlight::before{

    content:"";

    position:absolute;

    inset:-100%;

    background:

        radial-gradient(

            circle,

            rgba(255,255,255,.08),

            transparent 70%

        );

    pointer-events:none;

}


/* ==========================================================================
   Divider
   ========================================================================== */

.gs-divider{

    width:100%;

    height:1px;

    background:rgba(255,255,255,.08);

}


/* ==========================================================================
   Overlay Mask
   ========================================================================== */

.gs-mask{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.45);

}


/* ==========================================================================
   Rail Edge Fade
   ========================================================================== */

.gs-edge-fade{

    position:relative;

}

.gs-edge-fade::before,

.gs-edge-fade::after{

    content:"";

    position:absolute;

    top:0;

    bottom:0;

    width:80px;

    pointer-events:none;

    z-index:2;

}

.gs-edge-fade::before{

    left:0;

    background:

        linear-gradient(

            to right,

            var(--gs-color-background),

            transparent

        );

}

.gs-edge-fade::after{

    right:0;

    background:

        linear-gradient(

            to left,

            var(--gs-color-background),

            transparent

        );

}


/* ==========================================================================
   Hero Shadow
   ========================================================================== */

.gs-hero-shadow{

    box-shadow:

        inset 0 -140px 120px rgba(0,0,0,.75);

}


/* ==========================================================================
   Hover Glow
   ========================================================================== */

.gs-hover-glow{

    transition:

        box-shadow var(--gs-transition-fast),

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

}

.gs-hover-glow:hover{

    transform:translateY(-4px);

    box-shadow:

        0 0 30px rgba(95,143,123,.35);

}


/* ==========================================================================
   Cinematic Depth
   ========================================================================== */

.gs-depth{

    transform:translateZ(0);

    will-change:transform;

}