/* ============================================================
   BRAINSOIL IX — base.css
   Design system: reset, palette, typography, primitives.
   Bold vibe only (neon/laser/UV, gold as spine).
   ============================================================ */

/* ---------- RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; }
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }

/* ---------- SHARED PALETTE ---------- */
:root{
  --void:#080705;
  --void-2:#0f0c08;
  --void-3:#15100a;
  --ink:#05040a;

  --gold:#D4AF37;
  --gold-lt:#F3D67A;
  --gold-dk:#8C6D1F;
  --champagne:#F3ECD8;
  --white:#FFFFFF;
  --mute:#9c8f6e;
  --mute-dk:#5c5340;

  /* UV / laser accents */
  --uv-green:#39FF14;
  --uv-cyan:#00E5FF;
  --uv-magenta:#FF2BD6;
  --uv-violet:#B14BFF;

  --serif:'Cinzel', Georgia, 'Times New Roman', serif;
  --sans:'Space Grotesk', system-ui, 'Helvetica Neue', Arial, sans-serif;
  --mono:'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  /* Heavy grotesque for big display headings — the bold, poster-like look */
  --display:'Archivo', 'Space Grotesk', system-ui, 'Helvetica Neue', Arial, sans-serif;

  --maxw:1120px;
  --pad:6%; /* % (not vw) so a vertical scrollbar never pushes content past the viewport */

  /* bold vibe — neon/UV/laser, gold as spine */
  --accent:var(--uv-green);
  --accent-2:var(--uv-cyan);
  --accent-3:var(--gold-lt);
  --glow:0 0 34px rgba(57,255,20,.28), 0 0 14px rgba(0,229,255,.2);
  --glow-strong:0 0 60px rgba(57,255,20,.4), 0 0 28px rgba(177,75,255,.3);
  --laser-opacity:.18;
  --grain-opacity:.06;
  --scan-opacity:.06;
  --seed-color:rgba(57,255,20,.55);
  --hairline:rgba(57,255,20,.18);
  --logo-boost:contrast(1.2) brightness(1.25) drop-shadow(0 0 18px rgba(0,229,255,.35));
}

/* ---------- BODY ---------- */
body{
  background:var(--void);
  color:var(--champagne);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
  position:relative;
  min-height:100vh;
}
/* scroll-lock only applies when JS is present (html.js), so no-JS visitors
   are never trapped behind the fixed splash */
html.js body.no-scroll{ overflow:hidden; height:100vh; }

/* deep radial base glow behind everything */
body::before{
  content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(ellipse 80% 55% at 50% 6%, rgba(57,255,20,.10), transparent 60%),
    radial-gradient(ellipse 60% 45% at 12% 30%, rgba(0,229,255,.08), transparent 55%),
    radial-gradient(ellipse 60% 45% at 88% 70%, rgba(255,43,214,.07), transparent 55%),
    var(--void);
}

/* ---------- TYPOGRAPHY PRIMITIVES ---------- */
.eyebrow{
  font-family:var(--sans); font-weight:500;
  letter-spacing:.42em; font-size:12px; text-transform:uppercase;
  color:var(--accent);
}
.sec-eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.34em;
  color:var(--accent); text-transform:uppercase; margin-bottom:12px;
}
.sec-title{
  font-family:var(--display); font-weight:800; letter-spacing:-.015em;
  text-transform:uppercase;
  font-size:clamp(34px,6vw,62px); color:var(--white); line-height:.98;
  margin-bottom:44px;
}
.serif{ font-family:var(--serif); }
.mono{ font-family:var(--mono); }
.accent{ color:var(--accent); }
.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:.06em; }

/* ---------- LAYOUT ---------- */
section{
  position:relative; z-index:1;
  padding:clamp(80px,12vh,140px) var(--pad);
  max-width:var(--maxw); margin:0 auto;
}
.divider{
  width:min(900px,86vw); height:1px; margin:0 auto;
  background:linear-gradient(90deg,transparent,var(--hairline),var(--accent),var(--hairline),transparent);
  opacity:.7;
}

/* ---------- NAV ---------- */
nav.site{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; justify-content:space-between; align-items:center;
  padding:18px var(--pad);
  backdrop-filter:blur(8px);
  background:linear-gradient(180deg, rgba(8,7,5,.82), rgba(8,7,5,0));
  transition:transform .4s ease, opacity .4s ease;
}
nav.site.hidden{ transform:translateY(-110%); opacity:0; }
nav .brand{ font-family:var(--display); font-weight:900; letter-spacing:.06em; font-size:16px; color:var(--white); }
nav .brand b{ color:var(--gold); font-weight:900; }
nav .brand .ix{ font-family:var(--mono); color:var(--accent); margin-left:6px; font-size:13px; letter-spacing:.2em; }
nav .cta{
  font-family:var(--sans); font-size:11px; letter-spacing:.22em; font-weight:600;
  color:var(--ink); background:var(--accent); padding:10px 20px; border-radius:2px;
  text-transform:uppercase; box-shadow:var(--glow); transition:transform .25s ease, box-shadow .25s ease;
}
nav .cta:hover{ transform:translateY(-1px); box-shadow:var(--glow-strong); }

/* ---------- CALL-FOR-ENTRY BANNER (sticky strip above the nav) ---------- */
:root{ --banner-h:40px; }
.cfe-banner{
  position:fixed; top:0; left:0; right:0; z-index:70;
  display:flex; align-items:center; justify-content:center; gap:11px;
  height:var(--banner-h); padding:0 var(--pad);
  font-family:var(--sans); font-size:12.5px; letter-spacing:.05em; line-height:1;
  color:var(--champagne); white-space:nowrap;
  background:
    linear-gradient(90deg, rgba(212,175,55,.14), rgba(177,75,255,.12) 46%, rgba(57,255,20,.14)),
    rgba(8,7,5,.92);
  backdrop-filter:blur(8px);
  transition:filter .25s ease;
}
/* glowing gold->neon hairline underneath, echoes .divider */
.cfe-banner::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),var(--accent),var(--gold),transparent);
  opacity:.85;
}
.cfe-banner:hover{ filter:brightness(1.14); }
.cfe-banner .cfe-dot{ color:var(--uv-magenta); font-size:9px; text-shadow:0 0 10px rgba(255,43,214,.85); animation:cfePulse 2.4s ease-in-out infinite; }
.cfe-banner b{ color:var(--gold-lt); font-weight:700; letter-spacing:.06em; text-shadow:0 0 12px rgba(243,214,122,.5); }
.cfe-banner .cfe-sep{ color:var(--gold-dk); }
.cfe-banner .cfe-desc{ opacity:.9; }
.cfe-banner .cfe-go{
  color:var(--accent); font-weight:600; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; text-shadow:0 0 12px rgba(57,255,20,.45);
}
@keyframes cfePulse{ 0%,100%{ opacity:.45; } 50%{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ .cfe-banner .cfe-dot{ animation:none; } }

/* push the fixed nav + its mobile dropdown below the banner — only on pages that have it */
.cfe-banner + nav.site{ top:var(--banner-h); }
.cfe-banner ~ .nav-panel{ top:calc(64px + var(--banner-h)); }

@media (max-width:600px){
  .cfe-banner{ gap:9px; font-size:11.5px; }
  .cfe-banner .cfe-sep,.cfe-banner .cfe-desc{ display:none; }
  .cfe-banner .cfe-go{ font-size:10.5px; letter-spacing:.1em; }
}

/* ---------- BUTTONS ---------- */
.btn-primary{
  display:inline-block; font-family:var(--sans); font-weight:600;
  font-size:14px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink);
  background:linear-gradient(135deg, var(--accent-3), var(--accent));
  padding:18px 48px; border-radius:2px; box-shadow:var(--glow-strong);
  transition:transform .3s ease, box-shadow .3s ease, filter .3s ease;
}
.btn-primary:hover{ transform:translateY(-2px); filter:brightness(1.06); box-shadow:var(--glow-strong), 0 0 80px rgba(212,175,55,.28); }
/* disabled state — inert, not scroll-jumping, until tickets go live */
.btn-primary:disabled,.btn-primary[aria-disabled="true"]{ pointer-events:none; opacity:.55; cursor:default; box-shadow:none; transform:none; }
.btn-ghost{
  display:inline-block; font-family:var(--mono); font-size:12px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--accent); padding:14px 30px; border:1px solid var(--hairline); border-radius:2px;
  transition:border-color .3s ease, color .3s ease, box-shadow .3s ease;
}
.btn-ghost:hover{ border-color:var(--accent); box-shadow:var(--glow); }

/* ---------- FOOTER ---------- */
footer.site{
  position:relative; z-index:1; text-align:center; overflow:hidden;
  padding:70px var(--pad) 100px; color:var(--mute);   /* --mute clears WCAG AA on --void; --mute-dk did not */
  font-size:12px; letter-spacing:.06em;
}
/* footer background loop: centered, feathered on every edge so it melts into the page
   (no hard top seam). The mask fades the video itself; the ::after keeps text legible. */
.footer-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:0;
  opacity:.42; filter:brightness(.72) saturate(1.12); pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 40%, #000 82%, transparent 100%),
                     linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
  mask-image:linear-gradient(to bottom, transparent 0%, #000 40%, #000 82%, transparent 100%),
             linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%); }
footer.site::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, transparent 0%, rgba(8,7,5,.4) 55%, rgba(8,7,5,.72) 100%); }
.footer-inner{ position:relative; z-index:2; }
footer.site .fmark{ font-family:var(--sans); font-weight:700; font-size:24px; letter-spacing:.08em; color:var(--white); margin-bottom:14px; }
footer.site .fmark b{ color:var(--gold); }
footer.site a{ color:var(--mute); border-bottom:1px solid var(--hairline); }
footer.site a:hover{ color:var(--accent); }
/* footer nav row (also the mobile way to reach every page) */
.footer-nav{ display:flex; flex-wrap:wrap; gap:8px 14px; justify-content:center; align-items:center; margin-bottom:26px; }
.footer-nav a{ font-family:var(--sans); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--champagne); opacity:.85; border-bottom:none; }
.footer-nav a:hover{ color:var(--accent); opacity:1; }
.footer-nav .sep{ color:var(--gold-dk); font-size:10px; }

/* footer Instagram pill — the persistent follow link on every page */
.footer-ig{
  display:inline-flex; align-items:center; gap:9px; margin-top:22px;
  font-family:var(--mono); font-size:12px; letter-spacing:.14em;
  color:var(--champagne); border:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
  border-radius:999px; padding:9px 18px;
  transition:color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
footer.site a.footer-ig{ color:var(--champagne); }
.footer-ig svg{ width:17px; height:17px; flex:none; }
.footer-ig:hover{ color:var(--accent); border-color:var(--accent); box-shadow:var(--glow); transform:translateY(-1px); }

/* ---------- FOLLOW CALLOUT (near the bottom of the page) ---------- */
#follow{ text-align:center; }
.follow-card{
  max-width:600px; margin:0 auto; padding:clamp(32px,5vw,48px) clamp(22px,4vw,38px);
  border:1px solid var(--hairline); border-radius:10px;
  background:
    linear-gradient(155deg, rgba(212,175,55,.08), rgba(177,75,255,.06) 55%, rgba(57,255,20,.08)),
    rgba(15,12,8,.55);
  box-shadow:var(--glow);
}
.follow-card .ig-mark{ width:40px; height:40px; margin:0 auto 18px; color:var(--accent); filter:drop-shadow(0 0 14px rgba(57,255,20,.45)); }
.follow-card h2{
  font-family:var(--display); font-weight:800; text-transform:uppercase; letter-spacing:-.01em;
  font-size:clamp(26px,4.4vw,40px); line-height:1.02; color:var(--white); margin-bottom:12px;
}
.follow-card p{ font-family:var(--sans); font-size:14px; color:var(--mute); max-width:420px; margin:0 auto 26px; }
.follow-card .follow-btn{
  display:inline-flex; align-items:center; gap:11px;
  font-family:var(--sans); font-weight:600; font-size:15px; letter-spacing:.1em;
  color:var(--ink); background:linear-gradient(135deg, var(--accent-3), var(--accent));
  padding:15px 32px; border-radius:2px; box-shadow:var(--glow-strong);
  transition:transform .3s ease, filter .3s ease;
}
.follow-card .follow-btn svg{ width:20px; height:20px; flex:none; }
.follow-card .follow-btn:hover{ transform:translateY(-2px); filter:brightness(1.06); }
/* keep the handle on one line on narrow phones */
@media (max-width:430px){
  .follow-card .follow-btn{ font-size:13.5px; letter-spacing:.05em; padding:14px 20px; gap:9px; white-space:nowrap; }
  .follow-card .follow-btn svg{ width:18px; height:18px; }
}

/* ---------- BOTTOM CREDIT BAR ---------- */
.credit-bar{ position:relative; z-index:1; text-align:center; background:#000; border-top:1px solid rgba(57,255,20,.12);
  padding:16px var(--pad); font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--mute-dk); }
.credit-bar a{ color:var(--gold-dk); border-bottom:1px solid var(--hairline); transition:color .2s; }
.credit-bar a:hover{ color:var(--accent); }

/* screen-reader only */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }