/* =======================================================
DIWWINIFY v0.4
Spotify Library Homepage
======================================================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html,
body{
height:100%;
overflow:hidden;
}

body{
font-family:"Arial Narrow", Arial, sans-serif;
background:#F5F5F5;
color:#111;
}

/* INTRO */

#intro{
position:fixed;
inset:0;
background:white;
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
animation:intro 3.5s forwards;
animation-delay:2s;
}

.intro-wrapper{
text-align:center;
}

.intro-wrapper p,
.intro-wrapper span{
font-size:11px;
letter-spacing:5px;
text-transform:uppercase;
}

.intro-wrapper h1{
font-size:72px;
letter-spacing:18px;
margin:14px 0;
}

/* APP */

#spotify{
display:grid;
grid-template-columns:78px 1fr;
height:calc(100vh - 78px);
opacity:0;
animation:show 0s forwards;
animation-delay:5.5s;
}

/* SIDEBAR */

#sidebar{
background:#FCFCFC;
border-right:1px solid #E4E4E4;
display:flex;
flex-direction:column;
align-items:center;
padding:18px 0;
gap:24px;
z-index:5;
}

.sidebar-nav{
display:flex;
flex-direction:column;
gap:14px;
}

.nav{
width:42px;
height:42px;
border:none;
border-radius:12px;
background:none;
font-size:18px;
cursor:pointer;
transition:.25s;
}

.nav.active,
.nav:hover{
background:#ECECEC;
}

.sidebar-playlists{
display:flex;
flex-direction:column;
gap:12px;
overflow:auto;
}

.side-cover{
width:48px;
height:48px;
object-fit:cover;
filter:grayscale(100%);
border-radius:10px;
cursor:pointer;
transition:.25s;
border:2px solid transparent;
}

.side-cover.active{
border-color:black;
}

.side-cover:hover{
transform:scale(1.08);
}

/* CONTENT */

#content{
position:relative;
overflow-y:auto;
background:#F8F8F8;
}

/* NOISE ONLY ON CONTENT */

#content::before{
content:"";
position:absolute;
inset:0;
background:url("../assets/ui/noise.jpg");
opacity:0.02;
pointer-events:none;
z-index:200;
}

#content>*{
position:relative;
z-index:2;
}

/* TOPBAR */

#topbar{
position:sticky;
top:0;
z-index:50;
height:65px;
background:rgba(248,248,248,.9);
backdrop-filter:blur(14px);
border-bottom:1px solid #EAEAEA;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 28px;
}

.top-left,
.top-right{
display:flex;
gap:12px;
}

#topbar button{
background:none;
border:none;
font-family:"Arial Narrow";
font-size:18px;
cursor:pointer;
}

/* SVG ICON BUTTONS */

.nav,
.top-right button{

    width:40px;
    height:40px;

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

    border:none;
    background:transparent;

    border-radius:10px;

    cursor:pointer;

    transition:.25s;

}

.nav img,
.top-right img{

    width:20px;
    height:20px;

    opacity:.8;

}

.nav:hover,
.nav.active,
.top-right button:hover{

    background:#ECECEC;

}

.nav:hover img,
.top-right button:hover img{

    opacity:1;

}

.search{
width:420px;
height:36px;
border:1px solid #DDD;
border-radius:999px;
background:white;
display:flex;
align-items:center;
padding-left:18px;
font-size:12px;
text-transform:uppercase;
letter-spacing:2px;
color:#777;
}

/* HERO */

#hero{
height:300px;
position:relative;
overflow:hidden;
}

.hero-bg{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
filter:grayscale(100%);
opacity:.18;
transform:scale(1.1);
}

.hero-overlay{
position:absolute;
inset:0;
background:linear-gradient(to bottom,
rgba(255,255,255,.15),
rgba(248,248,248,.96));
}

.hero-content{
position:relative;
display:flex;
align-items:flex-end;
gap:30px;
padding:42px 55px;
height:100%;
}

.hero-avatar{
width:170px;
height:170px;
border-radius:18px;
object-fit:cover;
filter:grayscale(100%);
box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.hero-small{
font-size:11px;
letter-spacing:4px;
text-transform:uppercase;
color:#555;
}

.hero-content h1{
font-size:62px;
margin:10px 0;
}

.hero-meta{
display:flex;
gap:10px;
font-size:12px;
letter-spacing:2px;
text-transform:uppercase;
color:#666;
margin-bottom:18px;
}

.hero-content p{
font-size:14px;
max-width:600px;
line-height:170%;
}

/* FILTER CHIPS */

#chips{

    display:flex;

    gap:12px;

    overflow-x:auto;

    padding-bottom:8px;

    scrollbar-width:none;

}

#chips::-webkit-scrollbar{
    display:none;
}

.chip{
border:1px solid #DDD;
background:white;
padding:8px 16px;
border-radius:999px;
font-family:"Arial Narrow";
font-size:11px;
text-transform:uppercase;
letter-spacing:2px;
cursor:pointer;
transition:.2s;
}

.chip.active,
.chip:hover{
background:black;
color:white;
}

/* PLAYLIST TABLE */

.library-section{
padding:28px 55px 50px;
}

.section-title{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:18px;
}

.section-title h2{
font-size:30px;
}

.section-title span{
font-size:11px;
letter-spacing:2px;
text-transform:uppercase;
color:#666;
}

/* TABLE HEADER */

.playlist-head{
display:grid;
grid-template-columns:55px 1fr 140px;
padding:10px 0;
border-bottom:1px solid #DDD;
margin-bottom:6px;
font-size:11px;
letter-spacing:2px;
text-transform:uppercase;
color:#777;
}

#playlistContainer{
display:flex;
flex-direction:column;
}

/* PLAYLIST ROW */

.playlist-card{
display:grid;
grid-template-columns:55px 70px 1fr 140px;
align-items:center;
padding:10px 0;
border-radius:10px;
transition:.25s;
cursor:pointer;
}

.playlist-card:hover{
background:rgba(0,0,0,.03);
}

.playlist-number{
font-size:13px;
text-align:center;
color:#555;
}

.cover-wrapper{
position:relative;
width:54px;
height:54px;
}

.playlist-cover{
width:54px;
height:54px;
border-radius:6px;
object-fit:cover;
filter:grayscale(100%);
}

.play-overlay{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
background:rgba(255,255,255,.45);
backdrop-filter:blur(2px);
opacity:0;
transition:.25s;
border-radius:6px;
font-size:18px;
}

.playlist-card:hover .play-overlay{
opacity:1;
}

.playlist-name{
font-size:20px;
font-weight:bold;
margin-bottom:3px;
}

.playlist-series{
font-size:11px;
text-transform:uppercase;
letter-spacing:2px;
color:#666;
}

.updated{
font-size:11px;
letter-spacing:2px;
text-transform:uppercase;
color:#666;
}

/* RECENTLY ADDED */

.recent-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(165px,1fr));
gap:20px;
}

.recent-card{
cursor:pointer;
transition:.25s;
}

.recent-card:hover{
transform:translateY(-5px);
}

.recent-card img{
width:100%;
aspect-ratio:1;
object-fit:cover;
border-radius:10px;
filter:grayscale(100%);
margin-bottom:10px;
}

.recent-card p{
font-size:13px;
}

/* PLAYER */

#player{
position:fixed;
bottom:0;
left:0;
width:100%;
height:78px;
background:white;
border-top:1px solid #DDD;
display:flex;
justify-content:space-between;
align-items:center;
padding:0 24px;
z-index:200;
}

.player-left{
display:flex;
align-items:center;
gap:14px;
}

.player-left img{
width:48px;
height:48px;
object-fit:cover;
border-radius:5px;
filter:grayscale(100%);
}

.player-left small{
font-size:10px;
letter-spacing:2px;
text-transform:uppercase;
color:#666;
}

.player-left h4{
font-size:14px;
}

.player-middle{
width:420px;
display:flex;
flex-direction:column;
gap:8px;
align-items:center;
}

.controls{
display:flex;
gap:18px;
}

.controls button{
background:none;
border:none;
font-family:"Arial Narrow";
font-size:18px;
cursor:pointer;
}

.progress-bar{
width:100%;
height:4px;
background:#E1E1E1;
border-radius:999px;
overflow:hidden;
}

.progress{
width:26%;
height:100%;
background:black;
}

.player-right{
font-size:11px;
letter-spacing:2px;
text-transform:uppercase;
color:#666;
}

/* ANIMATION */

@keyframes intro{

80%{
opacity:1;
}

100%{
opacity:0;
visibility:hidden;
}

}

@keyframes show{

to{
opacity:1;
}

}

/* TOAST */

#toast{

position:fixed;
top:25px;
right:25px;

background:black;
color:white;

padding:14px 18px;

font-size:12px;
letter-spacing:2px;
text-transform:uppercase;

border-radius:12px;

opacity:0;
transform:translateY(-20px);

transition:.35s;

z-index:1000;

}

#toast.show{

opacity:1;
transform:none;

}

/* COLLAPSIBLE LIBRARY */

#sidebar{

transition:.35s;

}

#sidebar.collapsed{

width:78px;

}

#sidebar.collapsed .sidebar-title{
    opacity:0;
    height:0;
    overflow:hidden;
    margin:0;
}

#sidebar.collapsed .tooltip{

display:none;

}

.sidebar-title{

    font-size:10px;

    text-transform:uppercase;

    letter-spacing:3px;

    color:#5A5A5A;

    margin:18px 0 14px;

    padding-left:6px;

}

.tooltip-wrap{

position:relative;

}

.tooltip{

position:absolute;
left:60px;
top:50%;

transform:translateY(-50%);

background:black;
color:white;

padding:6px 10px;

font-size:10px;
letter-spacing:2px;
text-transform:uppercase;

border-radius:6px;

opacity:0;
pointer-events:none;

transition:.2s;

white-space:nowrap;

}

.tooltip-wrap:hover .tooltip{

opacity:1;

}

.search{

font-family:"Arial Narrow",Arial,sans-serif;

padding-left:18px;

outline:none;

}

.search:focus{

border-color:black;

}

#emptyState{

display:none;

padding:40px 0;

text-align:center;

font-size:13px;
letter-spacing:2px;
text-transform:uppercase;

color:#777;

}

#settingsPanel{

position:fixed;
top:0;
right:-280px;

width:280px;
height:100vh;

background:white;

border-left:1px solid #E4E4E4;

padding:30px;

transition:.35s;

z-index:900;

}

#settingsPanel.open{

right:0;

}

.settings-header h2{

font-size:28px;

margin-bottom:4px;

}

.settings-header span{

font-size:12px;
letter-spacing:2px;
text-transform:uppercase;
color:#666;

}

.settings-group{

margin-top:30px;

}

.settings-group p{

font-size:10px;
letter-spacing:3px;
text-transform:uppercase;

margin-bottom:8px;

color:#777;

}

.modal{

position:fixed;
inset:0;

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

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

z-index:950;

}

.hidden{

display:none;

}

.modal-content{

width:360px;

background:white;

padding:30px;

border-radius:18px;

display:flex;
flex-direction:column;
gap:12px;

}

.modal-content h2{

font-size:28px;

}

.modal-content input{

height:40px;

border:1px solid #DDD;

padding-left:12px;

font-family:"Arial Narrow";

}

.modal-content button{

margin-top:10px;

height:42px;

border:none;

background:black;
color:white;

font-family:"Arial Narrow";
letter-spacing:2px;
text-transform:uppercase;

cursor:pointer;

}

/* =======================================================
   CUSTOM CURSOR
   ======================================================= */

html,
body,
body * {
    cursor: url("https://i.postimg.cc/d1Fm422m/tumblr-c6bf3ce6a54303a5cd8421135157c1c8-f73cf445-64-32x25.png") 2 2, auto !important;
}

/* =======================================================
   V2 LIBRARY / FILTER ADDITIONS
   These additions keep the original Neocities layout.
======================================================= */

/* Let the sidebar expand without covering the content. */

#spotify{
    grid-template-columns:78px minmax(0,1fr);
    min-width:0;
    transition:grid-template-columns .35s ease;
}

#spotify.library-expanded{
    grid-template-columns:280px minmax(0,1fr);
}

#sidebar{
    width:78px;
    min-width:0;
    height:100%;
    overflow:hidden;
    transition:width .35s ease;
    padding:18px 0;
}

#sidebar.expanded{
    width:280px;
}

/* Keep the original icon navigation exactly where it was. */

#sidebar.expanded .sidebar-nav{
    align-self:flex-start;
    margin-left:18px;
}

/* The old hardcoded .sidebar-playlists is replaced
   by the v2-generated #sidebarPlaylists. */

#sidebarPlaylists{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:8px;
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-width:none;
    min-height:0;
}

#sidebarPlaylists::-webkit-scrollbar{
    display:none;
}

#sidebar:not(.expanded) #sidebarPlaylists{
    align-items:center;
}

.side-item{
    width:100%;
    min-width:0;
    display:flex;
    align-items:center;
    gap:12px;
    padding:8px 14px;
    border-radius:10px;
    cursor:pointer;
    transition:.25s;
}

.side-item:hover{
    background:#ECECEC;
}

.side-item img{
    width:48px;
    height:48px;
    min-width:48px;
    object-fit:cover;
    border-radius:10px;
    background:#ddd;
    filter:grayscale(100%);
}

.side-item .info{
    display:none;
    min-width:0;
    white-space:nowrap;
}

#sidebar.expanded .info{
    display:block;
}

.side-item strong{
    font-size:13px;
}

.side-item small{
    font-size:10px;
    color:#666;
}

/* When collapsed, the library remains a clean icon strip. */

#sidebar:not(.expanded) .side-item{
    width:auto;
    padding:4px;
}

#sidebar:not(.expanded) .side-item .info{
    display:none;
}

/* v2's chips now use data-filter and wrap instead of
   requiring a <br>. */

#chips{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    overflow:visible;
    padding:20px 55px 8px;
    scrollbar-width:none;
}

#chips::-webkit-scrollbar{
    display:none;
}

.chip{
    flex:0 0 auto;
}

/* The v2 cards use the same information, but the
   original Neocities card styling stays intact. */

.playlist-card{
    min-width:0;
}

.playlist-name,
.playlist-series,
.updated{
    min-width:0;
}

@media(max-width:700px){

    #spotify{
        grid-template-columns:64px minmax(0,1fr);
    }

    #spotify.library-expanded{
        grid-template-columns:240px minmax(0,1fr);
    }

    #sidebar{
        width:64px;
    }

    #sidebar.expanded{
        width:240px;
    }

    #sidebar.expanded .sidebar-nav{
        margin-left:12px;
    }

    #chips{
        padding-left:35px;
        padding-right:35px;
    }

}