:root{
  --bg:#050505;
  --bg-2:#0b0b0b;
  --fg:#ececec;
  --fg-soft:#b9b9b9;
  --fg-dim:#7c7c7c;
  --fg-faint:#4a4a4a;
  --line:rgba(255,255,255,0.06);
  --glow:rgba(255,255,255,0.75);
  --font-display:'Space Grotesk', sans-serif;
  --font-body:'Inter', sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{background:var(--bg);}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-body);
  font-weight:300;
  overflow-x:hidden;
  cursor:none;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
::selection{background:#fff; color:#000;}

@media (hover:none){
  body{cursor:auto;}
  .cursor-dot, .cursor-ring{display:none;}
}

/* bioluminescent ground */
#lumen{
  position:fixed; inset:0; width:100vw; height:100vh;
  z-index:0; pointer-events:none;
}
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:0.045;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;
}

/* cursor */
.cursor-dot, .cursor-ring{
  position:fixed; top:0; left:0; border-radius:50%;
  pointer-events:none; z-index:999; transform:translate(-50%,-50%);
}
.cursor-dot{width:4px; height:4px; background:#fff; box-shadow:0 0 10px rgba(255,255,255,.8);}
.cursor-ring{
  width:30px; height:30px; border:1px solid rgba(255,255,255,0.25);
  transition:width .35s ease, height .35s ease, border-color .35s ease, background .35s ease;
}
.cursor-ring.near{width:54px; height:54px; border-color:rgba(255,255,255,0.45); background:rgba(255,255,255,0.03);}

/* glowing borders — lit near the cursor, fade out when it leaves */
.glow{
  position:relative; border:1px solid transparent;
  background:
    linear-gradient(var(--card, #080808), var(--card, #080808)) padding-box,
    radial-gradient(130% 160% at 50% 0%, rgba(255,255,255,0.07), rgba(255,255,255,0.015) 45%, rgba(255,255,255,0) 75%) border-box;
}
.glow::before{
  content:''; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none;
  background:radial-gradient(260px circle at var(--gx,-500px) var(--gy,-500px),
    rgba(255,255,255,0.85), rgba(255,255,255,0.18) 35%, transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:var(--go,0); transition:opacity .9s ease;
}
.glow::after{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(340px circle at var(--gx,-500px) var(--gy,-500px), rgba(255,255,255,0.045), transparent 65%);
  opacity:var(--go,0); transition:opacity .9s ease;
}

/* nav */
#nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:26px clamp(20px,5vw,64px);
  transition:background .6s ease, backdrop-filter .6s ease;
}
#nav.scrolled{background:linear-gradient(180deg, rgba(5,5,5,.85), rgba(5,5,5,0)); }
.nav-logo img{height:18px; width:auto; opacity:.9;}
.nav-links{display:flex; gap:40px; font-family:var(--font-display); font-weight:300; font-size:12px; letter-spacing:.22em; text-transform:uppercase;}
.nav-links a{color:var(--fg-dim); transition:color .4s ease, text-shadow .4s ease;}
.nav-links a:hover{color:#fff; text-shadow:0 0 14px rgba(255,255,255,.5);}
.nav-toggle{display:none; flex-direction:column; gap:7px; background:none; border:none; cursor:pointer; padding:6px;}
.nav-toggle span{width:24px; height:1px; background:var(--fg);}
.nav-right{display:flex; align-items:center; gap:18px;}

.sound-toggle{
  display:flex; align-items:center; gap:3px; height:18px; padding:6px;
  background:none; border:none; cursor:pointer;
}
.sound-bar{
  width:2px; height:14px; background:#fff; border-radius:2px; opacity:.7;
  animation:soundwave 1.6s ease-in-out infinite;
}
.sound-bar:nth-child(2){animation-delay:.2s;}
.sound-bar:nth-child(3){animation-delay:.4s;}
.sound-bar:nth-child(4){animation-delay:.6s;}
@keyframes soundwave{0%,100%{transform:scaleY(.25);}50%{transform:scaleY(1);}}
.sound-toggle.muted .sound-bar{animation:none; transform:scaleY(.15); opacity:.35;}

.sound-hint{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%); z-index:90;
  font-family:var(--font-display); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--fg-dim); padding:10px 18px; border-radius:999px;
  background:radial-gradient(ellipse at center, rgba(5,5,5,.85), rgba(5,5,5,0) 75%);
  white-space:nowrap; transition:opacity 1.2s ease; animation:hintpulse 3s ease-in-out infinite;
}
.sound-hint.hide{opacity:0; pointer-events:none;}
@keyframes hintpulse{0%,100%{color:var(--fg-faint);}50%{color:var(--fg-soft);}}

@media (max-width:760px){
  .nav-links{
    position:fixed; inset:0 0 0 auto; width:75%; height:100vh;
    background:rgba(8,8,8,.97); flex-direction:column; justify-content:center; align-items:flex-start;
    padding:40px; gap:30px; transform:translateX(100%); transition:transform .5s ease; font-size:14px;
  }
  .nav-links.open{transform:translateX(0);}
  .nav-toggle{display:flex;}
}

/* hero */
.hero{
  position:relative; height:100vh; min-height:620px; overflow:hidden; z-index:2;
  display:flex; align-items:flex-end; justify-content:center;
}
.hero-halo{
  position:absolute; left:50%; top:46%; width:min(1100px,120vw); aspect-ratio:1; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 35%, transparent 62%);
  pointer-events:none;
}
#heroField{
  position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 55%, #000 30%, transparent 85%);
  mask-image:radial-gradient(ellipse 75% 70% at 50% 55%, #000 30%, transparent 85%);
  opacity:0; animation:fadein 5s ease 1.2s forwards;
}
.hero-portrait{
  --lit:0;
  position:absolute; bottom:0; left:50%; z-index:1; transform:translate3d(-50%,0,0);
  height:92vh; max-width:none; width:auto;
  -webkit-mask-image:linear-gradient(180deg, #000 45%, transparent 96%), radial-gradient(ellipse 58% 72% at 50% 38%, #000 38%, transparent 82%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
  mask-image:linear-gradient(180deg, #000 45%, transparent 96%), radial-gradient(ellipse 58% 72% at 50% 38%, #000 38%, transparent 82%);
  filter:brightness(calc(0.78 + var(--lit) * 0.32)) contrast(calc(1 + var(--lit) * 0.08));
  opacity:0; animation:portraitin 4.5s cubic-bezier(.25,.1,.25,1) .3s forwards;
  will-change:transform, filter;
}
@keyframes portraitin{from{opacity:0;} to{opacity:.96;}}
.hero-fade{position:absolute; inset:auto 0 0 0; z-index:2; height:38vh; background:linear-gradient(180deg, transparent, var(--bg)); pointer-events:none;}
.hero-content{position:relative; z-index:3; text-align:center; padding:0 20px 13vh; width:100%;}
.hero-logo img{
  width:clamp(220px, 34vw, 520px); height:auto; margin:0 auto;
  filter:drop-shadow(0 0 30px rgba(255,255,255,.18));
  opacity:0; animation:logoin 4.2s cubic-bezier(.25,.1,.25,1) 2.6s forwards;
}
@keyframes logoin{from{opacity:0; filter:blur(10px) drop-shadow(0 0 30px rgba(255,255,255,0));} to{opacity:1; filter:blur(0) drop-shadow(0 0 30px rgba(255,255,255,.18));}}
.hero-actions{margin-top:42px; display:flex; gap:16px; justify-content:center; opacity:0; animation:fadein 2.4s ease 5.2s forwards;}
@keyframes fadein{to{opacity:1;}}

.btn{
  font-family:var(--font-display); font-weight:300; font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  padding:15px 30px; border-radius:999px; display:inline-block; color:var(--fg);
  --card:rgba(8,8,8,.9);
  transition:color .5s ease, box-shadow .8s ease;
}
.btn:hover{color:#fff; box-shadow:0 0 50px rgba(255,255,255,0.07);}

.scroll-cue{position:absolute; bottom:22px; left:50%; transform:translateX(-50%); z-index:3;}
.scroll-cue span{
  display:block; width:1px; height:42px; background:linear-gradient(rgba(255,255,255,.6), transparent);
  animation:scrollcue 2.4s ease-in-out infinite;
}
@keyframes scrollcue{
  0%{transform:scaleY(0); transform-origin:top;}
  50%{transform:scaleY(1); transform-origin:top;}
  50.01%{transform-origin:bottom;}
  100%{transform:scaleY(0); transform-origin:bottom;}
}

/* sections */
.section{position:relative; z-index:2; padding:150px clamp(20px,6vw,64px);}
.section-inner{max-width:1120px; margin:0 auto;}
.section-label{
  display:flex; align-items:center; gap:16px; margin-bottom:64px;
  font-family:var(--font-display); font-weight:300; text-transform:uppercase; letter-spacing:.3em; font-size:11px;
  color:var(--fg-dim);
}
.section-label .num{color:var(--fg-faint);}
.section-label::after{content:''; flex:1; height:1px; background:linear-gradient(90deg, var(--line), transparent);}

.reveal{opacity:0; transform:translateY(24px); filter:blur(4px); transition:opacity 1.2s ease, transform 1.2s ease, filter 1.2s ease;}
.reveal.in{opacity:1; transform:none; filter:none;}

/* about */
.bio-grid{display:grid; grid-template-columns:180px 1fr; gap:48px; align-items:start;}
.bio-grid .section-label{margin-top:10px;}
.bio-text{max-width:640px;}
.bio-text p{
  font-size:clamp(15px,1.25vw,17px); line-height:1.95; font-weight:300; letter-spacing:.01em;
  color:var(--fg-soft); margin-bottom:24px;
}
.bio-text p:first-child{font-size:clamp(17px,1.5vw,20px); color:var(--fg); line-height:1.8;}
.bio-text strong{font-weight:400; color:#fff;}
.bio-text em{font-style:normal; color:#fff;}
.genre-tags{display:flex; flex-wrap:wrap; gap:10px; margin-top:40px;}
.genre-tags span{
  font-family:var(--font-display); font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  padding:8px 16px; border-radius:999px; color:var(--fg-dim); border:1px solid transparent;
  background:linear-gradient(#070707,#070707) padding-box, radial-gradient(120% 180% at 50% 0%, rgba(255,255,255,.08), rgba(255,255,255,0) 70%) border-box;
}
@media (max-width:760px){ .bio-grid{grid-template-columns:1fr; gap:0;} }

/* music */
.track-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:24px;}
.track{border-radius:22px; padding:28px;}
.track-head{margin-bottom:20px;}
.track h3{font-family:var(--font-display); font-weight:300; font-size:24px; letter-spacing:.04em;}
.track-info{color:var(--fg-dim); font-size:12px; letter-spacing:.08em; margin-top:6px;}
.track-embed iframe, .spotify-embed iframe{border-radius:12px; display:block;}
.track-embed, .spotify-embed{
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent), linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-composite:source-in; mask-composite:intersect;
  mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent), linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent);
}
.track-embed:empty{display:none;}
.track-grid.no-embeds .track-head{margin-bottom:0;}
.spotify-embed{padding:0;}
.spotify-embed.hidden{display:none;}
@media (max-width:760px){ .track-grid{grid-template-columns:1fr;} }

/* shows */
.show-card{
  display:flex; align-items:center; gap:40px; padding:36px;
  border-radius:22px;
}
.show-date{font-family:var(--font-display); text-align:center; flex:none; padding-right:36px; background:linear-gradient(180deg, transparent, rgba(255,255,255,.09), transparent) right center / 1px 100% no-repeat;}
.show-month{display:block; font-size:11px; letter-spacing:.3em; color:var(--fg-dim);}
.show-day{display:block; font-size:58px; font-weight:300; line-height:1.05;}
.show-year{display:block; font-size:11px; letter-spacing:.2em; color:var(--fg-faint);}
.show-info{flex:1;}
.show-info h3{font-family:var(--font-display); font-weight:300; font-size:24px; margin-bottom:8px; letter-spacing:.03em;}
.show-venue{color:var(--fg-soft); font-size:14px; margin-bottom:4px;}
.show-lineup{font-size:12px; color:var(--fg-dim); margin-bottom:18px; letter-spacing:.03em;}
.countdown{display:flex; gap:22px; font-family:var(--font-display);}
.countdown div{text-align:left;}
.countdown .cd-num{font-size:20px; font-weight:300; display:block;}
.countdown .cd-label{font-size:9px; letter-spacing:.25em; color:var(--fg-dim);}
.countdown .cd-live{font-size:12px; letter-spacing:.3em; text-transform:uppercase;}
.show-cta{flex:none;}
.shows-more{margin-top:26px; color:var(--fg-dim); font-size:13px;}
.shows-more a{color:var(--fg-soft); transition:color .4s, text-shadow .4s;}
.shows-more a:hover{color:#fff; text-shadow:0 0 14px rgba(255,255,255,.5);}
@media (max-width:700px){
  .show-card{flex-direction:column; align-items:flex-start; gap:20px; padding:28px;}
  .show-date{background:linear-gradient(90deg, rgba(255,255,255,.09), transparent) left bottom / 100% 1px no-repeat; padding:0 0 16px; width:100%; text-align:left;}
}

/* visuals */
.visual{--lit:0; margin:0; overflow:hidden;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%, #000 45%, transparent 100%);
  mask-image:radial-gradient(ellipse 50% 50% at 50% 50%, #000 45%, transparent 100%);
}
.visual img{width:100%; height:100%; object-fit:cover;
  filter:grayscale(calc(1 - var(--lit) * 0.55)) brightness(calc(0.72 + var(--lit) * 0.38)) contrast(1.05);
  transform:scale(calc(1 + var(--lit) * 0.025));
}
.visual-row.empty{display:none;}
.visual-wide{aspect-ratio:2.5/1; margin-bottom:24px;}
.visual-row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; align-items:center;}
.visual-square{aspect-ratio:1/1;}
.visual-caption{padding:20px clamp(0px,4vw,48px);}
.caption-kicker{font-family:var(--font-display); font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--fg-dim); margin-bottom:14px;}
.caption-title{font-family:var(--font-display); font-weight:300; font-size:clamp(28px,4vw,44px); letter-spacing:.04em; margin-bottom:14px;}
.caption-text{color:var(--fg-soft); font-size:15px; line-height:1.8; max-width:360px;}
@media (max-width:760px){ .visual-row{grid-template-columns:1fr;} .visual-wide{aspect-ratio:16/9;} }

/* contact */
.contact-title{font-family:var(--font-display); font-weight:300; font-size:clamp(30px,5vw,54px); letter-spacing:.02em; margin-bottom:16px;}
.contact-inner > p{color:var(--fg-soft); margin-bottom:34px; font-size:15px;}
.social-row{display:flex; flex-wrap:wrap; gap:30px; margin-top:64px; padding-top:30px; background:linear-gradient(90deg, rgba(255,255,255,.09), transparent 70%) left top / 100% 1px no-repeat;}
.social-row a{font-family:var(--font-display); font-size:11px; letter-spacing:.25em; text-transform:uppercase; color:var(--fg-dim); transition:color .4s, text-shadow .4s;}
.social-row a:hover{color:#fff; text-shadow:0 0 14px rgba(255,255,255,.5);}

/* footer */
.footer{position:relative; z-index:2; text-align:center; padding:60px 20px 70px; color:var(--fg-faint); font-size:11px; letter-spacing:.08em;}
.footer-logo{height:14px; width:auto; margin:0 auto 18px; opacity:.5;}
.footer p{display:flex; align-items:center; justify-content:center; gap:7px; flex-wrap:wrap;}
.footer-label-logo{height:14px; width:auto; opacity:.55; filter:grayscale(1) brightness(1.6);}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important;}
  .reveal{opacity:1; transform:none; filter:none;}
  .hero-portrait, .hero-logo img, .hero-actions, #heroField{opacity:1;}
}