/* ============================================================
   JDL QUAKE — cyberpunk / new-rave DJ site
   ============================================================ */

:root{
  --bg:        #07070c;
  --bg-alt:    #0d0d16;
  --bg-raise:  #14141f;
  --ink:       #f3f3ef;
  --muted:     #9a9aab;
  --cyan:      #2bfff2;
  --magenta:   #ff2ec4;
  --lime:      #e6ff3c;
  --line:      rgba(43,255,242,0.16);
  --line-strong: rgba(43,255,242,0.4);

  --f-display: 'Rajdhani', sans-serif;
  --f-mono:    'Space Mono', monospace;
  --f-body:    'Space Grotesk', sans-serif;

  --nav-h: 76px;
  --gutter: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  cursor:none;
}
@media (hover:none), (pointer:coarse){
  body{ cursor:auto; }
}

img,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3{ margin:0; font-family:var(--f-display); }
p{ margin:0 0 1em; }
::selection{ background:var(--magenta); color:#000; }

.center{ text-align:center; }

/* ---------------- eyebrow / labels ---------------- */
.eyebrow{
  font-family:var(--f-mono);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--cyan);
  margin:0 0 1.1em;
}
.eyebrow::before{ content:"// "; color:var(--magenta); }

.section-title{
  font-family:var(--f-display);
  font-weight:700;
  font-size:clamp(2.2rem, 6vw, 4.2rem);
  line-height:1.02;
  letter-spacing:.01em;
  text-transform:uppercase;
  margin:0 0 1em;
}

.btn-outline{
  display:inline-block;
  margin-top:1.4em;
  padding:.85em 1.6em;
  font-family:var(--f-mono);
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cyan);
  border:1px solid var(--line-strong);
  border-radius:2px;
  transition:background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.btn-outline:hover{
  background:var(--cyan);
  color:#04040a;
  box-shadow:0 0 24px rgba(43,255,242,.55);
}

/* ---------------- background fx layers ---------------- */
#grain{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:9000; opacity:.05; mix-blend-mode:overlay;
}
.scanlines{
  position:fixed; inset:0; pointer-events:none; z-index:9001;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.035) 0px, rgba(255,255,255,.035) 1px, transparent 2px, transparent 3px);
  mix-blend-mode:overlay;
}
.vignette{
  position:fixed; inset:0; pointer-events:none; z-index:8999;
  background:radial-gradient(ellipse at 50% 40%, transparent 45%, rgba(0,0,0,.55) 100%);
}

/* ---------------- custom cursor ---------------- */
.cursor-dot,.cursor-ring{
  position:fixed; top:0; left:0; pointer-events:none; z-index:9999;
  border-radius:50%; transform:translate(-50%,-50%);
}
.cursor-dot{ width:6px; height:6px; background:var(--magenta); }
.cursor-ring{ width:30px; height:30px; border:1px solid var(--cyan); transition:width .2s var(--ease), height .2s var(--ease), opacity .2s var(--ease), border-color .2s; }
.cursor-ring.active{ width:52px; height:52px; border-color:var(--magenta); }
@media (hover:none), (pointer:coarse){
  .cursor-dot,.cursor-ring{ display:none; }
}

/* ================= BOOT ================= */
#boot{
  position:fixed; inset:0; z-index:10000;
  background:#04040a;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .6s var(--ease), visibility .6s;
}
#boot.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.boot-inner{ text-align:center; padding:0 24px; }
.boot-mark{
  font-family:var(--f-display); font-weight:700; font-size:2.4rem;
  letter-spacing:.08em; color:var(--ink); margin-bottom:1.6rem;
  text-shadow:0 0 24px rgba(43,255,242,.5);
}
.boot-log{
  font-family:var(--f-mono); font-size:.82rem; color:var(--cyan);
  min-height:6.4em; white-space:pre-wrap; text-align:left; max-width:420px;
  margin:0 auto 1.8rem; opacity:.9;
}
.boot-log .ok{ color:var(--lime); }
.boot-enter{
  font-family:var(--f-mono); font-size:.85rem; letter-spacing:.2em;
  background:transparent; border:1px solid var(--cyan); color:var(--cyan);
  padding:.9em 2em; cursor:pointer; opacity:0; transform:translateY(8px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), background .2s, color .2s;
}
.boot-enter.show{ opacity:1; transform:translateY(0); }
.boot-enter:hover{ background:var(--cyan); color:#04040a; }

/* ================= NAV ================= */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:500;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--gutter);
  background:linear-gradient(to bottom, rgba(7,7,12,.85), transparent);
  backdrop-filter:blur(2px);
}
.nav-mark{
  font-family:var(--f-display); font-weight:700; font-size:1.3rem; letter-spacing:.05em;
}
.nav-mark-accent{ color:var(--magenta); }
.nav-links{ display:flex; gap:clamp(16px,2.4vw,32px); align-items:center; }
.nav-links a{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); position:relative; padding:6px 0;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--cyan); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);
}
.nav-links a:hover, .nav-links a.active{ color:var(--ink); }
.nav-links a:hover::after, .nav-links a.active::after{ transform:scaleX(1); }
.nav-cta{ border:1px solid var(--line-strong); padding:.5em 1em !important; border-radius:2px; }

.nav-burger{
  display:none; flex-direction:column; gap:5px; width:30px; background:none; border:0; cursor:pointer; padding:8px;
}
.nav-burger span{ display:block; height:2px; background:var(--ink); }

/* ================= HERO ================= */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  overflow:hidden; padding:calc(var(--nav-h) + 24px) 0 96px;
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.bg-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.3) contrast(1.15) brightness(.75); }
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, var(--bg) 2%, rgba(7,7,12,.35) 40%, rgba(7,7,12,.15) 100%);
}
.hero-grid{
  position:absolute; left:0; right:0; bottom:0; height:46%;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  transform:perspective(360px) rotateX(62deg) scale(2.1);
  transform-origin:bottom;
  mask-image:linear-gradient(to top, black 30%, transparent 95%);
  opacity:.8;
}

.hero-content{ position:relative; z-index:2; padding:0 var(--gutter); width:100%; }
.hero-title{
  font-weight:700; text-transform:uppercase; line-height:.86;
  font-size:clamp(3.4rem, 15vw, 11rem);
  letter-spacing:-.01em;
}
.hero-title .bleed-left{ margin-left:clamp(-6px,-1vw,-2px); }
.hero-title .bleed-right{ color:var(--bg); -webkit-text-stroke:2px var(--ink); display:inline-block; }
.hero-tagline{
  font-family:var(--f-mono); font-style:normal; color:var(--muted);
  font-size:clamp(.85rem,1.6vw,1.05rem); margin:1.1em 0 0; letter-spacing:.02em;
}
.scroll-cue{
  display:flex; align-items:center; gap:14px; margin-top:2.6em;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--cyan);
}
.scroll-line{ width:64px; height:1px; background:var(--cyan); position:relative; overflow:hidden; }
.scroll-line::after{
  content:""; position:absolute; top:0; left:-40%; width:40%; height:100%; background:var(--ink);
  animation:scrollline 1.8s ease-in-out infinite;
}
@keyframes scrollline{ 0%{left:-40%;} 50%{left:100%;} 100%{left:100%;} }

.chapter-index{
  position:absolute; left:var(--gutter); bottom:28px; z-index:3;
  display:flex; gap:22px; font-family:var(--f-mono); font-size:.78rem; color:var(--muted);
}
.chapter-index a{ position:relative; padding-bottom:4px; transition:color .2s; }
.chapter-index a.active,.chapter-index a:hover{ color:var(--cyan); }
.chapter-index a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--cyan);
}

.side-label{
  position:absolute; right:18px; top:50%; z-index:3;
  transform:translateY(-50%) rotate(90deg); transform-origin:right center;
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.3em; color:var(--muted);
  white-space:nowrap;
}

/* ================= TICKER ================= */
.ticker{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--bg-alt); overflow:hidden; padding:14px 0;
}
.ticker-track{ display:flex; width:max-content; animation:tick 34s linear infinite; }
.ticker-track span{
  font-family:var(--f-mono); font-size:.82rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  white-space:nowrap; padding-right:2em;
}
@keyframes tick{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ================= CHAPTERS ================= */
.chapter{
  display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(24px,5vw,72px);
  padding:clamp(64px,10vw,140px) var(--gutter);
  max-width:1440px; margin:0 auto;
}
.chapter.reverse{ direction:rtl; }
.chapter.reverse > *{ direction:ltr; }

.chapter-media{
  position:relative; aspect-ratio:4/5; overflow:hidden; border:1px solid var(--line);
  background:var(--bg-alt);
}
.chapter-media img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.15) contrast(1.08); transition:transform .8s var(--ease), filter .4s; }
.chapter-media:hover img{ transform:scale(1.04); filter:grayscale(0) contrast(1.1); }
.chapter-media-glitch{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  background:linear-gradient(90deg, var(--cyan) 0%, transparent 2%, transparent 98%, var(--magenta) 100%);
  mix-blend-mode:screen; transition:opacity .3s;
}
.chapter-media:hover .chapter-media-glitch{ opacity:.5; animation:glitchshift .5s steps(2) infinite; }
@keyframes glitchshift{ 0%{ transform:translateX(0);} 50%{ transform:translateX(3px);} 100%{ transform:translateX(-3px);} }

.accent-video{
  position:absolute; right:12px; bottom:12px; width:38%; aspect-ratio:16/10; object-fit:cover;
  border:1px solid var(--line-strong); box-shadow:0 0 30px rgba(0,0,0,.6);
}

.chapter-copy h2{ margin-bottom:.6em; }
.chapter-copy p{ color:var(--muted); max-width:52ch; font-size:1.02rem; }
.chapter-copy strong{ color:var(--ink); font-weight:600; }
.chapter-copy em{ color:var(--lime); font-style:normal; }

.glitch-heading{
  position:relative; font-size:clamp(1.9rem,3.6vw,3.1rem); text-transform:uppercase; line-height:1.05;
}
.glitch-heading::before,.glitch-heading::after{
  content:attr(data-text); position:absolute; left:0; top:0; width:100%; opacity:0; pointer-events:none;
}
.glitch-heading:hover::before{ color:var(--cyan); opacity:.7; transform:translate(2px,-1px); mix-blend-mode:screen; }
.glitch-heading:hover::after{ color:var(--magenta); opacity:.7; transform:translate(-2px,1px); mix-blend-mode:screen; }

.tracklist{ margin:1.4em 0; border-top:1px solid var(--line); }
.tracklist li{
  display:flex; gap:1em; padding:.68em 0; border-bottom:1px solid var(--line);
  font-family:var(--f-mono); font-size:.86rem; color:var(--ink); letter-spacing:.01em;
}
.tracklist em{ color:var(--muted); font-style:normal; }
.tl-idx{ color:var(--magenta); }

/* ================= GALLERY ================= */
.gallery-section, .listen-section{ padding:clamp(64px,10vw,140px) var(--gutter); max-width:1440px; margin:0 auto; }
.gallery-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:2px; margin-top:2.2em;
  background:var(--line);
}
.gallery-grid figure{ margin:0; position:relative; aspect-ratio:3/4; overflow:hidden; background:#000; }
.gallery-grid img,.gallery-grid video{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease), filter .4s; filter:grayscale(.35) contrast(1.05); }
.gallery-grid figure:hover img,.gallery-grid figure:hover video{ transform:scale(1.08); filter:grayscale(0) saturate(1.3); }
.gallery-grid figure::after{
  content:""; position:absolute; inset:0; opacity:0; transition:opacity .3s;
  background:linear-gradient(135deg, rgba(43,255,242,.25), rgba(255,46,196,.25));
  mix-blend-mode:screen;
}
.gallery-grid figure:hover::after{ opacity:1; }
.gallery-video video{ filter:grayscale(0) contrast(1.2) saturate(1.4); }

/* ================= LISTEN ================= */
.listen-player{
  max-width:640px; margin:2em auto 0; padding:14px; border:1px solid var(--line-strong);
  background:var(--bg-alt); box-shadow:0 0 40px rgba(43,255,242,.08);
}
.listen-links{ display:flex; gap:16px; justify-content:center; margin-top:1.6em; }

/* ================= FOOTER ================= */
.site-footer{
  padding:clamp(64px,10vw,140px) var(--gutter) 64px; text-align:center;
  border-top:1px solid var(--line); margin-top:40px;
}
.footer-email{
  display:inline-block; font-family:var(--f-display); font-weight:600;
  font-size:clamp(1.4rem,4vw,2.2rem); color:var(--ink); margin:.2em 0 1.4em;
  border-bottom:1px solid var(--line-strong); padding-bottom:.1em; transition:color .25s, text-shadow .25s;
}
.footer-email:hover{ color:var(--cyan); text-shadow:0 0 18px rgba(43,255,242,.6); }
.footer-links{ display:flex; gap:24px; justify-content:center; font-family:var(--f-mono); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.footer-links a:hover{ color:var(--magenta); }
.footer-meta{ margin-top:2.4em; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em; color:var(--muted); opacity:.6; }

/* ================= RESPONSIVE ================= */
@media (max-width:860px){
  .nav-links{
    position:fixed; inset:var(--nav-h) 0 0 0; flex-direction:column; justify-content:center; gap:28px;
    background:rgba(4,4,10,.98); transform:translateX(100%); transition:transform .35s var(--ease);
  }
  .nav-links.open{ transform:translateX(0); }
  .nav-links a{ font-size:1rem; }
  .nav-burger{ display:flex; }

  .chapter{ grid-template-columns:1fr; }
  .chapter.reverse{ direction:ltr; }
  .accent-video{ width:52%; }

  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
  .side-label{ display:none; }
}

@media (max-width:520px){
  .chapter-index{ display:none; }
  .hero{ align-items:center; }
}