/* ==========================================================
   FAFA - MUSIC LIBRARY
   ========================================================== */

:root{
    --music-width:900px;
    --music-radius:14px;
    --music-shadow:0 12px 30px rgba(0,0,0,.18);
    --music-red:#d60000;
    --music-speed:.35s;
}

/* ==========================================================
   GALLERY
   ========================================================== */

.musiclib-gallery{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:50px;
    margin:30px auto;
}

.musiclib-card{
    width:100%;
    max-width:var(--music-width);

    display:grid;

    grid-template-areas:
        "cover"
        "meta";
}

/* ==========================================================
   COVER
   ========================================================== */

.musiclib-cover{
    grid-area:cover;

    position:relative;

    width:100%;
    aspect-ratio:1;

    transition:opacity .35s ease;
}

.musiclib-cover img{

    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:opacity var(--music-speed);

    transform:translateZ(0);

    backface-visibility:hidden;

}

.musiclib-front{
    opacity:1;
    z-index:1;
}

.musiclib-back{
    opacity:0;
    z-index:2;
}

/* Desktop hover */

@media (hover:hover){

.musiclib-card[data-has-back="1"] .musiclib-cover:hover .musiclib-front,
.musiclib-card[data-has-back="1"] .musiclib-cover:focus-within .musiclib-front{

    opacity:0;

}

.musiclib-card[data-has-back="1"] .musiclib-cover:hover .musiclib-back,
.musiclib-card[data-has-back="1"] .musiclib-cover:focus-within .musiclib-back{

    opacity:1;

}

}

/* Mobiel */

.musiclib-card.musiclib-flipped .musiclib-front{

    opacity:0;

}

.musiclib-card.musiclib-flipped .musiclib-back{

    opacity:1;

}

/* ==========================================================
   PLAY BUTTON
   ========================================================== */

.musiclib-play{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:90px;
    height:90px;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.82);
    color:var(--music-red);
    font-size:42px;
    cursor:pointer;
    z-index:5;
    transition:.25s;
    box-shadow:0 5px 18px rgba(0,0,0,.25);
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 4px;   /* optisch centreren van ▶ */
}

.musiclib-play:hover{

    transform:translate(-50%,-50%) scale(1.08);

}

/* ==========================================================
   PLAYER
   ========================================================== */

.musiclib-player{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;
    align-items:center;

    background:#000;

    opacity:0;

    pointer-events:none;

    z-index:20;

    transition:opacity .3s;

}

.musiclib-player.musiclib-active{

    opacity:1;

    pointer-events:auto;

}

.musiclib-player iframe{

    width:100%;
    height:100%;

    border:0;

}

.musiclib-close{

    position:absolute;

    top:12px;
    right:12px;

    width:42px;
    height:42px;

    display:flex;

    justify-content:center;
    align-items:center;

    border-radius:50%;

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

    color:#fff;

    font-size:24px;

    cursor:pointer;

    z-index:30;

}

/* ==========================================================
   INFO
   ========================================================== */

.musiclib-meta{

    grid-area:meta;

    margin-top:18px;

    text-align:center;

}

.musiclib-title{

    font-size:30px;

    font-weight:700;

}

.musiclib-artist{

    margin-top:6px;

    font-size:18px;

    color:#666;

}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width:900px){

    .musiclib-gallery{
        gap:35px;
    }

    .musiclib-title{
        font-size:24px;
    }

}

@media (max-width:700px){

    .musiclib-play{

        width:72px;
        height:72px;

        font-size:32px;

    }

}