/* Builder Saturdays — shared styles. Linked by every page BEFORE its own inline
 * <style>, so a page can still override any token locally (e.g. --border).
 *
 * This file exists because eight pages each carried their own copy of the colour
 * tokens and they drifted: projects.html had silently gone cold grey (#0A0A0A /
 * #888) while every other page is warm charcoal. Tokens live HERE and nowhere else.
 *
 * Fonts are NOT imported here (an @import would serialise the font request behind
 * this file). Each page's <link> to Google Fonts must include Unbounded, Inter
 * and JetBrains Mono.
 */

:root {
  /* ground */
  --bg: #1A1814;
  --bg-elevated: #211F1A;
  --bg-card: #2A2722;
  --ink: #12110E;          /* deep bands: showcase, cards */
  --void: #0B0A08;         /* CRT ground: hero, terminal, manifesto */
  --line: rgba(240, 235, 224, 0.09);
  --line-2: rgba(240, 235, 224, 0.16);

  /* signal */
  --lime: #BAFF29;
  --lime-hot: #E4FF9E;     /* cursor lens, playheads, current week */
  --lime-dim: rgba(186, 255, 41, 0.15);
  --amber: #FFB800;
  --amber-dim: rgba(255, 184, 0, 0.12);
  --coral: #FF7A59;        /* the "−" in diffs, errors, glitch split */
  --coral-dim: rgba(255, 122, 89, 0.12);

  /* text */
  --text: #F0EBE0;
  --text-muted: #B8B0A0;
  --text-dim: #847A6A;

  /* type */
  --font-display: 'Unbounded', 'Arial Black', system-ui, sans-serif;
  --font-heading: var(--font-display);
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* motion */
  --ease-ship: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-micro: 160ms;
  --t-ui: 320ms;
  --t-reveal: 700ms;
  --t-hero: 1200ms;
}

::selection { background: var(--lime); color: var(--bg); }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

/* ========== SITE NAV (shared) ==========
   Class-scoped (.bs-nav), not a bare `nav` selector, so it cannot collide with
   the page-local nav rules the older pages still carry. */
/* Sticky, not fixed: it keeps its own space in the flow, so pages built for an
   in-flow nav (proof, profile, event pages) don't slide under it. The homepage
   overrides this to fixed because its hero is designed to run underneath. */
.bs-nav {
  position: sticky; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.85rem clamp(1rem, 3vw, 2rem);
  padding-top: calc(0.85rem + env(safe-area-inset-top, 0px));
  background: rgba(11, 10, 8, 0.78);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  transition: padding var(--t-ui) var(--ease-ship), background var(--t-ui);
}
.bs-nav.is-scrolled { padding-top: calc(0.55rem + env(safe-area-inset-top, 0px)); padding-bottom: 0.55rem; background: rgba(11, 10, 8, 0.92); }
.bs-nav a { text-decoration: none; }
.bs-brand { display: flex; align-items: center; gap: 0.65rem; color: var(--text); }
.bs-badge {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 36px; height: 36px; border: 2px solid var(--lime); border-radius: 8px;
  font-family: var(--font-mono); font-weight: 800; font-size: 12px; letter-spacing: -0.8px;
  color: var(--text);
}
.bs-badge .br { color: var(--lime); display: inline-block; transition: transform var(--t-ui) var(--ease-ship); }
.bs-brand:hover .bs-badge .br:first-child { transform: translateX(-2px); }
.bs-brand:hover .bs-badge .br:last-child { transform: translateX(2px); }
.bs-wordmark { display: flex; flex-direction: column; line-height: 1.15; font-size: 0.8rem; letter-spacing: -0.3px; }
.bs-wordmark b { color: var(--lime); font-weight: 700; }
.bs-wordmark span { color: var(--text); }
.bs-links { display: flex; align-items: center; gap: clamp(0.9rem, 2.2vw, 1.8rem); list-style: none; margin: 0; padding: 0; }
.bs-links a { color: var(--text-muted); font-size: 0.82rem; transition: color var(--t-micro); }
.bs-links a:hover, .bs-links a[aria-current="page"] { color: var(--lime); }
.bs-links .bs-join {
  display: inline-flex; align-items: center; gap: 0.45rem;
  color: #151410; background: var(--lime); font-weight: 700;
  padding: 0.42rem 0.8rem; border-radius: 6px; font-size: 0.78rem;
  box-shadow: 0 0 0 1px rgba(186,255,41,0.4), 0 6px 24px -8px rgba(186,255,41,0.7);
}
.bs-links .bs-join:hover { color: #151410; background: var(--lime-hot); }
.bs-join .live-dot { display: none; width: 6px; height: 6px; border-radius: 50%; background: #151410; animation: bs-pulse 1.4s ease-in-out infinite; }
.bs-join.is-live .live-dot { display: inline-block; }
@keyframes bs-pulse { 50% { opacity: 0.2; } }
@media (max-width: 768px) {
  .bs-wordmark { display: none; }
  .bs-links { gap: 0.9rem; }
  .bs-links a { font-size: 0.76rem; }
  .bs-links .bs-hide-sm { display: none; }
}

/* ========== SITE FOOTER (shared) ========== */
.bs-footer {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--void); border-top: 1px solid var(--line);
  padding: 3rem clamp(1.25rem, 4vw, 3rem) 0;
  font-family: var(--font-mono);
}
.bs-footer-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem 2rem; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; font-size: 0.78rem; color: var(--text-dim); }
.bs-footer-row nav { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.bs-footer-row a { color: var(--text-muted); text-decoration: none; }
.bs-footer-row a:hover { color: var(--lime); }
.bs-footer-mark {
  font-family: var(--font-display); font-weight: 900; line-height: 0.8; letter-spacing: -0.04em;
  font-size: clamp(4.5rem, 21vw, 19rem); text-align: center; white-space: nowrap;
  margin: 2.5rem 0 -0.12em; color: transparent;
  -webkit-text-stroke: 1px rgba(186, 255, 41, 0.28);
  user-select: none;
}
.bs-footer-mark .br { -webkit-text-stroke-color: rgba(186, 255, 41, 0.6); }

/* ========== SHARED TEXTURE + HELPERS ========== */
.bs-scanlines { position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, 0.28) 2px 3px),
    radial-gradient(ellipse 85% 75% at 45% 40%, transparent 50%, rgba(0, 0, 0, 0.55) 100%); }
.bs-scanlines.beam::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 22%;
  background: linear-gradient(to bottom, transparent, rgba(186, 255, 41, 0.045), transparent);
  animation: bs-beam 7s linear infinite; }
@keyframes bs-beam { from { transform: translateY(-100%); } to { transform: translateY(560%); } }
.bs-caret { display: inline-block; width: 0.42em; height: 0.74em; background: var(--lime); margin-left: 0.08em; vertical-align: -0.02em;
  box-shadow: 0 0 24px rgba(186, 255, 41, 0.6); animation: bs-blink 1s steps(1) infinite; }
@keyframes bs-blink { 50% { opacity: 0; } }
.bs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Pause-mode bar (motion.js → initPauseBanner). Bottom-pinned so it never
   collides with the fixed homepage nav or the sticky page nav. */
.bs-pause-bar {
  position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  z-index: 90; display: flex; align-items: center; gap: 0.75rem;
  width: max-content; max-width: calc(100vw - 32px);
  padding: 0.6rem 0.6rem 0.6rem 1rem; border-radius: 999px;
  background: rgba(20, 18, 14, 0.94); border: 1px solid rgba(255, 184, 0, 0.45);
  color: var(--text); font-size: 0.82rem; line-height: 1.35; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}
.bs-pause-bar .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); flex: none; }
.bs-pause-bar a { color: var(--lime); white-space: nowrap; text-decoration: none; font-weight: 600; }
.bs-pause-bar button { background: none; border: 0; color: var(--text-muted); font-size: 1.1rem; cursor: pointer; padding: 0 0.4rem; line-height: 1; }
@media (max-width: 560px) { .bs-pause-bar { border-radius: 12px; width: calc(100vw - 32px); } }

@media (prefers-reduced-motion: reduce) {
  .bs-scanlines.beam::after, .bs-caret, .bs-join .live-dot { animation: none; }
}