/* ==========================================================================
   NEUROCLAW — reveal.js stage theme
   ---------------------------------------------------------------------------
   This is a full reveal.js theme in the NEUROCLAW design language. We do NOT
   load any of reveal's bundled themes (black/white/…) — they fight us with
   beige/serif defaults. reveal.css (layout engine) + reset.css only, then this.

   Tokens are vendored 1:1 from the live shop (neuroclaw-theme/assets/
   neuroclaw-tokens.css, LOCKED v1.0). Same hex, same fonts, same semantics →
   the deck IS the shop. Dark is home (Tenet 5). Stage = 1920x1080 (16:9).

   Type is re-scaled UP for a stage read (a slide is read from across a room,
   not from a laptop), but stays on the modular system. The shop's clamp()
   web scale would render tiny on a projector.
   ========================================================================== */

/* ------------------------------------------------------------------ TOKENS */
:root {
  /* Primitive palette — the crayons (never used directly) */
  --c-red-300: #E8675F;
  --c-red-500: #D6342B;   /* Brand red — CTA, logo, power-LED */
  --c-red-600: #BE2C24;
  --c-red-700: #A81E15;
  --c-red-900: #5E140F;
  --c-paper-100: #FBF9F5;
  --c-paper-200: #F5F2EC;  /* Off-white */
  --c-paper-300: #ECE7DD;
  --c-stone-300: #D8D2C6;
  --c-stone-400: #C9C2B5;
  --c-stone-500: #A8A29A;
  --c-ink-900: #121212;    /* deepest BG (dark default canvas) */
  --c-ink-850: #1A1A1A;
  --c-ink-800: #232323;
  --c-ink-700: #2E2E2E;
  --c-ink-600: #3A3A3A;
  --c-ink-500: #525252;
  --c-ink-100: #F2EFE9;    /* dark-mode text */
  --c-cyan-400: #2BD4C4;   /* mascot-eye / link / second accent on dark */
  --c-cyan-300: #5EE6D8;
  --c-cyan-700: #0E8C80;
  --c-status-green: #3FBF6A;
  --c-status-amber: #FFB000;
  --c-status-red: #E8675F;

  /* Semantic — DARK (the stage default) */
  --bg-canvas: var(--c-ink-900);
  --bg-surface: var(--c-ink-850);
  --bg-surface-2: var(--c-ink-800);
  --bg-surface-3: var(--c-ink-700);
  --bg-inset: #0D0D0D;
  --text-primary: var(--c-ink-100);
  --text-muted: var(--c-stone-500);
  --text-on-accent: #FFFFFF;
  --border-subtle: var(--c-ink-600);
  --border-strong: var(--c-ink-500);
  --accent: var(--c-red-500);
  --accent-hover: var(--c-red-600);
  --accent-text: var(--c-red-300);
  --accent-2: var(--c-cyan-400);
  --accent-2-hover: var(--c-cyan-300);
  --focus-ring: var(--c-cyan-400);
  --status-ok: var(--c-status-green);
  --status-warn: var(--c-status-amber);
  --status-err: var(--c-status-red);

  /* Type families (self-hosted, see neuroclaw-fonts.css) */
  --font-display: "Space Grotesk", system-ui, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --font-pixel: "Press Start 2P", "JetBrains Mono", monospace;

  /* Elevation + glows (dark: surface steps + borders carry depth) */
  --elev-2: 0 8px 24px -8px rgba(0,0,0,0.5);
  --elev-3: 0 16px 48px -12px rgba(0,0,0,0.6);
  --glow-accent: 0 0 0 1px var(--accent), 0 0 16px -4px rgba(214,52,43,0.5);
  --glow-cyan: 0 0 12px -2px rgba(43,212,196,0.45);

  /* Motion (Teenage-Engineering discipline: fast, precise) */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  /* STAGE TYPE SCALE — re-tuned up for a projector read. Major-Third (1.25)
     on the display steps, base 26px (reveal authors against a 960x700 deck
     by default; we run 1920x1080, so a comfortable stage base is ~26px). */
  --fs-mega:    8.5rem;    /* the one hero word (e.g. NEUROCLAW lockup) */
  --fs-display: 5.25rem;   /* slide H1 */
  --fs-h1:      3.75rem;
  --fs-h2:      2.75rem;
  --fs-h3:      2rem;
  --fs-body-lg: 1.6rem;
  --fs-body:    1.3rem;
  --fs-body-sm: 1.1rem;
  --fs-label:   1.05rem;   /* mono eyebrows / labels */
  --fs-label-sm:0.95rem;   /* BATCH/REV tags, status */

  /* Spacing (4px base) — stage rhythm */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 7rem;

  /* Radius (hardware is squared; terminal motifs are sharp) */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --stage-pad-x: 8rem;     /* generous side margin = premium (Tenet 4) */
  --stage-pad-y: 4.5rem;
}

/* --------------------------------------------------------- REVEAL OVERRIDE */
html, body { background: var(--bg-canvas); }

.reveal-viewport {
  /* Deep graphite stage with a single, quiet radial lift from centre — the
     same "CRT housing glow" the hero-reveal uses. NOT a slop neon gradient:
     it's near-black, low-energy, just enough to seat the content in space. */
  background:
    radial-gradient(120% 90% at 50% 38%, #1c1a1a 0%, #141313 38%, #0d0d0d 100%);
}

.reveal {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--text-primary);
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.reveal ::selection { background: var(--accent); color: var(--text-on-accent); }

/* Slides: left-aligned by default (editorial, not centred-slop). Individual
   slides opt into centring with .nc-center. */
.reveal .slides { text-align: left; }
.reveal .slides section,
.reveal .slides section.present { height: 100%; }

/* Headings — Space Grotesk, tight tracking, balanced wrap */
.reveal h1, .reveal h2, .reveal h3, .reveal h4 {
  font-family: var(--font-display);
  color: var(--text-primary);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
  text-transform: none;
  text-wrap: balance;
}
.reveal h1 { font-size: var(--fs-display); }
.reveal h2 { font-size: var(--fs-h1); }
.reveal h3 { font-size: var(--fs-h2); font-weight: 600; letter-spacing: -0.01em; }
.reveal h4 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.01em; }

.reveal p { font-size: var(--fs-body); line-height: 1.6; margin: 0 0 var(--space-md); }
.reveal strong { font-weight: 700; color: var(--text-primary); }
.reveal em { font-style: italic; }
.reveal a { color: var(--accent-2); text-decoration: none; }

/* Kill reveal's default bullet styling; we build lists deliberately */
.reveal ul, .reveal ol { display: block; margin: 0; }

/* Focus ring — always visible (a11y), cyan on dark */
.reveal :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

/* ----------------------------------------------------- NC ATOMS (reusable) */

/* The accent word: "CLAW" red, "NEURO" stays primary. Used in the wordmark. */
.nc-accent { color: var(--accent); }
.nc-cyan { color: var(--accent-2); }
.nc-muted { color: var(--text-muted); }

/* Mono eyebrow — the recurring config/terminal cue (design.md §5.1) */
.nc-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.nc-eyebrow .idx { color: var(--accent-2); }

/* Status LED dot — the brand's heartbeat. ● green=online, ● red=power. */
.nc-led {
  display: inline-block;
  width: 0.62em; height: 0.62em;
  border-radius: 50%;
  background: var(--status-ok);
  box-shadow: 0 0 8px -1px var(--status-ok);
  vertical-align: middle;
  flex: none;
}
.nc-led--red { background: var(--accent); box-shadow: 0 0 9px -1px rgba(214,52,43,0.7); }
.nc-led--cyan { background: var(--accent-2); box-shadow: var(--glow-cyan); }
.nc-led--pulse { animation: nc-pulse 2.4s var(--ease-out) infinite; }
@keyframes nc-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* Blinking terminal cursor */
.nc-cursor {
  display: inline-block;
  width: 0.56em; height: 1.05em;
  background: var(--accent-2);
  margin-left: 0.12em;
  transform: translateY(0.14em);
  animation: nc-blink 1.05s steps(1) infinite;
}
@keyframes nc-blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }

/* Mono status badge / chip (design.md §4.8) — sharp, small, technical */
.nc-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--font-mono);
  font-size: var(--fs-label-sm);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.34em 0.7em;
  border-radius: var(--radius-sm);
  border: 1px solid currentColor;
  background: transparent;
  color: var(--text-muted);
  line-height: 1;
}
.nc-badge--cyan { color: var(--accent-2); }
.nc-badge--amber { color: var(--status-warn); }
.nc-badge--accent { color: var(--accent-text); }
.nc-badge--ok { color: var(--status-ok); }

/* Card surface (design.md §4.2) — border + surface step carry depth, no drop */
.nc-card {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}

/* config-file block (design.md §4.4) — the signature nerd hit. SHARP corners. */
.nc-config {
  background: var(--bg-inset);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-none);
  font-family: var(--font-mono);
  overflow: hidden;
}
.nc-config__bar {
  display: flex; align-items: center; gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--fs-label-sm);
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.nc-config__dots { display: inline-flex; gap: 5px; }
.nc-config__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.nc-config__body {
  padding: var(--space-md) var(--space-lg);
  font-size: var(--fs-body-sm);
  line-height: 1.75;
  margin: 0;
  white-space: pre-wrap;
}
.nc-config .k { color: var(--text-primary); }
.nc-config .v { color: var(--accent-2); }
.nc-config .com { color: var(--text-muted); }
.nc-config .ok { color: var(--status-ok); }
.nc-config .rd { color: var(--accent-text); }

/* Buttons (design.md §4.1) — primary red, secondary outline */
.nc-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  padding: 0 var(--space-xl);
  height: 56px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.nc-btn--primary { background: var(--accent); color: var(--text-on-accent); }
.nc-btn--primary:hover { background: var(--accent-hover); box-shadow: var(--glow-accent); }
.nc-btn--secondary { background: transparent; color: var(--text-primary); border-color: var(--border-strong); }
.nc-btn--secondary:hover { border-color: var(--accent-2); color: var(--accent-2); }
.nc-btn__sub { font-family: var(--font-mono); font-weight: 500; opacity: 0.85; }

/* ------------------------------------------------ SLIDE CHROME (reusable) */
/* Every content slide can wear a top boot-bar and a bottom batch/rev footer.
   These are absolutely positioned inside the 1920x1080 slide box so content
   sits in a calm, framed safe-area. ONE retro motif dominates per slide
   (Tenet 1) — the chrome is quiet plumbing, not a second screaming element. */

.nc-slide {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: var(--stage-pad-y) var(--stage-pad-x);
  display: flex;
  flex-direction: column;
}

/* top boot/POST status bar — the brand ritual (design.md §4.5) */
.nc-topbar {
  position: absolute;
  top: 2.4rem; left: var(--stage-pad-x); right: var(--stage-pad-x);
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--fs-label-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.nc-topbar__left { display: inline-flex; align-items: center; gap: 1.4em; }
.nc-topbar__right { display: inline-flex; align-items: center; gap: 0.6em; }
.nc-topbar .ok { color: var(--status-ok); }
.nc-topbar .sep { color: var(--border-strong); }

/* bottom batch/rev footer */
.nc-footbar {
  position: absolute;
  bottom: 2.4rem; left: var(--stage-pad-x); right: var(--stage-pad-x);
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--fs-label-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.nc-footbar .accent { color: var(--accent-text); }

/* tiny brand glyph used inside the chrome */
.nc-glyph-sm { height: 1.3em; width: auto; vertical-align: middle; }

/* Reduced motion (a11y) — kill non-essential animation */
@media (prefers-reduced-motion: reduce) {
  .nc-led--pulse, .nc-cursor { animation: none !important; }
  .reveal .slides section [data-anim] { opacity: 1 !important; transform: none !important; }
}

/* ---- live-demo link buttons (Martin demo slide + ad slide) ---------------
   Real <a target="_blank"> -> opens the live app in a new Chrome tab. Default
   red-keyed; --cyan variant for Martin's section. */
.reveal .nc-demolink {
  display: inline-flex; align-items: center; gap: 0.75em;
  font-family: var(--font-mono);
  text-decoration: none;
  color: var(--text-primary);
  background: var(--bg-inset);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 0.8em 1.15em;
  transition: border-color var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.reveal .nc-demolink:hover,
.reveal .nc-demolink:focus-visible {
  border-color: var(--accent);
  background: rgba(214,52,43,0.12);
  transform: translateY(-2px);
  outline: none;
}
.nc-demolink__play { color: var(--accent); font-size: 0.95em; line-height: 1; flex: none; }
.nc-demolink__txt { display: flex; flex-direction: column; gap: 0.18em; line-height: 1.15; text-align: left; }
.nc-demolink__k { font-size: var(--fs-body); font-weight: 600; letter-spacing: 0.01em; color: var(--text-primary); }
.nc-demolink__host { font-size: var(--fs-label-sm); letter-spacing: 0.08em; color: var(--text-muted); }
/* cyan variant — Martin's section */
.reveal .nc-demolink--cyan:hover,
.reveal .nc-demolink--cyan:focus-visible { border-color: var(--accent-2); background: rgba(43,212,196,0.12); }
.nc-demolink--cyan .nc-demolink__play { color: var(--accent-2); }
/* a row of demo buttons */
.nc-demolink-row { display: flex; flex-wrap: wrap; gap: 1.1rem; }