:root{--bone:#e8e2d4;--gold:#d9a441;--ink:#000}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}body{background:#000;color:var(--bone);font-family:Georgia,serif;overflow-x:hidden}
h2,button,nav a{font-family:Michroma,sans-serif;letter-spacing:.3em;text-transform:uppercase}
#hero{height:100vh;height:100svh;background:#000 center/cover no-repeat;background-image:url(assets/hero.jpg);background-image:image-set(url(assets/hero.jpg) 1x,url(assets/hero_4k.jpg) 2x);display:flex;align-items:flex-end;justify-content:center;padding-bottom:9vh}
@media (min-width:2200px){#hero{background-image:url(assets/hero_4k.jpg)}}
#enter{background:transparent;color:var(--gold);border:1px solid rgba(217,164,65,.45);padding:.9em 2.4em .9em 2.7em;font-size:.8rem;cursor:pointer;transition:.6s;text-shadow:0 0 12px rgba(217,164,65,.5)}
#enter:hover{border-color:var(--gold);box-shadow:0 0 24px rgba(217,164,65,.25)}
#mute{position:fixed;top:16px;right:16px;z-index:10;background:rgba(0,0,0,.6);color:var(--bone);border:1px solid rgba(232,226,212,.25);font-size:.55rem;padding:.6em 1em;cursor:pointer;opacity:.7}
#mute.on{color:var(--gold);border-color:rgba(217,164,65,.5)}
#descent{position:relative;height:120vh;min-height:520px;background:linear-gradient(#000,#030303 50%,#000);display:flex;align-items:center;justify-content:center}
#dust{position:absolute;inset:0;width:100%;height:100%}
.manifesto{position:relative;text-align:center;font-size:clamp(1.1rem,2.4vw,1.8rem);line-height:1.8;padding:0 8vw;opacity:.85;font-style:italic}
.manifesto span{color:var(--gold);font-style:normal}
#music{padding:12vh 6vw;max-width:1200px;margin:auto}
#music h2{font-size:clamp(1.2rem,3vw,2rem);margin-bottom:3rem;text-align:center;font-weight:400}
#tracks{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:2.5rem}
.track{border:1px solid rgba(232,226,212,.15);background:#050505}
.track img,.track .nocover{width:100%;aspect-ratio:1;object-fit:cover;display:block;filter:grayscale(.3) contrast(1.1)}
.track .nocover{background:radial-gradient(circle,#1a1a1a,#000 70%)}
.track .meta{padding:1rem 1.2rem 1.3rem}
.track h3{font-family:Michroma,sans-serif;font-weight:400;font-size:.9rem;letter-spacing:.12em}
.track .year{opacity:.5;font-size:.85rem;margin:.3rem 0 .8rem}
.track button{background:none;border:1px solid rgba(217,164,65,.4);color:var(--gold);font-size:.6rem;padding:.5em 1em;cursor:pointer}
.track .links a{color:var(--bone);opacity:.7;margin-right:1rem;font-size:.8rem}
.track .links .soon{opacity:.35;font-size:.8rem;font-style:italic}
footer{padding:10vh 6vw 6vh;text-align:center;border-top:1px solid rgba(232,226,212,.08)}
.spark{width:6px;height:6px;margin:0 auto 2rem;border-radius:50%;background:#ffd88a;box-shadow:0 0 10px 3px rgba(217,164,65,.8),0 0 40px 10px rgba(217,164,65,.25);animation:pulse 4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.6;transform:scale(.8)}}
footer nav a{color:var(--bone);opacity:.6;text-decoration:none;font-size:.6rem;margin:0 1em}
footer p{opacity:.3;font-size:.75rem;margin-top:2rem}
@media(max-width:600px){#hero{background-position:center 40%}#music{padding:10vh 5vw}}
.reveal{opacity:1;transform:none}
@media (max-aspect-ratio:4/3),(max-width:700px){
#hero{height:auto;min-height:0;aspect-ratio:16/9;background-size:contain;background-position:center top;padding:0;position:relative;display:block}
#hero::after{content:"";display:block;height:0}
#enter{position:absolute;left:50%;bottom:-5.5rem;transform:translateX(-50%);white-space:nowrap}
#descent{height:100vh;padding-top:8rem}
}
#tracks{justify-content:center;grid-template-columns:repeat(auto-fit,minmax(260px,340px))}
@media (max-aspect-ratio:4/3),(max-width:700px){#enter{z-index:5}#hero{z-index:2}#mute{top:auto;bottom:16px}}

/* ---- hero animation ---- */
#hero{position:relative;overflow:hidden;background:#000!important}
#enter{position:relative;z-index:5}
.stage{position:absolute;left:50%;top:50%;width:max(100%,calc(100svh*16/9));aspect-ratio:16/9;transform:translate(-50%,-50%)}
@media(max-width:600px){.stage{top:40%}}
.stage>*{position:absolute}.hbg{inset:0;width:100%;height:100%;display:block}
.flash{inset:0;background:radial-gradient(ellipse at 60% 20%,rgba(235,22,10,1),rgba(90,0,0,.4) 75%);opacity:0;mix-blend-mode:screen;
-webkit-mask:url(assets/window_mask_4k.png) 0 0/100% 100%;mask:url(assets/window_mask_4k.png) 0 0/100% 100% luminance}
.astro{left:47.604%;top:53.889%;width:5.781%;aspect-ratio:111/129;animation:bob 11s ease-in-out infinite,sway 13.7s ease-in-out infinite;transform-origin:50% 45%}
.astro img{width:100%;height:100%;display:block}
.alit{inset:0;position:absolute;opacity:0;background:rgba(170,40,30,.9);mix-blend-mode:screen;-webkit-mask:url(assets/astro_4k.png) 0 0/100% 100%;mask:url(assets/astro_4k.png) 0 0/100% 100% alpha}
.astro{translate:0 0}
@keyframes bob{0%,100%{translate:0 0}27%{translate:.12% -3.5%}55%{translate:-.08% 2.5%}80%{translate:.05% -1.2%}}
@keyframes sway{0%,100%{rotate:-2deg;margin-left:0}35%{rotate:2.5deg;margin-left:.25%}70%{rotate:-.8deg;margin-left:-.2%}}
@media (max-aspect-ratio:4/3),(max-width:700px){#hero{overflow:visible}.stage{left:0;top:0;width:100%;transform:none}#enter{position:absolute}}
/* bass-reactive glow over the baked gold spark (spark centre 959.5,161 of 1920x1080) */
.sglow{left:49.97%;top:14.9%;width:7%;aspect-ratio:1;translate:-50% -50%;pointer-events:none;mix-blend-mode:screen;opacity:.25;
background:radial-gradient(circle,rgba(255,236,170,1) 0,rgba(240,180,70,.55) 14%,rgba(200,120,30,.18) 38%,rgba(160,80,20,0) 70%);animation:sbreath 7s ease-in-out infinite}
@keyframes sbreath{0%,100%{opacity:.18;scale:.9}50%{opacity:.34;scale:1.05}}
.sflick{left:49.97%;top:14.9%;width:4.2%;aspect-ratio:1;translate:-50% -50%;pointer-events:none;mix-blend-mode:screen;opacity:.3;
background:radial-gradient(circle,rgba(255,240,190,.9) 0,rgba(245,190,80,.35) 18%,rgba(0,0,0,0) 55%),repeating-conic-gradient(from 0deg,rgba(255,210,120,.22) 0deg 2deg,rgba(0,0,0,0) 2deg 45deg);
-webkit-mask:radial-gradient(circle,#000 0,#000 25%,transparent 70%);mask:radial-gradient(circle,#000 0,#000 25%,transparent 70%)}
@media (prefers-reduced-motion:reduce){.astro,.sglow{animation:none}.flash,.alit{display:none}}

.track .player{display:flex;align-items:center;gap:.7rem;margin-top:.9rem}
.track .seek{flex:1;accent-color:var(--gold);height:2px}
.track .tm{font-size:.7rem;opacity:.55;font-variant-numeric:tabular-nums;white-space:nowrap}
body.track-playing .track button{border-color:var(--gold)}

/* ---- portrait / phone: full-screen hero, separate wordmark layer ---- */
.stage>picture{inset:0}.wmp{display:none}
@media (max-aspect-ratio:4/3){
#hero{height:100vh;height:100svh;aspect-ratio:auto;min-height:0;overflow:hidden;display:block;position:relative}
.stage{left:50%;top:50%;width:max(100%,calc(100svh*16/9));transform:translate(-50%,-50%)}
.wmp{display:block;position:absolute;left:50%;top:28.3%;width:94vw;max-width:none;transform:translate(-50%,-50%);z-index:3;pointer-events:none}
#enter{position:absolute;left:50%;bottom:10svh;transform:translateX(-50%);z-index:5}
#descent{height:100vh;padding-top:0}
}

/* ---- track visualizer ---- */
#vizbg{position:fixed;inset:0;z-index:-1;background:#000 url(assets/neb_notext_4k.jpg) center/cover;opacity:0;transition:opacity 2s ease;pointer-events:none}
#vizbg .nf{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 55%,rgba(235,22,10,.9),rgba(120,0,0,.35) 60%,rgba(0,0,0,0) 85%);mix-blend-mode:screen;opacity:0}
#viz{position:fixed;inset:0;width:100vw;height:100vh;height:100lvh;z-index:0;pointer-events:none;opacity:0;transition:opacity 2s ease}
body.track-playing #vizbg{opacity:.55}body.track-playing #viz{opacity:1}
#descent,#music,footer{position:relative;z-index:1;transition:background 2s}
body.track-playing #descent{background:transparent}
.stage>.neb{inset:0;opacity:0;transition:opacity 2s ease}.neb img{width:100%;height:100%;display:block}
.hbg,.astro{transition:opacity 2s ease}
body.track-playing .stage .neb{opacity:1}
body.track-playing .hbg,body.track-playing .astro,body.track-playing .flash{opacity:0!important}
#hero{z-index:1}

/* v16: transparent hero while a track plays, so the fixed nebula+analyzer shows everywhere */
#hero{transition:background-color 2s}
body.track-playing #hero{background:transparent!important}
.stage>.wmt{inset:0;width:100%;height:100%;opacity:0;transition:opacity 2s ease;pointer-events:none}
body.track-playing .stage>.neb{opacity:0}
body.track-playing .stage>.wmt{opacity:1}
@media (max-aspect-ratio:4/3){body.track-playing .stage>.wmt{opacity:0}#vizbg{background-image:url(assets/neb_portrait_4k.jpg)}}
#enter{transition:opacity 1s ease,visibility 1s}
body.entered #enter{opacity:0;visibility:hidden;pointer-events:none}
@media (max-aspect-ratio:4/3){.wmp{width:88vw;filter:drop-shadow(0 0 6px rgba(0,0,0,.9))}}
@media (min-width:2400px) and (min-height:1400px){html{font-size:200%}#music{max-width:2400px}#tracks{grid-template-columns:repeat(auto-fit,minmax(520px,680px))}#mute{font-size:1.1rem}}
/* v17: wider than 16:9 -> fit stage by height, mirrored nebula extension on the sides */
@media (min-aspect-ratio:1610/900){
#hero{height:100vh;height:100svh;background:#000 url(assets/neb_notext_4k.jpg) center/cover no-repeat!important}
.stage{width:calc(100svh*16/9);height:100svh;top:50%;left:50%;transform:translate(-50%,-50%)}
.stage{-webkit-mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
body.track-playing #hero{background:transparent!important}
}
#music{max-width:1320px}#tracks{gap:2rem;grid-template-columns:repeat(auto-fit,minmax(240px,320px))}
@media (min-width:2400px) and (min-height:1400px){#tracks{grid-template-columns:repeat(auto-fit,minmax(480px,600px))}}
#music{max-width:none;padding-left:max(5vw,calc(50% - 560px));padding-right:max(5vw,calc(50% - 560px))}
@media (min-width:2400px) and (min-height:1400px){#music{padding-left:max(5vw,calc(50% - 1000px));padding-right:max(5vw,calc(50% - 1000px))}}
#music{padding-left:max(5vw,calc(50% - 640px));padding-right:max(5vw,calc(50% - 640px))}#tracks{grid-template-columns:repeat(auto-fit,minmax(220px,290px))}
@media (max-width:600px){#tracks{grid-template-columns:repeat(auto-fit,minmax(240px,340px))}}
@media (min-width:2400px) and (min-height:1400px){#music{padding-left:max(5vw,calc(50% - 1050px));padding-right:max(5vw,calc(50% - 1050px))}#tracks{grid-template-columns:repeat(auto-fit,minmax(420px,480px))}}
/* v18: flex grid, last row centred */
#tracks{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem}
#tracks>.track{flex:0 1 330px;min-width:0}
@media (min-width:2400px) and (min-height:1400px){#tracks>.track{flex-basis:620px}}

/* motto screen: logo emerges from the void on intro bass hits */
.mlogo{position:absolute;left:50%;bottom:100%;width:min(78vw,max(46vw,300px),1600px);height:auto;transform:translateX(-50%);margin-bottom:clamp(1.6rem,6vh,4.5rem);opacity:0;pointer-events:none;user-select:none;will-change:opacity,filter}

/* v30: ENTER never comes back; post-ENTER slow swirling nebula */
#enter[hidden],body.entered #enter,body.track-playing #enter{display:none!important}
#vizbg{background:#000!important;overflow:hidden}
#vizbg::before{content:'';position:absolute;inset:-12%;background:url(assets/neb_notext_4k.jpg) center/cover no-repeat;transform:translateZ(0);will-change:transform}
@media (max-aspect-ratio:4/3){#vizbg::before{background-image:url(assets/neb_portrait_4k.jpg)}}
#vizbg .nf{z-index:1}
body.entered #vizbg::before{animation:duswirl 46s ease-in-out infinite alternate}
@keyframes duswirl{0%{transform:rotate(-6deg) scale(1.03)}50%{transform:rotate(0deg) scale(1.07)}100%{transform:rotate(6deg) scale(1.03)}}
body.entered:not(.track-playing) #vizbg{opacity:.85}
/* v36: after ENTER the cross window + astronaut stay; only the ink around them swirls (masked) */
body.entered #hero{background:transparent!important}
body.entered .stage>.neb{opacity:0!important}
body.entered .hbg{-webkit-mask:url(assets/cross_mask.png) center/100% 100% no-repeat;mask:url(assets/cross_mask.png) center/100% 100% no-repeat}
body.entered .stage>.wmt{opacity:1}
@media (max-aspect-ratio:4/3){body.entered .stage>.wmt{opacity:0}}
@media (prefers-reduced-motion:reduce){body.entered #vizbg::before{animation-duration:120s}}

/* v31: visitor counter */
#visits{font-family:'Michroma',sans-serif;font-size:.58rem!important;letter-spacing:.22em;color:var(--bone);opacity:.38!important;margin-top:2.2rem!important;white-space:nowrap}
#visits[hidden]{display:none}
#visits b{font-weight:400;color:var(--gold);margin:0 .35em}
@media (max-width:420px){#visits{font-size:.5rem!important;letter-spacing:.14em}}

/* v31: like heart */
.track .meta{position:relative}
.like{position:absolute;top:.9rem;right:.9rem;display:flex;align-items:center;gap:.45em;background:none;border:0;padding:.3em;cursor:pointer;color:var(--gold);font-family:'Michroma',sans-serif;font-size:.62rem;letter-spacing:.12em;opacity:.55;transition:opacity .3s,transform .3s}
.like:hover{opacity:.95}
.like svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.6;transition:fill .3s,filter .3s}
.like.on{opacity:.95}.like.on svg{fill:#b3120c;stroke:#e0261a;filter:drop-shadow(0 0 6px rgba(220,30,20,.6))}
.like .lc{display:none;color:var(--bone)}.like.ok .lc{display:inline}
.like.pop{transform:scale(1.25)}
@media (max-width:600px){.like svg{width:1.5rem;height:1.5rem}.like{font-size:.7rem}}
.track .meta .like,.track .meta .like:hover{border:0!important;box-shadow:none!important;background:none!important;padding:.3em!important}

/* v32: YouTube / SoundCloud buttons */
.track .links{display:flex;flex-wrap:wrap;gap:.6rem}
.track .links a.lnk{display:inline-flex;align-items:center;gap:.5em;margin:0;padding:.45em .9em;border:1px solid rgba(217,164,65,.35);color:var(--bone);opacity:.75;text-decoration:none;font-family:'Michroma',sans-serif;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;transition:opacity .3s,border-color .3s,box-shadow .3s}
.track .links a.lnk:hover{opacity:1;border-color:var(--gold);box-shadow:0 0 14px rgba(217,164,65,.2)}
.track .links a.lnk svg{width:1.15rem;height:1.15rem;fill:var(--gold)}
@media (max-width:600px){.track .links a.lnk{font-size:.62rem;padding:.6em 1em}}
@media (max-width:600px){.track .links{gap:.5rem}.track .links a.lnk{font-size:.55rem;letter-spacing:.08em;padding:.6em .75em}}