/*
|--------------------------------------------------------------------------
| FAJAR LIBRARY V2
| Inspiré de Netflix
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| HERO
|--------------------------------------------------------------------------
*/

.fajar-library-hero{

    position:relative;

    padding:70px 0 45px;

    overflow:hidden;

}

.fajar-library-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        rgba(9,13,23,.55),
        rgba(9,13,23,.96)
    );

    pointer-events:none;

}

.fajar-library-hero .fajar-container{

    position:relative;

    z-index:2;

}

.fajar-library-hero h1{

    margin:0;

    color:#FFF;

    font-size:52px;

    font-weight:800;

    letter-spacing:-1px;

}

.fajar-library-hero p{

    margin-top:18px;

    max-width:760px;

    color:#C9D2DD;

    font-size:18px;

    line-height:1.8;

}


/*
|--------------------------------------------------------------------------
| CONTENU
|--------------------------------------------------------------------------
*/

.fajar-library-content{

    position:relative;

    padding-bottom:100px;

}


/*
|--------------------------------------------------------------------------
| ROW
|--------------------------------------------------------------------------
*/

.fajar-content-row{

    margin-bottom:55px;

}

.fajar-content-row:last-child{

    margin-bottom:0;

}


/*
|--------------------------------------------------------------------------
| HEADER
|--------------------------------------------------------------------------
*/

.fajar-content-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:22px;

}

.fajar-content-header h2{

    margin:0;

    color:#FFF;

    font-size:32px;

    font-weight:700;

    letter-spacing:-.4px;

}

.fajar-content-header a{

    color:var(--fajar-gold);

    text-decoration:none;

    font-size:15px;

    font-weight:600;

    transition:.25s;

}

.fajar-content-header a:hover{

    opacity:.75;

}


/*
|--------------------------------------------------------------------------
| TRACK
|--------------------------------------------------------------------------
*/

.fajar-row-track{

    position:relative;

    overflow:hidden;

    width:100%;

}


/*
|--------------------------------------------------------------------------
| SLIDER
|--------------------------------------------------------------------------
*/

.fajar-content-slider{

    display:flex;

    align-items:stretch;

    gap:18px;

    overflow-x:auto;

    overflow-y:hidden;

    padding:10px 2px 18px;

    scroll-behavior:smooth;

    scroll-snap-type:x proximity;

    -webkit-overflow-scrolling:touch;

    scrollbar-width:none;

    cursor:grab;

    user-select:none;

}

.fajar-content-slider:active{

    cursor:grabbing;

}

.fajar-content-slider::-webkit-scrollbar{

    display:none;

}
/*
|--------------------------------------------------------------------------
| ITEM
|--------------------------------------------------------------------------
*/

.fajar-content-item{

    flex:0 0 320px;

    scroll-snap-align:start;

    position:relative;

    z-index:1;

}


/*
|--------------------------------------------------------------------------
| CARTE
|--------------------------------------------------------------------------
*/

.fajar-cover{

    position:relative;

    display:block;

    width:320px;

    text-decoration:none;

    transition:
        transform .28s ease,
        z-index .28s ease;

    transform-origin:center center;

}

.fajar-cover:hover{

    transform:scale(1.08);

    z-index:100;

}


/*
|--------------------------------------------------------------------------
| IMAGE
|--------------------------------------------------------------------------
*/

.fajar-cover-image{

    position:relative;

    overflow:hidden;

    border-radius:14px;

    background:#1F2937;

    aspect-ratio:16/9;

    box-shadow:

        0 8px 18px rgba(0,0,0,.35);

}

.fajar-cover-image img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    transition:

        transform .35s ease,

        filter .35s ease;

}

.fajar-cover:hover img{

    transform:scale(1.08);

    filter:brightness(.82);

}


/*
|--------------------------------------------------------------------------
| OVERLAY
|--------------------------------------------------------------------------
*/

.fajar-cover-overlay{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    padding:18px;

    background:

        linear-gradient(

            to top,

            rgba(0,0,0,.96),

            rgba(0,0,0,.70),

            rgba(0,0,0,.20),

            transparent

        );

    opacity:0;

    transition:

        opacity .28s ease,

        transform .28s ease;

    transform:translateY(10px);

}

.fajar-cover:hover .fajar-cover-overlay{

    opacity:1;

    transform:translateY(0);

}


/*
|--------------------------------------------------------------------------
| TITRE
|--------------------------------------------------------------------------
*/

.fajar-cover-overlay h3{

    margin:0;

    color:#FFF;

    font-size:18px;

    font-weight:700;

    line-height:1.35;

}


/*
|--------------------------------------------------------------------------
| AUTEUR
|--------------------------------------------------------------------------
*/

.fajar-cover-overlay p{

    margin:8px 0 0;

    color:#D4D4D4;

    font-size:14px;

}


/*
|--------------------------------------------------------------------------
| META
|--------------------------------------------------------------------------
*/

.fajar-cover-meta{

    display:flex;

    align-items:center;

    gap:14px;

    margin-top:14px;

    color:#DDD;

    font-size:13px;

}


/*
|--------------------------------------------------------------------------
| BOUTONS
|--------------------------------------------------------------------------
*/

.fajar-cover-buttons{

    display:flex;

    align-items:center;

    gap:10px;

    margin-top:18px;

}

.fajar-play-button{

    display:flex;

    align-items:center;

    justify-content:center;

    height:42px;

    min-width:140px;

    padding:0 18px;

    background:#FFFFFF;

    color:#111827;

    border-radius:8px;

    font-size:15px;

    font-weight:700;

    transition:.25s;

}

.fajar-play-button:hover{

    transform:translateY(-2px);

    background:#F3F4F6;

}
/*
|--------------------------------------------------------------------------
| EFFETS
|--------------------------------------------------------------------------
*/

.fajar-content-row:hover .fajar-content-item{

    z-index:1;

}

.fajar-content-item:hover{

    z-index:100;

}

.fajar-cover{

    will-change:transform;

    backface-visibility:hidden;

}

.fajar-cover-image{

    transition:

        transform .30s ease,

        box-shadow .30s ease,

        border-radius .30s ease;

}

.fajar-cover:hover .fajar-cover-image{

    box-shadow:

        0 18px 45px rgba(0,0,0,.45);

}


/*
|--------------------------------------------------------------------------
| ETAT VIDE
|--------------------------------------------------------------------------
*/

.fajar-empty-row{

    width:100%;

    padding:45px 30px;

    border-radius:14px;

    background:#172033;

    color:#C7D0DA;

    text-align:center;

    font-size:16px;

}


/*
|--------------------------------------------------------------------------
| SCROLL
|--------------------------------------------------------------------------
*/

.fajar-content-slider{

    scroll-padding-left:2px;

    scroll-padding-right:2px;

}

.fajar-content-slider>*:first-child{

    margin-left:2px;

}

.fajar-content-slider>*:last-child{

    margin-right:2px;

}


/*
|--------------------------------------------------------------------------
| RESPONSIVE TABLETTE
|--------------------------------------------------------------------------
*/

@media (max-width:1200px){

    .fajar-content-item{

        flex:0 0 290px;

    }

    .fajar-cover{

        width:290px;

    }

}


/*
|--------------------------------------------------------------------------
| RESPONSIVE MOBILE
|--------------------------------------------------------------------------
*/

@media (max-width:768px){

    .fajar-library-hero{

        padding:50px 0 35px;

    }

    .fajar-library-hero h1{

        font-size:38px;

    }

    .fajar-library-hero p{

        font-size:16px;

        line-height:1.7;

    }

    .fajar-content-header{

        margin-bottom:15px;

    }

    .fajar-content-header h2{

        font-size:24px;

    }

    .fajar-content-header a{

        font-size:14px;

    }

    .fajar-content-item{

        flex:0 0 240px;

    }

    .fajar-cover{

        width:240px;

    }

    .fajar-cover-overlay{

        opacity:1;

        transform:none;

        padding:14px;

        background:linear-gradient(
            to top,
            rgba(0,0,0,.88),
            rgba(0,0,0,.45),
            transparent
        );

    }

    .fajar-cover-overlay h3{

        font-size:16px;

    }

    .fajar-cover-overlay p{

        font-size:13px;

    }

    .fajar-cover-meta{

        font-size:12px;

        gap:10px;

    }

    .fajar-play-button{

        height:38px;

        font-size:14px;

    }

}
/*
|--------------------------------------------------------------------------
| ANIMATIONS
|--------------------------------------------------------------------------
*/

@keyframes fajarFadeUp{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.fajar-content-row{

    animation:fajarFadeUp .45s ease both;

}

.fajar-content-row:nth-child(2){

    animation-delay:.05s;

}

.fajar-content-row:nth-child(3){

    animation-delay:.10s;

}

.fajar-content-row:nth-child(4){

    animation-delay:.15s;

}

.fajar-content-row:nth-child(5){

    animation-delay:.20s;

}

.fajar-content-row:nth-child(6){

    animation-delay:.25s;

}


/*
|--------------------------------------------------------------------------
| PERFORMANCE
|--------------------------------------------------------------------------
*/

.fajar-row-track{

    contain:layout paint;

}

.fajar-content-slider{

    contain:layout;

}

.fajar-content-item{

    contain:layout paint;

}

.fajar-cover-image img{

    image-rendering:auto;

}


/*
|--------------------------------------------------------------------------
| FOCUS ACCESSIBILITÉ
|--------------------------------------------------------------------------
*/

.fajar-cover:focus{

    outline:none;

}

.fajar-cover:focus-visible{

    box-shadow:

        0 0 0 3px rgba(212,175,55,.35);

    border-radius:14px;

}

.fajar-play-button:focus-visible{

    outline:none;

    box-shadow:

        0 0 0 3px rgba(212,175,55,.35);

}


/*
|--------------------------------------------------------------------------
| HOVER PREMIUM
|--------------------------------------------------------------------------
*/

.fajar-content-slider:hover .fajar-cover{

    opacity:.82;

}

.fajar-content-slider:hover .fajar-cover:hover{

    opacity:1;

}

.fajar-content-slider:hover .fajar-cover:not(:hover){

    transform:scale(.97);

}


/*
|--------------------------------------------------------------------------
| SÉLECTION
|--------------------------------------------------------------------------
*/

.fajar-library-content ::selection{

    background:rgba(212,175,55,.35);

    color:#FFF;

}


/*
|--------------------------------------------------------------------------
| PRÉPARATION DES FUTURES ICÔNES
|--------------------------------------------------------------------------
*/

.fajar-cover-actions{

    display:flex;

    align-items:center;

    gap:8px;

    margin-top:14px;

}

.fajar-cover-action{

    width:38px;

    height:38px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

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

    color:#FFF;

    transition:.25s;

}

.fajar-cover-action:hover{

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

}


/*
|--------------------------------------------------------------------------
| PREMIUM
|--------------------------------------------------------------------------
*/

.fajar-premium-badge{

    position:absolute;

    top:12px;

    right:12px;

    z-index:5;

    padding:6px 12px;

    border-radius:999px;

    background:rgba(212,175,55,.95);

    color:#111827;

    font-size:11px;

    font-weight:700;

    letter-spacing:.4px;

    text-transform:uppercase;

}


/*
|--------------------------------------------------------------------------
| PROGRESSION
|--------------------------------------------------------------------------
*/

.fajar-progress{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:4px;

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

}

.fajar-progress span{

    display:block;

    height:100%;

    width:0;

    background:var(--fajar-gold);

}


/*
|--------------------------------------------------------------------------
| FIN
|--------------------------------------------------------------------------
*/