/* =========================================================================
   CINEMATIC DARK — sitewide depth layer
   -------------------------------------------------------------------------
   Loaded on EVERY page (base.html), right after base.css so it wins the
   cascade. This is the "Cinematic Dark" identity the user approved on the
   home mockup, promoted into the global design system so all ~50 pages share
   the same look without hand-editing each template.

   It is purely ADDITIVE — it reuses the existing color tokens (--mint,
   --coral, --ink-*, --line, --bull-rgb, --bear-rgb) and only:
     1. swaps the display font to Outfit (headings) + exposes Space Mono,
     2. paints a fixed ambient mint/coral glow behind the whole page,
     3. upgrades the shared card / panel / chrome primitives to translucent
        "glass" with soft depth + a slightly larger radius,
     4. exposes reusable cinematic helpers (glass-panel, glow-mint/coral,
        text-gradient, text-mint-gradient, animate-fade-in-up, delay-*).

   Everything degrades cleanly with no JS and honours prefers-reduced-motion.
   NOTE: this is plain CSS (not Tailwind utilities), so it is NOT subject to
   the Tailwind purge — no rebuild needed for the rules in this file.
   The members noir theme (noir.css) loads AFTER this and still wins on
   /members via its body.theme-noir token overrides.
   ========================================================================= */

:root {
  --font-display: 'Outfit', 'Inter', system-ui, sans-serif;
  --font-accent-mono: 'Space Mono', 'JetBrains Mono', ui-monospace, monospace;
  --radius-cine: 14px;
  --radius-cine-lg: 22px;
  --glass-bg: rgba(13, 17, 28, 0.55);
  --glass-border: rgba(255, 255, 255, 0.06);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.42);
  --chrome-bg: rgba(8, 11, 20, 0.7);
}

/* ── Ambient canvas ───────────────────────────────────────────────────────
   A fixed, page-wide mint(left)/coral(right) glow that sits behind all
   content — the signature of the cinematic mockup. Very low alpha so dense
   terminal pages stay readable. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(60% 55% at 12% 38%, rgba(var(--bull-rgb), 0.06), transparent 55%),
    radial-gradient(55% 50% at 88% 18%, rgba(var(--bear-rgb), 0.04), transparent 55%),
    radial-gradient(70% 60% at 50% 120%, rgba(var(--bull-rgb), 0.04), transparent 60%);
}
/* Re-usable element form for sections that want their own local ambient. */
.ambient-bg {
  position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(60% 55% at 12% 38%, rgba(var(--bull-rgb), 0.06), transparent 55%),
    radial-gradient(55% 50% at 88% 18%, rgba(var(--bear-rgb), 0.04), transparent 55%);
}

/* ── Display type ─────────────────────────────────────────────────────────
   Outfit on the structural headings → the geometric, confident cinematic
   voice. Body copy + dense tables stay on Inter for legibility. Numbers stay
   on JetBrains via .num (tabular density). */
h1, h2, h3,
.section-h__title, .fx-display, .fx-display--md {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}
.font-display { font-family: var(--font-display) !important; }
.font-space   { font-family: var(--font-accent-mono); font-variant-numeric: tabular-nums; }

/* ── Glass primitives (sitewide) ──────────────────────────────────────────
   Upgrade the shared bordered card / panel that nearly every page uses, so
   the cinematic depth shows up everywhere at once. Translucent over the
   ambient glow + a soft drop shadow + a larger radius. */
.card--bordered, .card-panel {
  background: var(--glass-bg);
  border-color: var(--glass-border);
  border-radius: var(--radius-cine);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  box-shadow: var(--glass-shadow);
}
.card { border-radius: var(--radius-cine); }

/* Reusable glass surface (matches the mockup's .glass-panel). */
.glass-panel {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-cine-lg);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
  box-shadow: var(--glass-shadow);
}

/* Mega nav panels + bell panel → glass to match the chrome. */
.mega-panel {
  background: var(--glass-bg);
  border-color: var(--glass-border);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
          backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}

/* Global chrome (tape + nav) → deeper glass for the floating-terminal feel.
   id selector beats the .bg-ink-900/85 utility by specificity (no !important),
   and --chrome-bg is token-driven so noir.css can re-tint it on /members. */
#nbt-chrome {
  background: var(--chrome-bg);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
          backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--glass-border);
}

/* ── Glow halos ───────────────────────────────────────────────────────────*/
.glow-mint, .glow-coral { position: relative; }
.glow-mint::before, .glow-coral::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); width: 150%; height: 150%;
  z-index: -1; pointer-events: none;
}
.glow-mint::before  { background: radial-gradient(circle, rgba(var(--bull-rgb), 0.16) 0%, transparent 60%); }
.glow-coral::before { background: radial-gradient(circle, rgba(var(--bear-rgb), 0.16) 0%, transparent 60%); }

/* ── Gradient text ────────────────────────────────────────────────────────*/
.text-gradient {
  background: linear-gradient(135deg, #fff 0%, #9aa3b8 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.text-mint-gradient {
  background: linear-gradient(135deg, var(--mint) 0%, #008f72 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ── Entrance animation ───────────────────────────────────────────────────
   Pure CSS (runs without JS). Ends at opacity:1 so a no-JS / reduced-motion
   viewer always sees content. */
.animate-fade-in-up {
  animation: cineFadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }
@keyframes cineFadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .animate-fade-in-up { animation: none; opacity: 1; transform: none; }
}

/* Soften backdrop-blur cost on small screens (many stacked glass cards). */
@media (max-width: 640px) {
  .card--bordered, .card-panel, .glass-panel {
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
  }
}