/* ==========================================================================
   RUBICONX — site styles
   Palette: radioactive-green alien + magenta rave neon over a purple-black void
   ========================================================================== */

:root{
  --void:#050507;
  --void-2:#08060e;
  --ink:#eaf1f4;
  --dim:#8ea6ad;
  --dimmer:#5f7480;

  --magenta:#ff1a85;
  --magenta-hot:#ff5bb0;
  --cyan:#1fd9ff;
  --ice:#cff6ff;
  --purple:#b06bff;

  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Menlo", Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;

  --wm: url("../img/logotype-white.png");
  --edge: 6vw;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  min-height:100vh;
  background:var(--void);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

/* home: greyscale the whole page (wordmark, nav, socials, all) */
body.mono:not(.music){ filter:grayscale(1); }
/* music: monochrome EVERYTHING except the embedded players (they stay colour).
   Background is desaturated via the shader (saturation:0). Greyscale only the
   colour-bearing containers — never .track/.embed, or the iframe would grey too. */
body.music.mono .nav,
body.music.mono .section-head,
body.music.mono .track-top,
body.music.mono .foot-min{ filter:grayscale(1); }
body.music.mono .track:hover{
  border-color:rgba(255,255,255,.22);
  box-shadow:0 0 46px -14px rgba(255,255,255,.32);
}
::selection{ background:rgba(255,26,133,.32); color:#fff; }

/* ---- fixed cosmic background canvas (fills viewport, sits behind all) ---- */
#logo-bg{
  position:fixed; inset:0; z-index:-2;
  width:100vw; height:100vh;
  background:radial-gradient(circle at 50% 42%, #0a0a12, #020203 72%);
}
#logo-canvas{ width:100%; height:100%; display:block; }
/* subtle darkening scrim so overlaid text always reads */
#scrim{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 4%, rgba(5,5,7,.66) 0%, rgba(5,5,7,0) 40%),
    radial-gradient(85% 52% at 50% 84%, rgba(5,5,7,.74) 0%, rgba(5,5,7,0) 62%),
    radial-gradient(140% 100% at 50% 110%, rgba(5,5,7,.92) 0%, rgba(5,5,7,0) 50%);
}

/* music page: content scrolls over the bg, so hold a steadier dark veil */
body.music #scrim{
  background:
    linear-gradient(180deg, rgba(5,5,7,.5) 0%, rgba(5,5,7,.72) 60%, rgba(5,5,7,.86) 100%);
}

/* WebGL-absent fallback: show the still symbol with a magenta aura */
.no-webgl #logo-canvas{ display:none; }
.no-webgl #logo-bg{
  background:
    radial-gradient(52% 46% at 50% 42%, rgba(255,26,133,.22), rgba(255,26,133,0) 62%),
    radial-gradient(circle at 50% 42%, #12081f, #030204 72%);
}
.no-webgl #logo-bg::after{
  content:""; position:absolute; inset:0;
  background:url("../img/rubiconx-symbol-white.png") center 40%/auto 46% no-repeat;
  filter:drop-shadow(0 0 18px rgba(255,26,133,.75)) drop-shadow(0 0 46px rgba(31,217,255,.4));
  opacity:.92;
}

/* ==========================================================================
   Shared bits
   ========================================================================== */
.mono{ font-family:var(--mono); }
.label{
  font-family:var(--mono);
  font-size:.66rem; letter-spacing:.42em; text-transform:uppercase;
  color:var(--cyan); text-shadow:0 0 14px rgba(31,217,255,.45);
}

.wrap{ width:min(1080px, 100% - 2*var(--edge)); margin-inline:auto; }

/* ---- glitch wordmark (white logotype via CSS mask so we can tint/glow it) ---- */
.wordmark{
  position:relative;
  width:var(--wm-w, min(660px, 84vw));
  aspect-ratio:3582 / 294;
  -webkit-mask:var(--wm) center/contain no-repeat;
          mask:var(--wm) center/contain no-repeat;
  background:linear-gradient(180deg,#ffffff 0%, #ffe8f6 62%, #ffc9ec 100%);
  filter:drop-shadow(0 0 14px rgba(255,26,133,.55)) drop-shadow(0 0 40px rgba(255,26,133,.35));
}
.wordmark::before, .wordmark::after{
  content:""; position:absolute; inset:0;
  -webkit-mask:var(--wm) center/contain no-repeat;
          mask:var(--wm) center/contain no-repeat;
  mix-blend-mode:screen; opacity:.0;
}
.wordmark::before{ background:var(--magenta); }
.wordmark::after{ background:var(--cyan); }
/* wordmark stays completely static — no jitter/movement (Carl's call) */

/* ---- neon button ---- */
.btn{
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--mono); font-size:.82rem; letter-spacing:.28em; text-transform:uppercase;
  color:#12060d; background:var(--magenta);
  padding:.95em 1.7em; border-radius:2px; border:1px solid var(--magenta);
  box-shadow:0 0 24px rgba(255,26,133,.45), inset 0 0 0 1px rgba(255,255,255,.14);
  transition:transform .18s ease, box-shadow .25s ease, background .25s ease;
}
.btn:hover{ background:var(--magenta-hot); box-shadow:0 0 40px rgba(255,26,133,.7); transform:translateY(-2px); }
.btn:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }
.btn .arrow{ transition:transform .2s ease; }
.btn:hover .arrow{ transform:translateX(4px); }

.btn.ghost{
  color:var(--ice); background:transparent; border-color:rgba(31,217,255,.4);
  box-shadow:inset 0 0 0 1px rgba(31,217,255,.08);
}
.btn.ghost:hover{ color:#eafff2; border-color:var(--cyan); box-shadow:0 0 26px rgba(31,217,255,.3); transform:translateY(-2px); }

/* ---- social row ---- */
.socials{ display:flex; gap:.55rem; align-items:center; flex-wrap:wrap; }
.social{
  --c:var(--cyan);
  display:grid; place-items:center; width:44px; height:44px;
  border:1px solid rgba(255,255,255,.12); border-radius:50%;
  color:var(--dim); background:rgba(255,255,255,.02);
  transition:color .2s, border-color .2s, box-shadow .25s, transform .2s, background .2s;
}
.social svg{ width:19px; height:19px; fill:currentColor; }
.social:hover{
  color:#fff; border-color:var(--c);
  box-shadow:0 0 22px -4px var(--c); transform:translateY(-3px);
  background:rgba(255,255,255,.04);
}
.social:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }

/* ---- obfuscated email ---- */
.contact{ font-family:var(--mono); font-size:.9rem; letter-spacing:.06em; }
.contact a{
  color:var(--ice); border-bottom:1px solid rgba(31,217,255,.35);
  padding-bottom:1px; transition:color .2s, border-color .2s, text-shadow .2s;
}
.contact a:hover{ color:#fff; border-color:var(--cyan); text-shadow:0 0 16px rgba(31,217,255,.6); }
.contact .obf-note{ color:var(--dimmer); }

/* contact: a button that reveals the address only on click */
.email-btn{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ice); background:transparent;
  border:1px solid rgba(31,217,255,.35); border-radius:2px;
  padding:.62em 1.3em; cursor:pointer;
  transition:color .2s, border-color .2s, box-shadow .25s, background .2s;
}
.email-btn:hover{ color:#fff; border-color:var(--cyan); box-shadow:0 0 22px -6px var(--cyan); background:rgba(31,217,255,.05); }
.email-btn:focus-visible{ outline:2px solid var(--cyan); outline-offset:2px; }
.email-link{
  font-family:var(--mono); font-size:.9rem; letter-spacing:.04em;
  color:var(--ice); border-bottom:1px solid rgba(31,217,255,.4); padding-bottom:1px;
  transition:color .2s, border-color .2s, text-shadow .2s;
}
.email-link:hover{ color:#fff; border-color:var(--cyan); text-shadow:0 0 16px rgba(31,217,255,.6); }

/* ==========================================================================
   Top nav (shared)
   ========================================================================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:20;
  display:flex; align-items:center; justify-content:center;
  padding:1.15rem var(--edge);
  background:linear-gradient(#050507cc, #05050700);
  backdrop-filter:blur(2px);
}
/* centred, prominent primary link */
.nav-cta{
  font-family:var(--mono); font-weight:600; font-size:.86rem;
  letter-spacing:.34em; text-transform:uppercase; color:#fff;
  padding:.62em 1.7em; border:1px solid rgba(255,26,133,.55); border-radius:2px;
  box-shadow:0 0 20px -8px var(--magenta), inset 0 0 0 1px rgba(255,26,133,.05);
  transition:color .2s, border-color .2s, box-shadow .25s, background .2s;
}
.nav-cta:hover, .nav-cta:focus-visible{
  border-color:var(--magenta); background:rgba(255,26,133,.1);
  box-shadow:0 0 30px -6px var(--magenta); outline:none;
}
.nav .brand{
  font-family:var(--mono); font-weight:600; letter-spacing:.34em; font-size:.82rem;
  text-transform:uppercase; color:var(--ink);
  display:flex; align-items:center; gap:.6rem;
}
.nav .brand .dot{ width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); }
.nav .brand:hover{ color:#fff; }
.nav .links{ display:flex; align-items:center; gap:1.6rem; }
.nav .links a{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.26em; text-transform:uppercase; color:var(--dim);
  position:relative; padding:.2rem 0; transition:color .2s;
}
.nav .links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-3px; height:1px;
  background:var(--magenta); box-shadow:0 0 8px var(--magenta); transition:right .25s ease;
}
.nav .links a:hover, .nav .links a[aria-current="page"]{ color:#fff; }
.nav .links a:hover::after, .nav .links a[aria-current="page"]::after{ right:0; }
.nav .links a.soon{ color:var(--dimmer); cursor:not-allowed; }
.nav .links a.soon:hover::after{ right:100%; }
.nav .links a.soon::before{
  content:"soon"; position:absolute; top:-.8em; right:-1.6em;
  font-size:.5rem; letter-spacing:.1em; color:var(--purple); opacity:.8;
}

/* ==========================================================================
   HOME
   ========================================================================== */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; align-items:center;
  text-align:center; padding:0 var(--edge) clamp(2.2rem, 5vh, 3.4rem);
}
/* wordmark + tagline sit just below the centred logo … */
.hero-lockup{
  margin-top:63vh;
  margin-bottom:auto;          /* … which pushes the social/email base to the bottom */
  display:flex; flex-direction:column; align-items:center; gap:1.05rem;
}
.hero .wordmark{ --wm-w:clamp(240px, 42vw, 440px); margin:0 auto; }
.hero .tagline{
  font-family:var(--mono); font-size:clamp(.64rem,2vw,.82rem);
  letter-spacing:.34em; text-transform:uppercase; color:var(--ink);
  text-shadow:0 1px 14px rgba(0,0,0,.7);
}
.hero .tagline .x{ color:var(--magenta); text-shadow:0 0 14px rgba(255,26,133,.6); padding:0 .2em; }

.hero .base{
  display:flex; flex-direction:column; align-items:center; gap:1.05rem;
}
.hero .socials{ justify-content:center; }
.hero .contact{ color:var(--dim); }

.scrollcue{
  position:absolute; left:50%; bottom:1rem; transform:translateX(-50%);
  font-family:var(--mono); font-size:.58rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--dimmer); display:flex; flex-direction:column; align-items:center; gap:.4rem;
}
.scrollcue .chev{ width:8px; height:8px; border-right:1px solid var(--cyan); border-bottom:1px solid var(--cyan);
  transform:rotate(45deg); animation:bob 1.8s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0) rotate(45deg); opacity:.4; } 50%{ transform:translateY(4px) rotate(45deg); opacity:1; } }
@media (prefers-reduced-motion: reduce){ .scrollcue .chev{ animation:none; } }

/* ---- transmission / about ---- */
.transmission{
  position:relative;
  background:linear-gradient(180deg, rgba(5,5,7,0) 0%, rgba(5,5,7,.72) 14%, #050507 40%);
  padding:clamp(4rem, 14vh, 9rem) 0 clamp(5rem, 12vh, 8rem);
}
.transmission .wrap{ max-width:760px; }
.transmission .label{ display:block; margin-bottom:1.8rem; }
.transmission .lead{
  font-size:clamp(1.35rem, 4.2vw, 2.2rem); line-height:1.32; font-weight:400; letter-spacing:-.01em;
  color:#fff;
}
.transmission .lead b{ color:var(--cyan); font-weight:600; text-shadow:0 0 20px rgba(31,217,255,.35); }
.transmission .lead .m{ color:var(--magenta-hot); font-weight:600; }
.transmission .body{ margin-top:1.8rem; color:var(--dim); font-size:1.02rem; max-width:60ch; }
.transmission .body p + p{ margin-top:1rem; }
.transmission .body b{ color:var(--ice); font-weight:600; }
.transmission .meta{
  margin-top:2.4rem; display:flex; gap:1.4rem 2.2rem; flex-wrap:wrap;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dimmer);
}
.transmission .meta span b{ color:var(--cyan); font-weight:600; }

/* ==========================================================================
   Site footer (shared)
   ========================================================================== */
.foot{
  border-top:1px solid rgba(255,255,255,.07);
  background:#050507;
  padding:clamp(2.6rem,7vh,4rem) 0;
}
.foot .wrap{ display:flex; flex-wrap:wrap; gap:2rem; align-items:center; justify-content:space-between; }
.foot .fbrand{ font-family:var(--mono); letter-spacing:.3em; text-transform:uppercase; font-size:.78rem; color:var(--ink); }
.foot .fbrand small{ display:block; color:var(--dimmer); letter-spacing:.14em; margin-top:.5rem; font-size:.66rem; }
.foot .fcol{ display:flex; flex-direction:column; gap:1rem; }
.foot .copy{ font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; color:var(--dimmer); }

/* ==========================================================================
   MUSIC page
   ========================================================================== */
.page{ position:relative; padding-top:clamp(5rem,10vh,6.5rem); min-height:100vh; }
.page .wrap{ padding-top:clamp(1.2rem,5vh,3rem); }

/* two columns — songs | mixes */
.cols{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(1.6rem,4vw,3.4rem); align-items:start;
  padding-bottom:clamp(3rem,9vh,6rem);
}
.col{ min-width:0; }
.section-head{
  display:flex; align-items:baseline; gap:1rem; margin-bottom:1.6rem;
  border-bottom:1px solid rgba(255,255,255,.08); padding-bottom:.9rem;
}
.section-head h2{
  font-family:var(--mono); text-transform:uppercase; letter-spacing:.24em;
  font-size:1rem; color:var(--cyan); text-shadow:0 0 16px rgba(31,217,255,.35);
}
.section-head .count{ font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; color:var(--dimmer); }
.section-head .rule{ flex:1; height:1px; background:linear-gradient(90deg, rgba(31,217,255,.25), transparent); align-self:center; }

.tracks{ display:flex; flex-direction:column; gap:1.4rem; }
.track{
  position:relative;
  border:1px solid rgba(255,255,255,.08); border-radius:10px; overflow:hidden;
  background:linear-gradient(180deg, rgba(20,14,26,.5), rgba(8,6,12,.5));
  backdrop-filter:blur(6px);
  transition:border-color .25s, box-shadow .3s;
}
.track:hover{ border-color:rgba(255,26,133,.4); box-shadow:0 0 46px -14px rgba(255,26,133,.5); }
.track .track-top{
  display:flex; align-items:center; gap:1rem; padding:1rem 1.2rem;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.track .idx{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; color:var(--dimmer);
  border:1px solid rgba(255,255,255,.12); border-radius:4px; padding:.3em .5em; min-width:2.4em; text-align:center;
}
.track .tmeta{ flex:1; min-width:0; }
.track .tmeta .ttitle{ font-weight:600; color:#fff; font-size:1rem; line-height:1.3; }
.track .tmeta .tsub{ font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-top:.3rem; }
.track .plat{ font-family:var(--mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--dimmer); }
.track .embed{ line-height:0; background:#0a0a0e; }
.track .embed iframe{ width:100%; display:block; border:0; }

.more-soon{
  margin-top:1.4rem; text-align:center;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--dimmer);
}
.more-soon .bl{ color:var(--purple); }

/* minimal footer (music page) */
.foot-min{
  position:relative; z-index:1;
  border-top:1px solid rgba(255,255,255,.07);
  padding:clamp(1.8rem,5vh,2.8rem) var(--edge);
  display:flex; align-items:center; justify-content:space-between; gap:1.4rem; flex-wrap:wrap;
}
.foot-min .contact{ font-size:.8rem; color:var(--dim); }
.foot-min .socials{ gap:.5rem; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:640px){
  :root{ --edge:5vw; }
  .nav{ padding:.9rem var(--edge); }
  .nav .brand{ font-size:.72rem; letter-spacing:.24em; }
  .nav .links{ gap:1.1rem; }
  .hero-lockup{ margin-top:58vh; }
  .cols{ grid-template-columns:1fr; gap:2.4rem; }
  .foot-min{ flex-direction:column; align-items:center; text-align:center; gap:1.2rem; }
  .social{ width:42px; height:42px; }
}