/* ===========================
   INTEREST CARD
=========================== */

.interest-card{

    position:relative;

    width:100%;
    height:650px;

    background:#FFF8E6;

    background-image:
        radial-gradient(
            rgba(93,53,22,.035) 1px,
            transparent 1px
        );

    background-size:10px 10px;

    border:1px solid #DAC5B5;

    border-radius:22px;

    padding:35px 30px 30px;

    margin-bottom:30px;

    animation:
        cardPop .45s cubic-bezier(.34,1.56,.64,1);

}



/* ===========================
   LABEL
=========================== */

.interest-label{

    position:absolute;

    top:-16px;

    left:50%;

    transform:translateX(-50%);

    padding:5px 24px;

    background:#80502B;

    border-radius:999px;

    color:#FFF8E6;

    font-family:"Fredoka",sans-serif;

    font-size:.9rem;

    font-weight:700;

    letter-spacing:.12em;

}



/* ===========================
   CONTENT
=========================== */

.interest-content{

    margin-top:20px;

    text-align:center;

}

.interest-content h1{

    margin-bottom:10px;

    font-family:"Fredoka",sans-serif;

    font-size:2.4rem;

    color:#5D3516;

}

.interest-content > p{

    max-width:600px;

    margin:auto;

    line-height:1.8;

    color:#A05A32;

}



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

.music-card{

    display:flex;

    flex-direction:column;

    gap:25px;

    margin-top:20px;

    padding:24px;

    border-radius:24px;

}

.music-main{

    display:grid;

    grid-template-columns:160px 1fr;

    gap:24px;

    align-items:center;

}



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

.music-cover img{

    width:160px;

    height:160px;

    object-fit:cover;

    border-radius:18px;

}



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

.music-info{

    display:flex;

    flex-direction:column;

    text-align:left;

}

.music-info h2{

    margin:0;

}

.music-info p{

    margin:0;

    max-width:none;

    text-align:left;

    color:#A05A32;

}



/* ===========================
   PROGRESS BAR
=========================== */

.music-progress{

    margin-top:20px;

}

.progress-bar{

    width:100%;

    height:8px;

    overflow:hidden;

    background:#E8D2B0;

    border-radius:999px;

}

#music-progress-fill{

    display:block;

    width:0%;

    height:100%;

    background:#80502B;

    transition:.1s linear;

}

.music-time{

    display:flex;

    justify-content:space-between;

    margin-top:6px;

    font-size:.8rem;

    color:#A05A32;

}



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

#music-button{

    appearance:none;

    border:none;

    outline:none;

    background:transparent;

    margin-top:15px;

    padding:0;

    width:45px;

    height:45px;

    cursor:pointer;

}

#music-button img{

    width:24px;

    height:24px;

    object-fit:contain;

    filter:
        brightness(0)
        saturate(100%)
        invert(32%)
        sepia(25%)
        saturate(900%)
        hue-rotate(345deg)
        brightness(90%)
        contrast(90%);

}



/* ===========================
   SONG ACCORDION
=========================== */

.song-accordion{

    margin-top:20px;

    overflow:hidden;

    border-radius:14px;

}



/* ===========================
   TOGGLE
=========================== */

.song-toggle{

    display:flex;

    justify-content:space-between;

    align-items:center;

    width:100%;

    padding:14px 18px;

    border:none;

    border-radius:14px;

    background:#80502B;

    color:#FFF8E6;

    font-weight:600;

    cursor:pointer;

    transition:
        background .2s ease,
        border-radius .25s ease;

}

.song-toggle:hover{

    background:#8D5930;

}

.song-accordion.open .song-toggle{

    border-bottom-left-radius:0;

    border-bottom-right-radius:0;

}


/* ===========================
   SONG LIST
=========================== */

/* ===========================
   SONG TOGGLE
=========================== */

.song-toggle{

    width:100%;

    padding:14px 18px;

    background:#80502B;

    color:#FFF8E6;

    border:none;

    border-radius:14px;

    cursor:pointer;

    transition:
        border-radius .15s ease .35s;

}


/* Opening state */
.song-accordion.open .song-toggle{

    border-bottom-left-radius:0;

    border-bottom-right-radius:0;

    transition:
        border-radius 0s ease;

}



/* ===========================
   SONG LIST
=========================== */

.song-list{

    display:flex;

    flex-direction:column;

    gap:2px;

    max-height:0;

    overflow:hidden;

    background:#80502B;

    padding:0;

    transition:
        max-height .35s ease,
        padding .35s ease;

}


.song-list.open{

    max-height:180px;

    padding:10px 0;

}


/* ===========================
   TOGGLE CORNERS
=========================== */

.song-accordion.open .song-toggle{

    border-bottom-left-radius:0;

    border-bottom-right-radius:0;

}



/* ===========================
   SONG BUTTON
=========================== */

.song-choice{

    display:flex;

    align-items:center;

    gap:12px;

    width:100%;

    padding:12px 18px;

    border:none;

    background:transparent;

    color:#FFF8E6;

    text-align:left;

    cursor:pointer;

    transition:
        background .2s ease,
        padding-left .2s ease;

}

.song-choice:hover{

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

    padding-left:24px;

}

.song-choice.active{

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

}



/* ===========================
   SONG ICON
=========================== */

.song-choice img{

    flex-shrink:0;

    width:14px;

    height:14px;

    opacity:.9;

    filter:
        brightness(0)
        saturate(100%)
        invert(100%);

}

.song-choice span{

    font-size:.85rem;

    color:#FFF8E6;

}



/* ===========================
   ACCORDION ARROW
=========================== */

.song-arrow{

    transition:transform .25s ease;

}

.song-accordion.open .song-arrow{

    transform:rotate(90deg);

}