/* ============================================================
   RAVECIPHER PROMOTIONS & EVENTS — theme stylesheet
   Palette: blacklight void + acid green / magenta / cyan
   Display: Unbounded | Utility/cipher: Space Mono | Body: Work Sans
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;600;800;900&family=Space+Mono:wght@400;700&family=Work+Sans:wght@300;400;500;600&display=swap');

:root{
  --void:        #0b0014;
  --void-2:      #150022;
  --void-3:      #1e0630;
  --acid:        #c6ff3d;
  --magenta:     #ff2e9a;
  --cyan:        #29ffe0;
  --paper:       #f2e9ff;
  --paper-dim:   #b9a9d6;
  --line:        rgba(242,233,255,0.14);
  --shadow-acid: 0 0 24px rgba(198,255,61,0.35);
  --shadow-mag:  0 0 24px rgba(255,46,154,0.35);
  --radius:      2px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--void);
  color: var(--paper);
  font-family: 'Work Sans', sans-serif;
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
}

/* subtle scanline atmosphere over the whole site */
body::before{
  content:"";
  position: fixed; inset:0;
  pointer-events:none;
  z-index: 999;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.02) 0px,
    rgba(255,255,255,0.02) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
  opacity:.5;
}

h1,h2,h3,h4{
  font-family: 'Unbounded', sans-serif;
  margin: 0 0 .5em;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

a{ color: inherit; text-decoration:none; }

.eyebrow{
  font-family:'Space Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: .72rem;
  color: var(--acid);
}

.container{ max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ---------- NAV ---------- */
.site-nav{
  position: sticky; top:0; z-index: 500;
  background: rgba(11,0,20,0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-nav .container{
  display:flex; align-items:center; justify-content:space-between;
  height: 76px;
}
.logo{
  font-family:'Unbounded', sans-serif;
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: -.02em;
}
.logo span{ color: var(--acid); }
.nav-links{
  display:flex; gap: 2rem;
  list-style:none; margin:0; padding:0;
}
.nav-links a{
  font-family:'Space Mono', monospace;
  font-size:.78rem;
  text-transform: uppercase;
  letter-spacing:.14em;
  color: var(--paper-dim);
  position:relative;
  padding: 6px 0;
  transition: color .2s ease;
}
.nav-links a:hover, .nav-links a.active{ color: var(--acid); }
.nav-links a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:2px; background: var(--acid); box-shadow: var(--shadow-acid);
}
.nav-toggle{
  display:none;
  background:none; border:1px solid var(--line); color: var(--paper);
  width:42px; height:42px; border-radius: var(--radius); cursor:pointer;
  font-family:'Space Mono',monospace; font-size:1rem;
}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:'Space Mono', monospace;
  text-transform: uppercase; letter-spacing:.12em; font-size:.78rem;
  padding: .95em 1.6em;
  border-radius: var(--radius);
  border:1px solid transparent;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary{
  background: var(--acid); color: var(--void); font-weight:700;
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: var(--shadow-acid); }
.btn-ghost{
  border-color: var(--paper-dim); color: var(--paper);
}
.btn-ghost:hover{ border-color: var(--magenta); color: var(--magenta); box-shadow: var(--shadow-mag); transform: translateY(-2px);}

/* ---------- HERO ---------- */
.hero{
  position: relative;
  padding: 7rem 0 6rem;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 18% 20%, rgba(255,46,154,0.16), transparent 45%),
    radial-gradient(circle at 82% 75%, rgba(41,255,224,0.14), transparent 45%);
}
.hero h1{
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  font-weight: 900;
  margin-top:.4em;
  max-width: 14ch;
}
.decode-line{ display:block; }
.decode-line .acid{ color: var(--acid); }
.decode-line .mag{ color: var(--magenta); }
.hero .slogan{
  font-family:'Space Mono', monospace;
  color: var(--cyan);
  font-size: 1rem;
  margin-top: 1.4rem;
  letter-spacing:.03em;
}
.hero .lede{
  max-width: 52ch;
  color: var(--paper-dim);
  margin-top: 1rem;
}
.hero-actions{ display:flex; gap:1rem; margin-top: 2.2rem; flex-wrap:wrap; }

/* glitch cursor blink used in JS-decoded headline */
.cursor{ display:inline-block; width:.5ch; background:var(--acid); animation: blink 1s steps(1) infinite; }
@keyframes blink{ 50%{opacity:0;} }

/* ---------- PLUR STRIP ---------- */
.plur{
  border-bottom: 1px solid var(--line);
  background: var(--void-2);
}
.plur .container{
  display:grid; grid-template-columns: repeat(4,1fr); gap: 0;
}
.plur-item{
  padding: 2rem 1.5rem;
  border-right: 1px solid var(--line);
  text-align:center;
}
.plur-item:last-child{ border-right:none; }
.plur-item .letter{
  font-family:'Unbounded', sans-serif;
  font-size: 2rem; font-weight:900;
}
.plur-item:nth-child(1) .letter{ color: var(--acid); }
.plur-item:nth-child(2) .letter{ color: var(--magenta); }
.plur-item:nth-child(3) .letter{ color: var(--cyan); }
.plur-item:nth-child(4) .letter{ color: var(--paper); }
.plur-item .word{
  font-family:'Space Mono', monospace;
  font-size:.72rem; text-transform:uppercase; letter-spacing:.18em;
  color: var(--paper-dim); margin-top:.4rem;
}

/* ---------- SECTIONS ---------- */
section{ padding: 5.5rem 0; border-bottom: 1px solid var(--line); }
section:last-of-type{ border-bottom:none; }
.section-head{ max-width: 60ch; margin-bottom: 3rem; }
.section-head h2{ font-size: clamp(1.8rem,3.6vw,2.6rem); }
.section-head p{ color: var(--paper-dim); margin-top:.8rem; }

/* ---------- CARDS (DJ / EVENTS) ---------- */
.grid{ display:grid; gap: 1.4rem; }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-5{ grid-template-columns: repeat(5, 1fr); }

.card{
  background: var(--void-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow:hidden;
  transition: border-color .2s ease, transform .2s ease;
  display:flex; flex-direction:column;
}
.card:hover{ border-color: var(--acid); transform: translateY(-4px); }

.card-media{
  aspect-ratio: 4/5;
  position:relative;
  background:
    repeating-linear-gradient(45deg, #1e0630, #1e0630 10px, #23083a 10px, #23083a 20px);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.card-media::after{
  content:""; position:absolute; inset:0;
  background: repeating-linear-gradient(to bottom, rgba(198,255,61,0.06) 0 2px, transparent 2px 4px);
  animation: scan 3.5s linear infinite;
}
@keyframes scan{ from{ transform: translateY(-10%);} to{ transform: translateY(10%);} }
.tba{
  font-family:'Space Mono', monospace;
  color: var(--acid);
  letter-spacing:.2em;
  font-size:.85rem;
  border: 1px dashed var(--acid);
  padding:.5em 1em;
  z-index:1;
}
.card-body{ padding: 1.1rem 1.2rem 1.3rem; }
.card-body h3{ font-size: 1.02rem; margin-bottom:.25em; }
.card-body .meta{
  font-family:'Space Mono', monospace;
  font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--paper-dim);
}
.card-body .tag{
  display:inline-block; margin-top:.7rem;
  font-family:'Space Mono', monospace; font-size:.68rem;
  color: var(--void); background: var(--magenta);
  padding: .25em .6em; border-radius: var(--radius);
  text-transform:uppercase; letter-spacing:.08em;
}

/* ---------- LIVE / STREAM PAGE ---------- */
.live-wrap{
  display:grid; grid-template-columns: 1fr; gap: 1.4rem;
}
.stream-box{
  background:#000;
  border: 1px solid var(--line);
  aspect-ratio: 16/9;
  position: relative;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.stream-box video{ width:100%; height:100%; object-fit:cover; background:#000; }
.stream-placeholder{
  font-family:'Space Mono', monospace;
  color: var(--paper-dim); text-align:center; padding: 2rem;
}
.stream-live-badge{
  position:absolute; top:14px; left:14px;
  background: var(--magenta); color:#fff;
  font-family:'Space Mono', monospace; font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase;
  padding:.35em .7em; border-radius: var(--radius);
  display:flex; align-items:center; gap:.5em;
}
.stream-live-badge .dot{
  width:7px;height:7px;border-radius:50%; background:#fff;
  animation: blink 1.1s infinite;
}
.stream-controls{ display:flex; gap:.8rem; margin-top: 1rem; flex-wrap:wrap; }

.chat-box{
  background: var(--void-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display:flex; flex-direction:column;
  height: 420px;
  max-width: 640px;
  margin: 0 auto;
}
.chat-head{
  padding: .9rem 1.1rem;
  border-bottom:1px solid var(--line);
  font-family:'Space Mono', monospace; font-size:.75rem;
  letter-spacing:.14em; text-transform:uppercase; color: var(--cyan);
}
.chat-log{
  flex:1; overflow-y:auto; padding: 1rem 1.1rem;
  display:flex; flex-direction:column; gap:.6rem;
  font-size:.9rem;
}
.chat-msg .name{ font-weight:600; margin-right:.4em; }
.chat-msg.mine .name{ color: var(--acid); }
.chat-msg.system{ color: var(--paper-dim); font-family:'Space Mono', monospace; font-size:.75rem; }
.chat-form{
  display:flex; border-top:1px solid var(--line);
}
.chat-form input{
  flex:1; background:transparent; border:none; color: var(--paper);
  padding: .9rem 1.1rem; font-family:'Work Sans', sans-serif; outline:none;
}
.chat-form button{
  background: var(--acid); color: var(--void); border:none;
  padding: 0 1.3rem; font-family:'Space Mono', monospace;
  text-transform:uppercase; letter-spacing:.1em; font-size:.75rem;
  cursor:pointer;
}

/* ---------- FORMS (contact / mailing list) ---------- */
form.stacked{ display:flex; flex-direction:column; gap: 1rem; max-width: 480px; }
.field label{
  display:block; font-family:'Space Mono', monospace; font-size:.7rem;
  text-transform:uppercase; letter-spacing:.14em; color: var(--paper-dim); margin-bottom:.4em;
}
.field input, .field textarea{
  width:100%; background: var(--void-2); border:1px solid var(--line);
  color: var(--paper); padding: .8em .9em; border-radius: var(--radius);
  font-family:'Work Sans', sans-serif; font-size: .95rem; outline:none;
}
.field input:focus, .field textarea:focus{ border-color: var(--acid); }
.field textarea{ min-height: 140px; resize: vertical; }

.mailing{
  background: var(--void-3);
  border-top: 1px solid var(--line);
  padding: 4rem 0;
}
.mailing .container{
  display:flex; align-items:center; justify-content:space-between; gap: 2rem; flex-wrap:wrap;
}
.mailing h2{ font-size: 1.6rem; margin-bottom:.3em; }
.mailing p{ color: var(--paper-dim); max-width: 44ch; }
.mailing-form{ display:flex; gap:.6rem; flex-wrap:wrap; }
.mailing-form input{
  background: var(--void-2); border:1px solid var(--line); color: var(--paper);
  padding: .9em 1.1em; border-radius: var(--radius); min-width: 260px; outline:none;
  font-family:'Work Sans', sans-serif;
}
.mailing-form input:focus{ border-color: var(--cyan); }
.mailing-note{
  font-family:'Space Mono', monospace; font-size:.72rem; color: var(--acid);
  margin-top:.6rem; min-height: 1em;
}

/* ---------- FOOTER ---------- */
footer{
  padding: 2.6rem 0; text-align:center;
  font-family:'Space Mono', monospace; font-size:.72rem;
  letter-spacing:.1em; color: var(--paper-dim);
}
footer .plur-mini{ color: var(--acid); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 860px){
  .grid-3{ grid-template-columns: repeat(2,1fr); }
  .grid-5{ grid-template-columns: repeat(2,1fr); }
  .plur .container{ grid-template-columns: repeat(2,1fr); }
  .plur-item{ border-bottom:1px solid var(--line); }
}
@media (max-width: 680px){
  .nav-links{
    position:absolute; top:76px; left:0; right:0;
    background: var(--void); border-bottom:1px solid var(--line);
    flex-direction:column; padding: 1rem 24px; gap: 1.1rem;
    display:none;
  }
  .nav-links.open{ display:flex; }
  .nav-toggle{ display:block; }
  .grid-3, .grid-5{ grid-template-columns: repeat(2,1fr); }
  .mailing .container{ flex-direction:column; align-items:flex-start; }
}
@media (max-width: 480px){
  .grid-3, .grid-5{ grid-template-columns: 1fr; }
  .plur .container{ grid-template-columns: 1fr; }
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  html{ scroll-behavior: auto; }
}

/* visible keyboard focus */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--acid); outline-offset: 2px;
}