:root{

--black:#050505;
--dark:#111111;

--cream:#f7f7eb;

--gold:#c6a15b;
--gold-light:#f0d89a;

--bronze:#a34c00;

--muted:#a79f91;


--sage-gradient:

linear-gradient(
90deg,
#000000 0%,
#f7f7eb 50%,
#a34c00 100%
);


--gold-gradient:

linear-gradient(
135deg,
#f0d89a,
#c6a15b,
#a34c00
);

}




*{

box-sizing:border-box;

}



html{

scroll-behavior:smooth;

}



body{

margin:0;

background:var(--black);

color:var(--cream);

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

overflow-x:hidden;

}



body:before{

content:"";

position:fixed;

inset:0;

background:url("../images/noise.png");

opacity:.03;

pointer-events:none;

z-index:9999;

}





h1,
h2,
h3,
h4{

font-family:"Cormorant Garamond",serif;

font-weight:600;

}





section{

padding:100px 0;

}





.gradient-text{

background:var(--sage-gradient);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}





.section-sub{

font-size:.75rem;

letter-spacing:5px;

text-transform:uppercase;

color:var(--gold-light);

}





.section-title{

font-size:3rem;

}





.gold-line{

height:2px;

width:100px;

margin:30px auto;

background:var(--gold-gradient);

}






/* NAVIGATION */


.navbar{

padding:20px 0;

background:

rgba(0,0,0,.35);

backdrop-filter:blur(10px);

transition:.4s;

}



.navbar.scrolled{

background:#050505;

border-bottom:

1px solid rgba(198,161,91,.25);

}





.navbar-brand{

font-family:

"Cormorant Garamond",serif;

font-size:2.8rem;

font-weight:600;

letter-spacing:3px;

}





.nav-link{

color:var(--cream)!important;

font-size:.8rem;

letter-spacing:3px;

text-transform:uppercase;

margin-left:25px;

}





.nav-link:hover{

color:var(--gold-light)!important;

}






/* HERO */


.hero{

height:100vh;

position:relative;

display:flex;

align-items:center;

overflow:hidden;

}





.hero-image{

position:absolute;

inset:0;

width:100%;

height:100%;

object-fit:cover;

animation:

heroBreath 18s infinite alternate ease-in-out;

}




@keyframes heroBreath{

from{

transform:scale(1);

}

to{

transform:scale(1.08);

}

}





.hero-overlay{

position:absolute;

inset:0;

background:

linear-gradient(

90deg,

rgba(0,0,0,.92),

rgba(198,161,91,.12),

rgba(0,0,0,.8)

);

}





.hero-content{

position:relative;

z-index:2;

}





.hero h1{

font-size:7rem;

line-height:.85;

}





.hero-sub{

font-size:1.15rem;

letter-spacing:3px;

color:

rgba(247,247,235,.75);

}




.hero-orb{

width:320px;

height:320px;

border-radius:50%;

overflow:hidden;

position:relative;

margin-left:auto;

border:

2px solid rgba(240,216,154,.5);


box-shadow:

0 0 90px rgba(198,161,91,.45);

}



.hero-orb img{

width:100%;

height:100%;

object-fit:cover;

}





.hero-play{

position:absolute;

top:50%;

left:50%;

transform:

translate(-50%,-50%);

width:78px;

height:78px;

border-radius:50%;

border:none;

background:

var(--gold-gradient);

color:#050505;

font-size:1.7rem;

}





.hero-orb.playing{

animation:

rotateAlbum 20s linear infinite;

}


/* =====================================================
VISUAL WORLD
===================================================== */


.world-text{

font-size:1.4rem;

line-height:2;

color:

rgba(247,247,235,.8);

font-family:

"Cormorant Garamond",serif;

}





.video-circle{

width:230px;

height:230px;

border-radius:50%;

overflow:hidden;

margin:auto;


border:

1px solid rgba(240,216,154,.45);


box-shadow:

0 0 50px rgba(198,161,91,.25);


animation:

circleBreath 9s infinite ease-in-out;

}




.video-circle video{

width:100%;

height:100%;

object-fit:cover;

}





@keyframes circleBreath{

0%,100%{

transform:scale(1);

}

50%{

transform:scale(1.06);

}

}








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


.archive-card{

background:

linear-gradient(

135deg,

rgba(198,161,91,.18),

rgba(0,0,0,.75)

);


border:

1px solid rgba(240,216,154,.2);


padding:45px;

border-radius:30px;

}





.album-orb{

width:320px;

height:320px;

border-radius:50%;


overflow:hidden;

margin:auto;


border:

2px solid rgba(240,216,154,.5);


box-shadow:

0 0 80px rgba(198,161,91,.4);

}




.album-orb img{

width:100%;

height:100%;

object-fit:cover;

}





.album-orb.playing{

animation:

rotateAlbum 20s linear infinite;

}





@keyframes rotateAlbum{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}





.player-controls{

display:flex;

justify-content:center;

align-items:center;

gap:35px;

margin:30px 0;

}





.main-play{

width:95px;

height:95px;


border-radius:50%;


border:none;


background:

linear-gradient(

135deg,

#f0d89a,

#c6a15b,

#a34c00

);


font-size:2rem;


color:#050505;


box-shadow:

0 0 55px rgba(198,161,91,.55);

}





.skip-btn{

background:none;

border:none;

color:white;

font-size:1.2rem;

opacity:.7;

}





.skip-btn:hover{

color:var(--gold-light);

}





.track-item{

display:block;

width:100%;


padding:15px;


margin-bottom:10px;


text-align:left;


background:transparent;


color:white;


border:

1px solid rgba(240,216,154,.25);


transition:.3s;

}




.track-item:hover{

border-color:var(--gold);

}




.track-item.active{


background:

rgba(198,161,91,.15);


border-color:

var(--gold);


}





.nav-tabs{

border-bottom:

1px solid rgba(240,216,154,.2);

}





.nav-tabs .nav-link{

color:white!important;

}





.nav-tabs .nav-link.active{

background:

rgba(198,161,91,.15);

border-color:

var(--gold);

color:

var(--gold-light)!important;

}





.tab-content{

color:

rgba(247,247,235,.85);

}





.tip-small{

margin-top:20px;

background:none;

border:none;

color:var(--gold-light);

font-size:.75rem;

letter-spacing:3px;

text-transform:uppercase;

}





.tip-small:hover{

color:white;

}

/* =====================================================
LIVE SPIRAL
===================================================== */


.live-spiral{

position:relative;

width:700px;

height:700px;

margin:auto;

}




.spiral-line{

position:absolute;

inset:40px;

border-radius:50%;


background:

radial-gradient(

circle,

transparent 38%,

rgba(198,161,91,.65) 39%,

transparent 40%

);


transform:

rotate(-35deg);


animation:

spiralMove 25s linear infinite;

}





@keyframes spiralMove{

from{

transform:rotate(-35deg);

}

to{

transform:rotate(325deg);

}

}





.show-node{

position:absolute;

z-index:2;

}




.node-one{

top:70px;

left:260px;

}



.node-two{

top:310px;

right:70px;

}



.node-three{

bottom:70px;

left:170px;

}






.event-orb{

width:170px;

height:170px;


border-radius:50%;


display:flex;


align-items:center;

justify-content:center;

flex-direction:column;


background:

radial-gradient(

circle,

rgba(198,161,91,.4),

#050505 70%

);



border:

1px solid rgba(240,216,154,.55);



box-shadow:

0 0 60px rgba(198,161,91,.35);



animation:

orbPulse 8s infinite;

}




.event-orb span{

font-size:3rem;

font-family:

"Cormorant Garamond",serif;

}





.event-orb small{

letter-spacing:4px;

color:var(--gold-light);

}





.event-orb strong{

letter-spacing:2px;

}






@keyframes orbPulse{

0%,100%{

transform:scale(1);

}

50%{

transform:scale(1.05);

}

}








/* =====================================================
COLLABORATIONS
===================================================== */


.collab-card{


width:100%;

height:150px;


background:

linear-gradient(

135deg,

rgba(198,161,91,.15),

rgba(0,0,0,.8)

);



border:

1px solid rgba(240,216,154,.3);


color:white;


font-family:

"Cormorant Garamond",serif;


font-size:2rem;


transition:.4s;

}



.collab-card:hover{


transform:

translateY(-8px);


border-color:

var(--gold);


}








/* =====================================================
PLATFORMS
===================================================== */


.platform{


display:inline-block;


padding:12px 25px;


margin:5px;


border:

1px solid rgba(198,161,91,.5);


color:white;


text-decoration:none;


transition:.3s;

}





.platform:hover{


background:

var(--gold-gradient);


color:black;


}








/* =====================================================
BUTTONS
===================================================== */


.btn-gold{


background:

var(--gold-gradient);


border:none;


color:#050505;


padding:

12px 30px;


letter-spacing:3px;


font-size:.75rem;


text-transform:uppercase;


}





.btn-gold:hover{


box-shadow:

0 10px 30px rgba(198,161,91,.35);


}








/* =====================================================
MODALS
===================================================== */


.modal-content{


background:#080808;


color:white;


border:

1px solid rgba(198,161,91,.4);


}





.modal-x{


position:absolute;


right:12px;


top:12px;


width:28px;


height:28px;


border-radius:50%;


background:none;


border:

1px solid rgba(255,255,255,.3);


color:white;


}








/* =====================================================
FOOTER
===================================================== */


footer{

padding:60px 0;

background:#030303;

}








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


@media(max-width:991px){


.hero h1{

font-size:4.5rem;

}




.hero-orb{

width:240px;

height:240px;

margin:auto;

}





.album-orb{

width:240px;

height:240px;

}





.live-spiral{

width:100%;

height:auto;

display:flex;

flex-direction:column;

gap:60px;

}





.spiral-line{

display:none;

}





.show-node,
.node-one,
.node-two,
.node-three{


position:relative;


top:auto;

right:auto;

bottom:auto;

left:auto;


text-align:center;


}




.section-title{

font-size:2.5rem;

}



}




@media(max-width:576px){


section{

padding:70px 0;

}




.hero h1{

font-size:3.5rem;

}





.archive-card{

padding:25px;

}




.nav-link{

margin-left:0;

}


}

.live-spiral{

position:relative;

width:900px;

height:900px;

margin:auto;

}

.spiral-svg{

position:absolute;

inset:0;

width:100%;

height:100%;

}

.tour-node{

position:absolute;

width:170px;

height:170px;

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

}

/* =====================================================
   INTRO LOADER
===================================================== */

#sageIntro{

position:fixed;

inset:0;

background:#050505;

z-index:10000;

display:flex;

align-items:center;

justify-content:center;

}


.intro-orb{

font-family:"Cormorant Garamond",serif;

font-size:5rem;

letter-spacing:5px;


background:var(--sage-gradient);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;


animation:

sageBreath 4s ease-in-out infinite;


filter:

drop-shadow(

0 0 35px rgba(198,161,91,.45)

);

}



@keyframes sageBreath{


0%{

transform:scale(1);

opacity:.55;

}


50%{

transform:scale(1.12);

opacity:1;

}


100%{

transform:scale(1);

opacity:.55;

}


}


/* =====================================================
   BACK TO TOP
===================================================== */

#backToTop{

position:fixed;

right:35px;

bottom:35px;


width:55px;

height:55px;


border-radius:50%;


border:1px solid rgba(240,216,154,.5);


background:

linear-gradient(

135deg,

rgba(240,216,154,.9),

rgba(198,161,91,.9),

rgba(163,76,0,.9)

);


color:#050505;


font-size:1.5rem;


display:flex;

align-items:center;

justify-content:center;


cursor:pointer;


opacity:0;

visibility:hidden;


transition:.5s;


box-shadow:

0 0 40px rgba(198,161,91,.35);


z-index:999;


}


#backToTop:hover{

transform:translateY(-5px);


box-shadow:

0 0 70px rgba(198,161,91,.6);

}



#backToTop.show{

opacity:1;

visibility:visible;

}