:root{
  --bg:#000000;
  --card:#0a0f1f;
  --card-light:#151b2f;
  --muted:#8b92ac;
  --accent:#ff00ff;
  --accent-alt:#00ffff;
  --danger:#ff0080;
  --glass: rgba(255,255,255,0.05);
  --glass-light: rgba(255,255,255,0.1);
  --max-width:1300px;
  font-size:16px;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;
  background:#000;
  color:#e6eef8;
  line-height:1.5;
  overflow-x:hidden;
  position:relative;
}

body.glitch::before{
  content:'';
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:linear-gradient(180deg,#000000 0%,#0a0f1f 50%,#000814 100%);
  pointer-events:none;
  z-index:-1;
}

.scanlines{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:repeating-linear-gradient(0deg,rgba(255,0,255,0.02),rgba(255,0,255,0.02) 2px,transparent 2px,transparent 4px);
  pointer-events:none;
  z-index:99;
  animation:scanline-move 8s linear infinite, scanline-glitch 0.15s ease-in-out infinite;
}

@keyframes scanline-move{
  0%{transform:translateY(0)}
  100%{transform:translateY(10px)}
}

@keyframes scanline-glitch{
  0%{opacity:0.03}
  50%{opacity:0.08}
  100%{opacity:0.03}
}

.container{
  max-width:var(--max-width);
  margin:0 auto;
  padding:24px;
}

/* Header */
.site-header{
  backdrop-filter:saturate(200%) blur(20px);
  position:sticky;
  top:0;
  background:linear-gradient(180deg,rgba(0,0,0,0.8),rgba(0,0,0,0.3));
  border-bottom:2px solid var(--accent);
  z-index:100;
  animation:header-glow 3s ease-in-out infinite;
}

@keyframes header-glow{
  0%,100%{box-shadow:0 0 20px rgba(255,0,255,0.3)}
  50%{box-shadow:0 0 40px rgba(255,0,255,0.6)}
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.logo{
  display:flex;
  align-items:center;
  gap:12px;
  color:inherit;
  text-decoration:none;
  animation:pulse 2s ease-in-out infinite;
}

.logo:hover{
  filter:brightness(1.5);
}

.brand{
  font-weight:900;
  font-size:18px;
  background:linear-gradient(90deg,#ff00ff,#00ffff,#ff00ff);
  background-size:200% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:gradient-shift 4s linear infinite;
  text-transform:uppercase;
  letter-spacing:2px;
}

@keyframes gradient-shift{
  0%{background-position:0% center}
  100%{background-position:200% center}
}

@keyframes pulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.05)}
}

.nav-toggle{
  display:none;
  background:none;
  border:0;
  color:var(--accent);
  font-size:24px;
  cursor:pointer;
  animation:blink 1s ease-in-out infinite;
}

@keyframes blink{
  0%,100%{opacity:1}
  50%{opacity:0.5}
}

.main-nav{
  display:flex;
  gap:20px;
  list-style:none;
}

.main-nav a{
  color:#fff;
  text-decoration:none;
  font-weight:700;
  text-transform:uppercase;
  font-size:14px;
  letter-spacing:2px;
  position:relative;
  transition:all 0.3s;
}

.main-nav a::before{
  content:'';
  position:absolute;
  bottom:-4px;
  left:0;
  width:0;
  height:3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-alt));
  transition:width 0.4s;
}

.main-nav a:hover::before{
  width:100%;
}

.main-nav a:hover{
  color:var(--accent);
  text-shadow:0 0 10px var(--accent),0 0 20px var(--accent);
}

.main-nav a.active{
  color:var(--accent);
  text-shadow:0 0 15px var(--accent);
}

/* HERO */
.hero{
  position:relative;
  padding:100px 0;
  text-align:center;
  overflow:hidden;
  min-height:80vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

.hero-bg{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:linear-gradient(135deg,rgba(255,0,255,0.1),rgba(0,255,255,0.1));
  animation:bg-pulse 6s ease-in-out infinite;
  z-index:-1;
}

@keyframes bg-pulse{
  0%,100%{transform:scale(1);opacity:0.5}
  50%{transform:scale(1.05);opacity:0.8}
}

.floating-shapes{
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  z-index:-1;
}

.shape{
  position:absolute;
  border:2px solid var(--accent);
  opacity:0.3;
  animation:float-shape 8s ease-in-out infinite;
}

.shape-1{
  width:200px;
  height:200px;
  top:10%;
  left:10%;
  border-radius:30% 70% 70% 30%;
  animation-delay:0s;
}

.shape-2{
  width:300px;
  height:300px;
  top:60%;
  right:5%;
  border-radius:50%;
  animation-delay:2s;
  border-color:var(--accent-alt);
}

.shape-3{
  width:150px;
  height:150px;
  bottom:10%;
  left:50%;
  border-radius:10%;
  animation-delay:4s;
  border-color:var(--danger);
}

@keyframes float-shape{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  25%{transform:translate(20px,-20px) rotate(90deg)}
  50%{transform:translate(0,20px) rotate(180deg)}
  75%{transform:translate(-20px,-10px) rotate(270deg)}
}

.hero-inner{
  position:relative;
  z-index:2;
}

.hero-glitch{
  font-size:clamp(24px,5vw,48px);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:3px;
  color:var(--accent);
  margin-bottom:8px;
  animation:glitch-anim 3s ease-in-out infinite;
  position:relative;
}

@keyframes glitch-anim{
  0%{text-shadow:3px 3px 0px var(--accent-alt),-3px -3px 0px var(--danger)}
  25%{text-shadow:-3px 3px 0px var(--accent-alt),3px -3px 0px var(--danger)}
  50%{text-shadow:3px -3px 0px var(--accent-alt),-3px 3px 0px var(--danger)}
  75%{text-shadow:-3px -3px 0px var(--accent-alt),3px 3px 0px var(--danger)}
  100%{text-shadow:3px 3px 0px var(--accent-alt),-3px -3px 0px var(--danger)}
}

.glitch-text{
  font-size:clamp(32px,8vw,72px);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:4px;
  margin:0 0 20px;
  position:relative;
  background:linear-gradient(90deg,var(--accent),var(--accent-alt),var(--accent));
  background-size:200% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:glitch-text-shift 4s ease infinite;
}

@keyframes glitch-text-shift{
  0%{
    text-shadow:
      2px 2px 0px rgba(255,0,255,0.5),
      -2px -2px 0px rgba(0,255,255,0.5),
      4px 0px 0px rgba(255,0,0,0.3),
      -4px 0px 0px rgba(0,255,0,0.3);
    background-position:0% center;
    transform:skewX(-0.05deg);
  }
  25%{
    text-shadow:
      -3px 3px 0px rgba(255,0,255,0.8),
      3px -3px 0px rgba(0,255,255,0.8),
      -6px 2px 0px rgba(255,0,0,0.5),
      6px -2px 0px rgba(0,255,0,0.5);
    background-position:50% center;
    transform:skewX(0.05deg);
  }
  50%{
    text-shadow:
      3px -3px 0px rgba(255,0,255,0.5),
      -3px 3px 0px rgba(0,255,255,0.5),
      5px 0px 0px rgba(255,0,0,0.4),
      -5px 0px 0px rgba(0,255,0,0.4);
    background-position:100% center;
    transform:skewX(-0.08deg);
  }
  75%{
    text-shadow:
      -2px 2px 0px rgba(255,0,255,0.7),
      2px -2px 0px rgba(0,255,255,0.7),
      -4px -3px 0px rgba(255,0,0,0.6),
      4px 3px 0px rgba(0,255,0,0.6);
    background-position:50% center;
    transform:skewX(0.03deg);
  }
  100%{
    text-shadow:
      2px 2px 0px rgba(255,0,255,0.5),
      -2px -2px 0px rgba(0,255,255,0.5),
      4px 0px 0px rgba(255,0,0,0.3),
      -4px 0px 0px rgba(0,255,0,0.3);
    background-position:0% center;
    transform:skewX(-0.05deg);
  }
}

.pulse-text{
  color:var(--accent-alt);
  font-size:18px;
  letter-spacing:2px;
  text-transform:uppercase;
  animation:text-pulse 2s ease-in-out infinite;
  margin:0 0 24px;
}

@keyframes text-pulse{
  0%,100%{opacity:0.5;filter:blur(0px)}
  50%{opacity:1;filter:blur(0px)}
}

.cta-row{
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:32px;
}

.btn{
  display:inline-block;
  padding:14px 32px;
  border-radius:4px;
  text-decoration:none;
  font-weight:700;
  border:2px solid var(--accent);
  cursor:pointer;
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:14px;
  transition:all 0.3s;
  position:relative;
  overflow:hidden;
}

.btn::before{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:var(--accent);
  z-index:-1;
  transition:left 0.4s;
}

.btn:hover::before{
  left:0;
}

.glow-btn{
  background:transparent;
  color:var(--accent);
  box-shadow:0 0 20px rgba(255,0,255,0.4);
}

.glow-btn:hover{
  color:#000;
  box-shadow:0 0 40px rgba(255,0,255,0.8),inset 0 0 20px rgba(255,0,255,0.2);
  text-shadow:0 0 10px rgba(255,0,255,0.5);
}

.cyber-btn{
  background:transparent;
  color:var(--accent-alt);
  border-color:var(--accent-alt);
  box-shadow:0 0 15px rgba(0,255,255,0.3);
}

.cyber-btn:hover{
  color:#000;
  background:var(--accent-alt);
  box-shadow:0 0 30px rgba(0,255,255,0.6);
}

.neon-btn{
  background:transparent;
  color:var(--danger);
  border-color:var(--danger);
  box-shadow:0 0 15px rgba(255,0,128,0.3);
}

.neon-btn:hover{
  color:#fff;
  background:var(--danger);
  box-shadow:0 0 30px rgba(255,0,128,0.6);
}

/* PAGE HERO */
.page-hero{
  padding:60px 0;
  text-align:center;
  border-bottom:2px solid var(--accent);
  margin-bottom:40px;
  background:linear-gradient(180deg,rgba(255,0,255,0.05),transparent);
  animation:page-hero-glow 4s ease-in-out infinite;
}

/* HERO MEGA */
.hero-mega{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}

.mega-title{
  font-size:clamp(48px,10vw,92px);
  line-height:1.1;
  margin:30px 0;
  text-align:center;
}

.hero-subtitle{
  font-size:clamp(18px,2.5vw,28px);
  text-align:center;
  color:var(--accent-alt);
  margin-bottom:50px;
  letter-spacing:2px;
  text-transform:uppercase;
  animation:pulse 2s ease-in-out infinite;
}

.void-section{
  max-width:700px;
  margin:50px auto;
  padding:30px;
  background:linear-gradient(135deg,rgba(255,0,255,0.1),rgba(0,255,255,0.1));
  border:2px solid var(--accent);
  border-radius:4px;
  backdrop-filter:blur(10px);
  animation:card-float 3s ease-in-out infinite;
}

.void-text{
  font-size:20px;
  line-height:1.8;
  text-align:center;
  color:#e6eef8;
  margin:0;
  text-shadow:0 0 10px rgba(255,0,255,0.2);
}

.hero-cta{
  display:flex;
  gap:30px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:50px;
  z-index:10;
  position:relative;
}

.hero-link{
  padding:18px 40px;
  font-size:16px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:2px;
  border:2px solid;
  background:transparent;
  cursor:pointer;
  text-decoration:none;
  transition:all 0.3s ease;
  border-radius:4px;
  position:relative;
  overflow:hidden;
}

.glitch-link{
  color:var(--accent);
  border-color:var(--accent);
  box-shadow:0 0 20px rgba(255,0,255,0.3);
}

.glitch-link:hover{
  box-shadow:0 0 40px rgba(255,0,255,0.8);
  transform:scale(1.05);
}

.neon-link{
  color:var(--accent-alt);
  border-color:var(--accent-alt);
  box-shadow:0 0 20px rgba(0,255,255,0.3);
}

.neon-link:hover{
  box-shadow:0 0 40px rgba(0,255,255,0.8);
  transform:scale(1.05);
}

/* AMBIENT SECTION */
.ambient-section{
  padding:80px 24px;
  background:linear-gradient(180deg,rgba(0,0,0,0),rgba(255,0,255,0.03));
  position:relative;
}

.ambient-box{
  max-width:800px;
  margin:0 auto;
  text-align:center;
  background:linear-gradient(135deg,rgba(255,0,255,0.05),rgba(0,255,255,0.05));
  padding:60px 40px;
  border:2px solid var(--accent);
  border-radius:4px;
  backdrop-filter:blur(10px);
}

.ambient-title{
  font-size:48px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:3px;
  color:var(--accent);
  margin:0 0 40px;
  animation:glitch-anim 3s ease-in-out infinite;
}

.frequency-bars{
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:12px;
  height:120px;
}

.bar{
  width:8px;
  background:linear-gradient(180deg,var(--accent),var(--accent-alt));
  border-radius:2px;
  animation:bar-pulse 0.6s ease-in-out infinite;
}

.bar-1{animation-delay:0s}
.bar-2{animation-delay:0.1s}
.bar-3{animation-delay:0.2s}
.bar-4{animation-delay:0.1s}
.bar-5{animation-delay:0s}

@keyframes bar-pulse{
  0%,100%{height:20px;opacity:0.3}
  50%{height:100px;opacity:1}
}

@keyframes page-hero-glow{
  0%,100%{box-shadow:0 0 30px rgba(255,0,255,0.3) inset}
  50%{box-shadow:0 0 60px rgba(255,0,255,0.6) inset}
}

.page-hero h1{
  margin:0 0 12px;
  font-size:clamp(36px,7vw,64px);
}

.page-subtitle{
  color:var(--accent-alt);
  font-size:18px;
  letter-spacing:2px;
  margin:0;
  text-transform:uppercase;
  animation:subtitle-float 3s ease-in-out infinite;
}

@keyframes subtitle-float{
  0%,100%{transform:translateY(0);opacity:0.7}
  50%{transform:translateY(-8px);opacity:1}
}
/* FEATURED */
.featured{
  padding:40px 0;
  margin-bottom:40px;
}

.featured-card{
  position:relative;
  background:linear-gradient(135deg,rgba(255,0,255,0.1),rgba(0,255,255,0.1));
  padding:40px;
  border-radius:8px;
  border:2px solid var(--accent);
  animation:card-float 4s ease-in-out infinite;
}

@keyframes card-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}

.card-glitch{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:repeating-linear-gradient(90deg,rgba(255,0,255,0.1) 0px,rgba(255,0,255,0.1) 2px,transparent 2px,transparent 4px);
  opacity:0;
  animation:glitch-effect 0.3s ease-in-out;
  pointer-events:none;
  border-radius:8px;
}

@keyframes glitch-effect{
  0%{opacity:0;transform:translateX(-2px)}
  50%{opacity:1}
  100%{opacity:0;transform:translateX(2px)}
}

.featured-card h2{
  font-size:28px;
  text-transform:uppercase;
  margin:0 0 20px;
  color:var(--accent);
  letter-spacing:2px;
}

.release-showcase{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  align-items:center;
}

.album-art{
  width:100%;
  aspect-ratio:1;
  background:linear-gradient(135deg,#ff00ff,#00ffff);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:64px;
  font-weight:900;
  color:#000;
  border-radius:8px;
  animation:album-spin 10s linear infinite;
}

@keyframes album-spin{
  0%{transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}

.release-info h3{
  margin:0 0 8px;
  font-size:32px;
}

.artist-credit{
  color:var(--accent-alt);
  font-weight:700;
  margin:0 0 4px;
  font-size:14px;
  letter-spacing:1px;
  text-transform:uppercase;
}

.album-type{
  color:var(--muted);
  margin:0 0 12px;
  font-size:12px;
  text-transform:uppercase;
}

.album-desc{
  color:var(--muted);
  margin:0 0 20px;
  line-height:1.6;
}

.play-btn{
  animation:button-glow 2s ease-in-out infinite;
}

@keyframes button-glow{
  0%,100%{box-shadow:0 0 10px rgba(255,0,255,0.5)}
  50%{box-shadow:0 0 20px rgba(255,0,255,0.8)}
}

/* STATS/PULSE */
.pulse-section{
  margin:60px 0;
  padding:40px 0;
  border-top:2px dashed var(--accent);
  border-bottom:2px dashed var(--accent);
}

.stat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:20px;
}

.stat{
  padding:30px;
  text-align:center;
  background:linear-gradient(135deg,rgba(255,0,255,0.15),rgba(0,255,255,0.05));
  border:2px solid var(--accent);
  border-radius:4px;
  position:relative;
  overflow:hidden;
}

.stat::before{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);
  animation:shine 3s infinite;
}

@keyframes shine{
  0%{left:-100%}
  100%{left:100%}
}

.stat.bounce{
  animation:stat-bounce 2s ease-in-out infinite;
}

@keyframes stat-bounce{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-15px)}
}

.stat-num{
  font-size:36px;
  font-weight:900;
  color:var(--accent);
  margin-bottom:8px;
  text-transform:uppercase;
  letter-spacing:1px;
}

.stat-text{
  color:var(--muted);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:2px;
}

/* RELEASES PAGE */
.releases-page{
  margin:40px 0;
}

.releases-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:24px;
}

.release-item{
  padding:24px;
  border-radius:6px;
  transition:all 0.4s;
  position:relative;
  overflow:hidden;
}

.release-item::before{
  content:'';
  position:absolute;
  top:0;
  left:-100%;
  width:100%;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent);
  animation:glitch-scan 4s linear infinite;
  pointer-events:none;
}

@keyframes glitch-scan{
  0%{left:-100%}
  100%{left:100%}
}

.glow-box{
  background:linear-gradient(135deg,rgba(255,0,255,0.2),rgba(255,0,255,0.05));
  border:2px solid var(--accent);
  box-shadow:0 0 20px rgba(255,0,255,0.4);
}

.glow-box:hover{
  box-shadow:0 0 40px rgba(255,0,255,0.8),inset 0 0 20px rgba(255,0,255,0.2);
  transform:translateY(-8px) scale(1.02);
}

.neon-box{
  background:linear-gradient(135deg,rgba(0,255,255,0.1),rgba(0,255,255,0.05));
  border:2px solid var(--accent-alt);
  box-shadow:0 0 20px rgba(0,255,255,0.4);
}

.neon-box:hover{
  box-shadow:0 0 40px rgba(0,255,255,0.8),inset 0 0 20px rgba(0,255,255,0.2);
  transform:translateY(-8px) scale(1.02);
}

.pulse-box{
  background:linear-gradient(135deg,rgba(255,128,0,0.1),rgba(255,128,0,0.05));
  border:2px solid var(--danger);
  box-shadow:0 0 20px rgba(255,128,0,0.4);
}

.pulse-box:hover{
  box-shadow:0 0 40px rgba(255,128,0,0.8),inset 0 0 20px rgba(255,128,0,0.2);
  transform:translateY(-8px) scale(1.02);
}

.cyber-box{
  background:linear-gradient(135deg,rgba(128,0,255,0.1),rgba(128,0,255,0.05));
  border:2px solid #8000ff;
  box-shadow:0 0 20px rgba(128,0,255,0.4);
}

.cyber-box:hover{
  box-shadow:0 0 40px rgba(128,0,255,0.8),inset 0 0 20px rgba(128,0,255,0.2);
  transform:translateY(-8px) scale(1.02);
}

.release-cover-large{
  width:100%;
  height:200px;
  background:linear-gradient(135deg,var(--accent),var(--accent-alt));
  border-radius:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:48px;
  font-weight:900;
  color:#000;
  margin-bottom:16px;
  animation:cover-shimmer 4s ease-in-out infinite;
}

@keyframes cover-shimmer{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.3)}
}

.release-item h3{
  margin:0 0 8px;
  font-size:20px;
  position:relative;
  z-index:1;
}

.release-year{
  color:var(--accent);
  font-size:12px;
  margin:0 0 4px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
}

.release-tracks{
  color:var(--muted);
  font-size:11px;
  margin:0 0 16px;
  letter-spacing:1px;
}

.track-list{
  margin-bottom:16px;
  max-height:150px;
  overflow-y:auto;
  background:rgba(255,0,255,0.05);
  padding:12px;
  border-radius:4px;
}

.track{
  color:var(--muted);
  font-size:12px;
  margin:6px 0;
  padding:4px;
  border-left:2px solid var(--accent);
  padding-left:8px;
  transition:all 0.2s;
}

.track:hover{
  color:var(--accent);
  background:rgba(255,0,255,0.1);
}

.btn-play{
  width:100%;
  background:var(--accent);
  color:#000;
  border:0;
  position:relative;
  z-index:1;
}

.btn-play:hover{
  animation:button-click 0.3s ease;
}

@keyframes button-click{
  0%{transform:scale(1)}
  50%{transform:scale(0.95)}
  100%{transform:scale(1)}
}

/* ARTISTS PAGE */
.artists-page{
  margin:40px 0;
}

.artists-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:32px;
  margin-bottom:40px;
}

.artist-card{
  padding:40px 32px;
  border-radius:8px;
  text-align:center;
  transition:all 0.4s;
  position:relative;
}

.artist-avatar-large{
  width:140px;
  height:140px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-alt));
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:64px;
  font-weight:900;
  color:#000;
  margin:0 auto 20px;
  animation:avatar-spin 6s linear infinite;
}

@keyframes avatar-spin{
  0%{transform:rotate(0deg) scale(1)}
  50%{transform:rotate(180deg) scale(1.1)}
  100%{transform:rotate(360deg) scale(1)}
}

.artist-card h2{
  margin:0 0 8px;
  font-size:28px;
}

.artist-role{
  color:var(--accent-alt);
  font-weight:700;
  margin:0 0 20px;
  font-size:14px;
  letter-spacing:2px;
  text-transform:uppercase;
}

.artist-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-bottom:20px;
  padding:20px;
  background:rgba(255,0,255,0.05);
  border-radius:4px;
}

.stat-mini{
  padding:12px;
  background:rgba(0,255,255,0.05);
  border:1px solid var(--accent-alt);
  border-radius:4px;
  animation:stat-mini-pulse 2s ease-in-out infinite;
}

@keyframes stat-mini-pulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.05)}
}

.stat-mini .num{
  font-weight:900;
  font-size:18px;
  color:var(--accent);
  margin-bottom:4px;
}

.stat-mini .label{
  font-size:10px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:1px;
}

.artist-bio{
  color:var(--muted);
  margin:0 0 20px;
  line-height:1.6;
  font-size:14px;
}

.artist-tags{
  display:flex;
  gap:8px;
  justify-content:center;
  flex-wrap:wrap;
}

.tag-item{
  display:inline-block;
  padding:6px 12px;
  background:linear-gradient(135deg,var(--accent),var(--accent-alt));
  color:#000;
  border-radius:20px;
  font-size:11px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  animation:tag-float 3s ease-in-out infinite;
}

@keyframes tag-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}

.label-section{
  padding:40px;
  text-align:center;
  margin-top:40px;
}

.label-section h2{
  margin:0 0 20px;
}

.label-section p{
  color:var(--muted);
  line-height:1.8;
  max-width:800px;
  margin:16px auto;
}

/* CONTACT PAGE */
.contact-page{
  margin:40px 0;
}

.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  margin-bottom:40px;
}

.contact-info{
  padding:40px;
  border-radius:8px;
}

.contact-info h2{
  margin:0 0 30px;
  font-size:24px;
}

.info-item{
  margin-bottom:24px;
  padding-bottom:24px;
  border-bottom:1px solid var(--accent);
}

.info-label{
  color:var(--accent);
  font-size:12px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  margin:0;
}

.info-value{
  color:#fff;
  font-size:16px;
  font-weight:700;
  margin:6px 0 0;
}

.contact-text{
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
  margin-top:24px;
}

.contact-form-box{
  padding:40px;
  border-radius:8px;
}

.contact-form-box h2{
  margin:0 0 30px;
  font-size:24px;
}

.contact-form{
  display:grid;
  gap:16px;
}

.contact-form label{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.contact-form label span{
  color:var(--accent);
  font-size:12px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
}

.contact-form input,
.contact-form textarea,
.contact-form select{
  padding:12px;
  border-radius:4px;
  border:2px solid var(--accent);
  background:transparent;
  color:inherit;
  font-family:inherit;
  font-size:14px;
  transition:all 0.3s;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder{
  color:var(--muted);
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus{
  outline:none;
  border-color:var(--accent-alt);
  box-shadow:0 0 15px rgba(0,255,255,0.4);
  background:rgba(0,255,255,0.05);
}

.btn-submit{
  width:100%;
  background:var(--accent);
  color:#000;
  border:0;
  padding:14px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:2px;
  cursor:pointer;
  animation:submit-pulse 2s ease-in-out infinite;
}

@keyframes submit-pulse{
  0%,100%{box-shadow:0 0 15px rgba(255,0,255,0.5)}
  50%{box-shadow:0 0 30px rgba(255,0,255,0.8)}
}

.btn-submit:hover{
  background:var(--accent-alt);
}

.form-status{
  color:var(--accent-alt);
  min-height:1.5em;
  font-weight:700;
  animation:status-appear 0.5s ease;
}

@keyframes status-appear{
  0%{opacity:0;transform:translateY(-10px)}
  100%{opacity:1;transform:translateY(0)}
}

/* CLICKER GAME */
.clicker-section{
  padding:80px 24px;
  background:linear-gradient(180deg,rgba(255,0,128,0.05),transparent);
  position:relative;
}

.clicker-game{
  max-width:700px;
  margin:0 auto;
  padding:50px 40px;
  border:2px solid var(--danger);
  background:linear-gradient(135deg,rgba(255,0,128,0.1),rgba(255,0,255,0.1));
  text-align:center;
}

.clicker-title{
  font-size:42px;
  margin:0 0 10px;
  color:var(--danger);
  animation:glitch-anim 2s ease-in-out infinite;
}

.clicker-subtitle{
  font-size:14px;
  color:var(--accent-alt);
  text-transform:uppercase;
  letter-spacing:2px;
  margin:0 0 30px;
  animation:pulse 1.5s ease-in-out infinite;
}

.clicker-display{
  margin:40px 0;
  padding:30px;
  background:rgba(0,0,0,0.4);
  border:2px solid var(--accent);
  border-radius:4px;
}

.vibe-counter{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

.counter-value{
  font-size:56px;
  font-weight:900;
  color:var(--accent);
  text-shadow:0 0 20px rgba(255,0,255,0.5);
  animation:pulse 0.5s ease-in-out infinite;
  font-family:monospace;
}

.counter-label{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:2px;
  color:var(--accent-alt);
}

.mega-clicker{
  width:200px;
  height:200px;
  font-size:24px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:2px;
  color:#fff;
  background:linear-gradient(135deg,var(--danger),var(--accent));
  border:3px solid var(--accent);
  border-radius:50%;
  cursor:pointer;
  transition:all 0.1s ease;
  box-shadow:0 0 30px rgba(255,0,128,0.6);
  margin:30px auto;
  position:relative;
  animation:button-glow 2s ease-in-out infinite;
}

.mega-clicker:active{
  transform:scale(0.95);
  box-shadow:0 0 50px rgba(255,0,128,0.9), inset 0 0 20px rgba(255,0,255,0.3);
}

.mega-clicker:hover{
  box-shadow:0 0 50px rgba(255,0,128,0.9);
}

.brainrot-messages{
  margin:30px 0;
  min-height:60px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:15px;
  align-items:center;
}

.brainrot{
  font-size:14px;
  color:var(--accent-alt);
  margin:0;
  padding:8px 16px;
  background:rgba(0,255,255,0.1);
  border:1px solid var(--accent-alt);
  border-radius:4px;
  opacity:0;
  animation:brainrot-pop 1.5s ease-out forwards;
}

.brainrot:nth-child(1){animation-delay:0s}
.brainrot:nth-child(2){animation-delay:0.3s}
.brainrot:nth-child(3){animation-delay:0.6s}
.brainrot:nth-child(4){animation-delay:0.9s}
.brainrot:nth-child(5){animation-delay:1.2s}

@keyframes brainrot-pop{
  0%{
    opacity:0;
    transform:translateY(20px) scale(0.5);
  }
  50%{opacity:1}
  100%{
    opacity:0;
    transform:translateY(-50px) scale(1);
  }
}

.clicker-upgrades{
  display:grid;
  grid-template-columns:1fr;
  gap:15px;
  margin-top:40px;
}

.upgrade-btn{
  padding:15px 20px;
  background:transparent;
  border:2px solid var(--accent-alt);
  color:var(--accent-alt);
  cursor:pointer;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  border-radius:4px;
  transition:all 0.3s ease;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
}

.upgrade-btn:hover{
  box-shadow:0 0 20px rgba(0,255,255,0.5);
  transform:translateY(-2px);
}

.upgrade-btn:disabled{
  opacity:0.3;
  cursor:not-allowed;
  transform:none;
}

.upgrade-btn:disabled:hover{
  box-shadow:none;
}

.upgrade-name{
  flex:1;
  text-align:left;
}

.upgrade-cost{
  color:var(--accent);
  font-size:11px;
}

/* FOOTER */
.site-footer{
  padding:60px 0 20px;
  border-top:2px solid var(--accent);
  margin-top:60px;
  background:linear-gradient(180deg,rgba(255,0,255,0.03),transparent);
}

.footer-content{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:40px;
  margin-bottom:30px;
}

.footer-col h4{
  color:var(--accent);
  font-size:14px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  margin:0 0 16px;
}

.footer-col p{
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
  margin:0;
}

.footer-col ul{
  list-style:none;
  margin:0;
  padding:0;
}

.footer-col a{
  color:var(--muted);
  text-decoration:none;
  transition:all 0.3s;
  display:inline-block;
  margin:8px 0;
}

.footer-col a:hover{
  color:var(--accent);
  text-shadow:0 0 10px var(--accent);
  transform:translateX(4px);
}

.footer-bottom{
  text-align:center;
  color:var(--muted);
  font-size:12px;
  padding-top:20px;
  border-top:1px solid var(--accent);
  letter-spacing:1px;
}

/* STORY PAGE */
.story-page{
  padding:60px 24px;
}

.story-text{
  max-width:900px;
  margin:0 auto;
  background:linear-gradient(135deg,rgba(255,0,255,0.05),rgba(0,255,255,0.05));
  padding:40px;
  border-left:4px solid var(--accent);
  border-radius:4px;
  backdrop-filter:blur(10px);
  animation:card-float 3s ease-in-out infinite;
}

.story-text p{
  font-size:18px;
  line-height:1.8;
  margin-bottom:24px;
  color:#e6eef8;
  text-shadow:0 0 10px rgba(255,0,255,0.1);
  animation:float 2s ease-in-out infinite;
}

.story-text p:nth-child(odd){
  animation:float 2.5s ease-in-out infinite;
}

.story-text p:nth-child(even){
  animation:float 2s ease-in-out infinite 0.5s;
}

/* ANIMATIONS FOR CLICKER */
@keyframes float-up{
  0%{
    opacity:1;
    transform:translateY(0);
  }
  100%{
    opacity:0;
    transform:translateY(-60px);
  }
}

@keyframes chaos-shake{
  0%{transform:translate(0)}
  10%{transform:translate(-5px,5px)}
  20%{transform:translate(5px,-5px)}
  30%{transform:translate(-5px,-5px)}
  40%{transform:translate(5px,5px)}
  50%{transform:translate(-8px,8px)}
  60%{transform:translate(8px,-8px)}
  70%{transform:translate(-8px,-8px)}
  80%{transform:translate(8px,8px)}
  90%{transform:translate(-5px,5px)}
  100%{transform:translate(0)}
}

/* RESPONSIVE */
@media (max-width:768px){
  .nav-toggle{display:block}
  
  .main-nav{
    position:absolute;
    right:16px;
    top:64px;
    background:rgba(0,0,0,0.95);
    padding:16px;
    border-radius:4px;
    display:none;
    flex-direction:column;
    backdrop-filter:blur(20px);
    border:2px solid var(--accent);
  }
  
  .main-nav a{
    margin:12px 0;
  }
  
  .main-nav.open{display:flex}
  
  .hero{padding:60px 0;min-height:auto}
  
  .release-showcase{
    grid-template-columns:1fr;
  }
  
  .contact-grid{
    grid-template-columns:1fr;
    gap:24px;
  }
  
  .artists-grid{
    grid-template-columns:1fr;
  }
}