/*==================================================
    PLAYMUSICFX
    ARTIST PAGE
==================================================*/

/*==================================================
    ROOT
==================================================*/

.artist-page{

    display:flex;

    flex-direction:column;

    gap:24px;

    padding:30px;

}


/*==================================================
    SECTION
==================================================*/

.artist-section{

    display:flex;

    flex-direction:column;

    gap:24px;

}


/*==================================================
    SECTION HEADER
==================================================*/

.section-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.section-header h2{

    margin:0;

    display:flex;

    align-items:center;

    gap:12px;

    color:#fff;

    font-size:28px;

    font-weight:700;

}

.section-header i{

    color:#8b5cf6;

}


/*==================================================
    LINKS
==================================================*/

.artist-page a{

    color:inherit;

    text-decoration:none;

}

.artist-page img{

    display:block;

    max-width:100%;

}


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

.artist-about-card,
.artist-song,
.artist-album-card,
.artist-stat{

    background:#171717;

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

    border-radius:24px;

    transition:.3s;

}



/*==================================================
    ARTIST IMAGE
==================================================*/

.artist-image{

    flex-shrink:0;

}

.artist-image img{

    width:260px;

    height:260px;

    border-radius:50%;

    object-fit:cover;

    border:6px solid rgba(255,255,255,.12);

    box-shadow:

        0 25px 70px rgba(0,0,0,.45);

    transition:.35s;

}

.artist-hero:hover .artist-image img{

    transform:scale(1.03);

}


.artist-bio{

    margin-top:25px;

    max-width:760px;

    color:#cfcfcf;

    line-height:1.8;

    font-size:15px;

}



.artist-hero{

position:relative;

overflow:hidden;

border-radius:30px;

padding:80px;

margin-bottom:0px;

min-height:300px;

display:flex;

align-items:center;

background:#111;

}

.artist-hero-bg{

position:absolute;

inset:0;

overflow:hidden;

}

.artist-hero-bg img{

width:100%;

height:100%;

object-fit:cover;

filter:blur(12px);

transform:scale(1.15);

opacity:.45;

}

.artist-hero-overlay{

position:absolute;

inset:0;

background:

linear-gradient(

90deg,

rgba(15,15,15,.95),

rgba(15,15,15,.65),

rgba(15,15,15,.85)

);

}

.artist-hero-content{

position:relative;

display:flex;

align-items:center;

gap:60px;

z-index:5;

}

.artist-image{

flex:none;

}

.artist-image img{

width:220px;

height:220px;

border-radius:50%;

object-fit:cover;

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

box-shadow:

0 25px 60px rgba(0,0,0,.55);

transition:.4s;

}

.artist-image img:hover{

transform:scale(1.05);

}

.artist-info{

display:flex;

flex-direction:column;

}

.artist-verified{

display:inline-flex;

align-items:center;

gap:10px;

margin-bottom:15px;

font-size:13px;

font-weight:700;

letter-spacing:2px;

color:#9f6cff;

text-transform:uppercase;

}

.artist-verified i{

font-size:15px;

}

.artist-info h1{

font-size:72px;

font-weight:900;

line-height:1;

margin:0;

color:#fff;

}

.artist-info h2{

margin-top:12px;

font-size:28px;

font-weight:400;

opacity:.8;

color:#ddd;

}

.artist-meta{

display:flex;

flex-wrap:wrap;

gap:14px;

margin:30px 0;

}

.artist-meta span{

display:flex;

align-items:center;

gap:10px;

padding:12px 22px;

border-radius:999px;

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

backdrop-filter:blur(10px);

font-weight:600;

}

.artist-meta i{

color:#9f6cff;

}

.artist-actions{

display:flex;

flex-wrap:wrap;

gap:16px;

margin-top:10px;

}

.artist-actions button{

padding:15px 28px;

border:none;

border-radius:999px;

cursor:pointer;

font-weight:700;

font-size:15px;

transition:.3s;

}

.artist-play-all{

background:#8b5cf6;

color:#fff;

}

.artist-play-all:hover{

transform:translateY(-3px);

box-shadow:0 15px 35px rgba(139,92,246,.45);

}

.artist-actions button:not(.artist-play-all){

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

color:#fff;

}

.artist-actions button:hover{

background:#8b5cf6;

}


/*==================================================
    TABLET
==================================================*/

@media (max-width:992px){

.artist-hero{

padding:50px 35px;

min-height:auto;

}

.artist-hero-content{

gap:35px;

align-items:center;

}

.artist-image img{

width:180px;

height:180px;

}

.artist-info h1{

font-size:54px;

}

.artist-info h2{

font-size:22px;

}

}


@media (max-width:768px){

.artist-hero{

    padding:30px 20px;

    min-height:auto;

    border-radius:20px;

}

.artist-hero-content{

    flex-direction:column;

    align-items:center;

    text-align:center;

    gap:18px;

}

.artist-image{

    width:100%;

    display:flex;

    justify-content:center;

}

.artist-image img{

    width:130px;

    height:130px;

}

.artist-info{

    width:100%;

    align-items:center;

}

.artist-info h1{

    font-size:42px;

    margin:8px 0;

}

.artist-info h2{

    font-size:18px;

    margin:0;

    opacity:.75;

}

.artist-verified{

    justify-content:center;

    font-size:12px;

    letter-spacing:1px;

}

.artist-meta{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    width:100%;

    gap:10px;

    margin:20px 0;

}

.artist-meta span{

    justify-content:center;

    padding:10px;

    font-size:13px;

}

.artist-actions{

    display:grid;

    grid-template-columns:1fr 1fr;

    width:100%;

    gap:12px;

}

.artist-play-all{

    grid-column:1 / -1;

}

.artist-actions button{

    width:100%;

    padding:14px;

}
}

/*==================================================
    META
==================================================*/

.artist-meta{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

    margin-top:25px;

}

.artist-meta span{

    display:flex;

    align-items:center;

    gap:8px;

    padding:12px 18px;

    border-radius:999px;

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

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

    color:#fff;

    font-size:14px;

}

.artist-meta i{

    color:#8b5cf6;

}


/*==================================================
    HOVER
==================================================*/

.artist-meta span:hover{

    background:rgba(139,92,246,.18);

    border-color:#8b5cf6;

}


/*==================================================
    POPULAR SONGS
==================================================*/

.artist-song-list{

    display:flex;

    flex-direction:column;

    gap:14px;

}


/*==================================================
    SONG ROW
==================================================*/

.artist-song{

    display:grid;

    grid-template-columns:

        50px
        70px
        1fr
        90px
        60px;

    align-items:center;

    gap:18px;

    padding:14px 20px;

    cursor:pointer;

    overflow:hidden;

}

.artist-song:hover{

    background:#202020;

    border-color:#8b5cf6;

    transform:translateY(-2px);

}


/*==================================================
    PLAYING
==================================================*/

.artist-song.playing{

    background:

        rgba(139,92,246,.18);

    border-color:#8b5cf6;

}

.artist-song.playing .song-number{

    color:#8b5cf6;

    font-weight:700;

}

.artist-song.playing .song-details strong{

    color:#8b5cf6;

}


/*==================================================
    NUMBER
==================================================*/

.song-number{

    text-align:center;

    color:#999;

    font-size:15px;

    font-weight:700;

}


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

.artist-song .song-cover{

    position:relative;

    width:60px;

    height:60px;

    border-radius:16px;

    overflow:hidden;

}

.artist-song .song-cover img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.35s;

}

.artist-song:hover .song-cover img{

    transform:scale(1.08);

}


/*==================================================
    PLAY OVERLAY
==================================================*/

.song-overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

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

    opacity:0;

    transition:.25s;

}

.song-overlay i{

    color:#fff;

    font-size:18px;

}

.artist-song:hover .song-overlay{

    opacity:1;

}


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

.song-details{

    display:flex;

    flex-direction:column;

    gap:6px;

}

.song-details strong{

    color:#fff;

    font-size:16px;

    font-weight:700;

}

.song-details small{

    color:#9d9d9d;

    font-size:13px;

}


/*==================================================
    DURATION
==================================================*/

.artist-song .song-duration{

    text-align:center;

    color:#bdbdbd;

    font-size:14px;

}


/*==================================================
    FAVORITE
==================================================*/

.artist-song .favorite-btn{

    width:44px;

    height:44px;

    border:none;

    border-radius:50%;

    background:transparent;

    color:#a8a8a8;

    cursor:pointer;

    transition:.25s;

}

.artist-song .favorite-btn:hover{

    background:#8b5cf6;

    color:#fff;

}


/*==================================================
    MOBILE
==================================================*/

@media(max-width:768px){

.artist-song{

    grid-template-columns:

        40px
        60px
        1fr
        45px;

    gap:12px;

    padding:14px;

}

.artist-song .song-duration{

    display:none;

}

.artist-song .song-cover{

    width:52px;

    height:52px;

}

.song-details strong{

    font-size:15px;

}

.song-details small{

    font-size:12px;

}

}

/*==================================================
    HORIZONTAL ALBUMS
==================================================*/

.artist-albums-grid{

    display:flex;

    gap:24px;

    overflow-x:auto;

    overflow-y:hidden;

    padding-bottom:15px;

    scroll-behavior:smooth;

}

.artist-albums-grid::-webkit-scrollbar{

    height:8px;

}

.artist-albums-grid::-webkit-scrollbar-thumb{

    background:#8b5cf6;

    border-radius:999px;

}

.artist-albums-grid::-webkit-scrollbar-track{

    background:transparent;

}

/*==================================================
    ALBUM CARD
==================================================*/

.artist-album-card{

    display:flex;

    flex:0 0 240px;

    overflow:hidden;

    background:#171717;

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

    border-radius:24px;

    transition:.35s;

}

.artist-album-card:hover{

    transform:translateY(-8px);

    border-color:#8b5cf6;

    box-shadow:

        0 25px 60px rgba(0,0,0,.35);


}


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

.artist-album-cover{

    position:relative;

    aspect-ratio:1/1;

    overflow:hidden;

}

.artist-album-cover img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.45s;

}

.artist-album-card:hover .artist-album-cover img{

    transform:scale(1.08);

}


/*==================================================
    PLAY OVERLAY
==================================================*/

.artist-album-overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

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

    opacity:0;

    transition:.3s;

}

.artist-album-overlay i{

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#8b5cf6;

    color:#fff;

    font-size:26px;

    transform:scale(.8);

    transition:.3s;

}

.artist-album-card:hover .artist-album-overlay{

    opacity:1;

}

.artist-album-card:hover .artist-album-overlay i{

    transform:scale(1);

}


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

.artist-album-info{

    padding:22px;

}

.artist-album-info h3{

    margin:0;

    color:#fff;

    font-size:18px;

    font-weight:700;

    line-height:1.4;

}

.artist-album-info p{

    margin:10px 0 0;

    color:#9a9a9a;

    font-size:14px;

}


/*==================================================
    MOBILE
==================================================*/

@media(max-width:768px){

.artist-albums-grid{

    grid-template-columns:
        repeat(2,1fr);

    gap:18px;

}

.artist-album-info{

    padding:16px;

}

.artist-album-info h3{

    font-size:16px;

}

.artist-album-overlay i{

    width:55px;

    height:55px;

    font-size:20px;

}

}

@media(max-width:520px){

.artist-albums-grid{

    grid-template-columns:1fr;

}

}

/*==================================================
    ABOUT ARTIST
==================================================*/

.artist-about{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:30px;

    align-items:start;

}


/*==================================================
    BIO CARD
==================================================*/

.artist-about-card{

    padding:32px;

    background:#171717;

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

    border-radius:24px;

}

.artist-about-card h3{

    margin:0 0 20px;

    color:#fff;

    font-size:24px;

    font-weight:700;

}

.artist-about-card p{

    margin:0;

    color:#cfcfcf;

    line-height:1.9;

    font-size:15px;

}


/*==================================================
    STATS
==================================================*/

.artist-stats{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

}


/*==================================================
    STAT CARD
==================================================*/

.artist-stat{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    min-height:150px;

    padding:24px;

    background:#171717;

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

    border-radius:22px;

    transition:.3s;

}

.artist-stat:hover{

    transform:translateY(-5px);

    border-color:#8b5cf6;

    box-shadow:

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

}

.artist-stat i{

    font-size:28px;

    color:#8b5cf6;

    margin-bottom:18px;

}

.artist-stat strong{

    color:#fff;

    font-size:28px;

    font-weight:800;

    line-height:1.2;

}

.artist-stat span{

    margin-top:8px;

    color:#999;

    font-size:14px;

}


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

@media(max-width:992px){

.artist-about{

    grid-template-columns:1fr;

}

.artist-stats{

    grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:600px){

.artist-stats{

    grid-template-columns:1fr;

}

.artist-about-card{

    padding:24px;

}

.artist-about-card h3{

    font-size:22px;

}

.artist-stat{

    min-height:120px;

}

.artist-stat strong{

    font-size:24px;

}

}

/*==================================================
    PREMIUM EFFECTS
==================================================*/

/* Page Animation */

.artist-page{

    animation:artistFade .45s ease;

}

@keyframes artistFade{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*==================================================
    HERO GLOW
==================================================*/

.artist-hero::before{

    content:"";

    position:absolute;

    top:-180px;

    right:-150px;

    width:360px;

    height:360px;

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(139,92,246,.28),

            transparent 70%

        );

    pointer-events:none;

}

.artist-hero::after{

    content:"";

    position:absolute;

    bottom:-180px;

    left:-140px;

    width:340px;

    height:340px;

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(255,255,255,.05),

            transparent 70%

        );

    pointer-events:none;

}


/*==================================================
    ARTIST IMAGE GLOW
==================================================*/

.artist-image{

    position:relative;

}

.artist-image::before{

    content:"";

    position:absolute;

    inset:-18px;

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(139,92,246,.35),

            transparent 75%

        );

    z-index:-1;

    filter:blur(25px);

}

.artist-image img{

    transition:

        transform .35s,

        box-shadow .35s;

}

.artist-hero:hover .artist-image img{

    transform:scale(1.04);

    box-shadow:

        0 35px 80px rgba(0,0,0,.45);

}


/*==================================================
    PLAYING SONG
==================================================*/

.artist-song.playing{

    position:relative;

}

.artist-song.playing::before{

    content:"";

    position:absolute;

    left:0;

    top:12px;

    bottom:12px;

    width:4px;

    border-radius:999px;

    background:#8b5cf6;

}

.artist-song.playing .song-overlay{

    opacity:1;

    background:

        rgba(139,92,246,.35);

}

.artist-song.playing .song-overlay i{

    display:none;

}


/*==================================================
    SCROLLBAR
==================================================*/

.artist-song-list::-webkit-scrollbar{

    width:8px;

}

.artist-song-list::-webkit-scrollbar-thumb{

    background:

        rgba(139,92,246,.5);

    border-radius:999px;

}


/*==================================================
    FOCUS
==================================================*/

.artist-page button:focus-visible,
.artist-page a:focus-visible{

    outline:2px solid #8b5cf6;

    outline-offset:3px;

}


/*==================================================
    REDUCED MOTION
==================================================*/

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

*{

    animation:none!important;

    transition:none!important;

}

}


/*==================================================
    MOBILE
==================================================*/

@media(max-width:768px){

.artist-page{

    padding:18px;

    gap:35px;

}

.artist-meta{

    justify-content:center;

}

.section-header h2{

    font-size:24px;

}

}

/*==================================================
    SHOW MORE
==================================================*/

.artist-more{

    margin-top:30px;

    text-align:center;

}

.artist-more-btn{

    padding:14px 36px;

    border:none;

    border-radius:999px;

    background:#8b5cf6;

    color:#fff;

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

}

.artist-more-btn:hover{

    transform:translateY(-2px);

    background:#9d6cff;

}

/*==================================================
    ARTIST FOLLOWERS
==================================================*/

.artist-follow-meta{

    display:flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    border-radius:999px;

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

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

    color:#fff;

    font-size:15px;

    font-weight:600;

}

.artist-follow-meta i{

    color:var(--primary-color,#8b5cf6);

}

.artist-followers{

    font-weight:700;

}