/* ==========================================================
   HASHVIX EXPLORE
========================================================== */


/* ==========================================================
   PAGE
========================================================== */

.hx-explore{

min-height:100vh;

background:var(--hx-bg);

padding:50px 0 120px;

}


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

.hx-explore-hero{

position:relative;

padding:70px;

border-radius:36px;

overflow:hidden;

background:

linear-gradient(

135deg,

rgba(79,140,255,.18),

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

margin-bottom:50px;

}

.hx-explore-hero::before{

content:"";

position:absolute;

width:550px;

height:550px;

right:-220px;

top:-220px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(255,255,255,.08),

transparent);

}

.hx-explore-title{

position:relative;

z-index:2;

}

.hx-explore-title h1{

font-size:58px;

font-weight:900;

margin-bottom:14px;

}

.hx-explore-title p{

font-size:18px;

color:var(--hx-text-light);

max-width:700px;

}


/* ==========================================================
   SEARCH BAR
========================================================== */

.hx-explore-search{

margin-top:35px;

max-width:720px;

position:relative;

}

.hx-explore-search input{

width:100%;

height:64px;

padding:0 24px 0 62px;

border-radius:999px;

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

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

color:white;

font-size:16px;

}

.hx-explore-search i{

position:absolute;

left:24px;

top:50%;

transform:translateY(-50%);

font-size:20px;

color:var(--hx-text-muted);

}


/* ==========================================================
   FILTERS
========================================================== */

.hx-filter-bar{

display:flex;

gap:14px;

flex-wrap:wrap;

margin:45px 0;

}

.hx-filter{

padding:12px 22px;

border-radius:999px;

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

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

cursor:pointer;

transition:.3s;

font-weight:600;

}

.hx-filter:hover{

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

}

.hx-filter.active{

background:var(--hx-gradient-primary);

color:white;

}


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

.hx-explore-section{

margin-top:70px;

}

.hx-explore-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:30px;

}

.hx-explore-header h2{

font-size:34px;

font-weight:800;

}

.hx-explore-header a{

color:var(--hx-primary);

font-weight:600;

}


/* ==========================================================
   GRID
========================================================== */

.hx-explore-grid{

display:grid;

grid-template-columns:

repeat(auto-fill,minmax(320px,1fr));

gap:30px;

}

/* ==========================================================
   TRENDING BANNER
========================================================== */

.hx-trending{

position:relative;

overflow:hidden;

padding:40px;

border-radius:30px;

background:linear-gradient(
135deg,
rgba(79,140,255,.15),
rgba(139,92,246,.12));

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

margin-bottom:50px;

}

.hx-trending::before{

content:"";

position:absolute;

right:-120px;

top:-120px;

width:320px;

height:320px;

border-radius:50%;

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

}

.hx-trending h2{

font-size:40px;

margin-bottom:12px;

}

.hx-trending p{

max-width:650px;

color:var(--hx-text-light);

}


/* ==========================================================
   FEATURED ARTIST
========================================================== */

.hx-featured-artist{

display:grid;

grid-template-columns:180px 1fr;

gap:30px;

padding:30px;

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

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

border-radius:28px;

transition:.35s;

}

.hx-featured-artist:hover{

transform:translateY(-6px);

}

.hx-featured-artist img{

width:180px;

height:180px;

border-radius:24px;

object-fit:cover;

}

.hx-featured-info{

display:flex;

flex-direction:column;

justify-content:center;

}

.hx-featured-info h3{

font-size:30px;

margin-bottom:12px;

}

.hx-featured-info p{

margin-bottom:20px;

color:var(--hx-text-light);

}


/* ==========================================================
   GENRE GRID
========================================================== */

.hx-genres-grid{

display:grid;

grid-template-columns:repeat(auto-fill,minmax(180px,1fr));

gap:18px;

}

.hx-genre-card{

padding:24px;

border-radius:22px;

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

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

text-align:center;

transition:.3s;

cursor:pointer;

}

.hx-genre-card:hover{

transform:translateY(-6px);

background:var(--hx-gradient-primary);

}

.hx-genre-card i{

font-size:34px;

margin-bottom:15px;

color:var(--hx-primary);

}

.hx-genre-card:hover i{

color:white;

}

.hx-genre-card h4{

font-size:18px;

}


/* ==========================================================
   PLAYLIST STRIP
========================================================== */

.hx-playlists{

display:flex;

gap:20px;

overflow-x:auto;

padding-bottom:10px;

scrollbar-width:none;

}

.hx-playlists::-webkit-scrollbar{

display:none;

}

.hx-playlist{

min-width:240px;

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

border-radius:24px;

overflow:hidden;

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

transition:.3s;

}

.hx-playlist:hover{

transform:translateY(-6px);

}

.hx-playlist img{

width:100%;

height:220px;

object-fit:cover;

}

.hx-playlist-body{

padding:20px;

}


/* ==========================================================
   AI PICKS
========================================================== */

.hx-ai-picks{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:24px;

}

.hx-ai-card{

padding:28px;

border-radius:24px;

background:linear-gradient(
135deg,
rgba(79,140,255,.08),
rgba(0,212,255,.06));

border:1px solid rgba(79,140,255,.12);

transition:.3s;

}

.hx-ai-card:hover{

transform:translateY(-8px);

box-shadow:0 20px 60px rgba(79,140,255,.18);

}

.hx-ai-card h4{

margin-bottom:12px;

font-size:22px;

}

.hx-ai-card p{

color:var(--hx-text-light);

}


/* ==========================================================
   NEW RELEASES
========================================================== */

.hx-new-grid{

display:grid;

grid-template-columns:repeat(auto-fill,minmax(280px,1fr));

gap:24px;

}


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

@media(max-width:992px){

.hx-featured-artist{

grid-template-columns:1fr;

text-align:center;

}

.hx-featured-artist img{

margin:auto;

}

}

@media(max-width:768px){

.hx-explore{

padding:30px 0 80px;

}

.hx-explore-title h1{

font-size:38px;

}

.hx-explore-hero{

padding:40px 25px;

}

.hx-filter-bar{

overflow:auto;

flex-wrap:nowrap;

}

.hx-genres-grid{

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

}

}

/* ==========================================================
   TOP CREATORS
========================================================== */

.hx-creators{

display:flex;

flex-direction:column;

gap:20px;

}

.hx-creator{

display:flex;

align-items:center;

justify-content:space-between;

padding:20px;

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

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

border-radius:22px;

transition:.3s;

}

.hx-creator:hover{

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

transform:translateX(8px);

}

.hx-creator-left{

display:flex;

align-items:center;

gap:18px;

}

.hx-creator-avatar{

position:relative;

}

.hx-creator-avatar img{

width:68px;

height:68px;

border-radius:50%;

object-fit:cover;

}

.hx-creator-rank{

position:absolute;

right:-6px;

bottom:-6px;

width:24px;

height:24px;

background:var(--hx-gradient-primary);

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:12px;

font-weight:700;

color:white;

}

.hx-creator-name{

font-size:18px;

font-weight:700;

margin-bottom:6px;

}

.hx-creator-meta{

font-size:14px;

color:var(--hx-text-muted);

}


/* ==========================================================
   LEADERBOARD
========================================================== */

.hx-leaderboard{

display:flex;

flex-direction:column;

gap:16px;

}

.hx-leader{

display:grid;

grid-template-columns:60px 70px 1fr auto;

align-items:center;

gap:18px;

padding:18px;

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

border-radius:20px;

transition:.3s;

}

.hx-leader:hover{

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

}

.hx-leader-number{

font-size:26px;

font-weight:900;

color:var(--hx-primary);

text-align:center;

}

.hx-leader img{

width:60px;

height:60px;

border-radius:18px;

object-fit:cover;

}

.hx-score{

font-size:18px;

font-weight:700;

}


/* ==========================================================
   COUNTRY TRENDS
========================================================== */

.hx-country-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

gap:20px;

}

.hx-country-card{

padding:24px;

text-align:center;

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

border-radius:22px;

transition:.3s;

}

.hx-country-card:hover{

transform:translateY(-6px);

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

}

.hx-country-card img{

width:48px;

height:48px;

border-radius:50%;

margin:auto;

margin-bottom:14px;

}


/* ==========================================================
   LIVE FEED
========================================================== */

.hx-live-feed{

display:flex;

flex-direction:column;

gap:18px;

}

.hx-live-event{

display:flex;

align-items:center;

gap:18px;

padding:18px;

border-radius:20px;

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

transition:.3s;

}

.hx-live-event:hover{

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

}

.hx-live-avatar{

width:54px;

height:54px;

border-radius:50%;

overflow:hidden;

}

.hx-live-avatar img{

width:100%;

height:100%;

object-fit:cover;

}

.hx-live-text{

flex:1;

}

.hx-live-time{

font-size:13px;

color:var(--hx-text-muted);

}


/* ==========================================================
   INFINITE FEED
========================================================== */

.hx-feed{

display:grid;

gap:30px;

}


/* ==========================================================
   LOAD MORE
========================================================== */

.hx-load{

display:flex;

justify-content:center;

margin-top:60px;

}


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

.hx-creator,

.hx-country-card,

.hx-playlist,

.hx-genre-card,

.hx-ai-card,

.hx-featured-artist{

transition:all .35s ease;

}


/* ==========================================================
   GRADIENT BORDER
========================================================== */

.hx-border-gradient{

position:relative;

}

.hx-border-gradient::after{

content:"";

position:absolute;

inset:0;

padding:1px;

border-radius:inherit;

background:

linear-gradient(

135deg,

rgba(79,140,255,.6),

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

-webkit-mask:

linear-gradient(#fff 0 0) content-box,

linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;

mask-composite:exclude;

opacity:0;

transition:.35s;

}

.hx-border-gradient:hover::after{

opacity:1;

}


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

@media(max-width:992px){

.hx-leader{

grid-template-columns:50px 60px 1fr;

}

.hx-score{

display:none;

}

}

@media(max-width:768px){

.hx-country-grid{

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

}

.hx-leader{

grid-template-columns:40px 55px 1fr;

gap:12px;

}

.hx-creator{

flex-direction:column;

align-items:flex-start;

}

}

@media(max-width:480px){

.hx-country-grid{

grid-template-columns:1fr;

}

.hx-leader{

grid-template-columns:1fr;

text-align:center;

}

.hx-leader img{

margin:auto;

}

}