/* ============================================
   RIFT ROOT — Brand System
   ============================================ */

:root {
  /* Color tokens */
  --ink: #0A0A0B;
  --ink-2: #111114;
  --ink-3: #17171B;
  --line: #26262C;
  --line-2: #1C1C21;
  --grey-1: #5A5A63;
  --grey-2: #8B8B95;
  --grey-3: #B5B5BD;
  --grey-4: #E8E8EA;
  --paper: #F5F5F7;

  --violet: #A855F7;
  --violet-bright: #C084FC;
  --violet-deep: #7C3AED;
  --violet-glow: rgba(168, 85, 247, 0.35);
  --violet-soft: rgba(168, 85, 247, 0.08);

  /* Tertiary neon — used for system signals, never body */
  --cyan: #22D3EE;
  --cyan-soft: rgba(34, 211, 238, 0.10);
  --cyan-glow: rgba(34, 211, 238, 0.30);
  --lime: #A3E635;
  --lime-soft: rgba(163, 230, 53, 0.10);
  --lime-glow: rgba(163, 230, 53, 0.30);

  /* Supporting accents — warm signals, never body */
  --amber: #F5A524;
  --amber-soft: rgba(245, 165, 36, 0.10);
  --amber-glow: rgba(245, 165, 36, 0.30);
  --rose: #F07178;
  --rose-soft: rgba(240, 113, 120, 0.10);
  --rose-glow: rgba(240, 113, 120, 0.30);

  /* Type */
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-serif: 'Instrument Serif', 'Times New Roman', serif;

  /* Spacing */
  --gutter: clamp(20px, 5vw, 40px);
  --section-y: clamp(80px, 12vw, 160px);

  /* Tweakables (overridden by tweaks panel) */
  --violet-intensity: 1;
  --density: 1;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--ink);
  color: var(--grey-4) !important;
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100vh;
}
/* Beat the host-injected `body :not(iframe) { color: ... !important }` rule. */
html body p,
html body li,
html body span,
html body div,
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body .display,
html body .hero-lede,
html body .thesis-lede,
html body .why-lede,
html body .erebus-lede,
html body .about-text,
html body .about-lede,
html body .ask-text,
html body .pillar-body,
html body .stack-line,
html body .beyond-col p {
  color: var(--grey-4) !important;
}
/* Explicit grey scale tiers stay intact */
html body .mono-label,
html body .timeline-y,
html body .stack-tag,
html body .metric-label { color: var(--grey-2) !important; }
html body .stat-sub,
html body .section-head .num,
html body .section-head .meta,
html body .metric-bracket,
html body .about-sig-meta { color: var(--grey-1) !important; }
/* The accent moments — em inside display headings — keep their accent colors */
html body .display em { color: var(--violet-bright) !important; }
html body .display em.cyan { color: var(--cyan) !important; }
html body .display em.lime { color: var(--lime) !important; }
html body .display em.violet { color: var(--violet-bright) !important; }
html body .display em.amber { color: var(--amber) !important; }
html body .display em.rose  { color: var(--rose) !important; }
/* Stack numbers, metrics, chips keep tertiary colors */
html body .stack-violet .stack-num,
html body .metric-violet .metric-tag,
html body .metric-violet .metric-value { color: var(--violet-bright) !important; }
html body .stack-cyan .stack-num,
html body .metric-cyan .metric-tag,
html body .metric-cyan .metric-value,
html body .hl-mono { color: var(--cyan) !important; }
html body .stack-lime .stack-num,
html body .metric-lime .metric-tag,
html body .metric-lime .metric-value { color: var(--lime) !important; }
html body .chip.violet { color: var(--violet-bright) !important; }
html body .chip.cyan   { color: var(--cyan) !important; }
html body .chip.lime   { color: var(--lime) !important; }
html body .chip.amber  { color: var(--amber) !important; }
html body .chip.rose   { color: var(--rose) !important; }
html body .chip.grey   { color: var(--grey-3) !important; }
html body .contact-email { color: var(--violet-bright) !important; }
html body .contact-email:hover { color: var(--cyan) !important; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
::selection { background: var(--violet); color: var(--ink); }

/* Utility: mono scale labels */
.mono-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey-2);
  font-weight: 500;
}

.mono-label .dot {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--violet);
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  box-shadow: 0 0 8px var(--violet-glow);
}

/* Display serif — for hero moments */
.display {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.06;
  color: var(--grey-4);
  text-wrap: balance;
  padding-bottom: 0.08em;
}

/* em is the ONE accent moment per display headline */
.display em {
  font-style: italic;
  color: var(--violet-bright);
}
/* alternate accents for variety */
.display em.cyan { color: var(--cyan); }
.display em.lime { color: var(--lime); }

/* Layout */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.rule {
  height: 1px;
  background: var(--line);
  border: none;
  margin: 0;
}

/* Section header pattern */
.section-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-block: 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(32px, 6vw, 64px);
  flex-wrap: wrap;
}
.section-head .num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--grey-1);
  letter-spacing: 0.1em;
}
.section-head .name {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey-4);
  font-weight: 500;
}
.section-head .meta {
  margin-left: auto;
  font-size: 11px;
  color: var(--grey-1);
  letter-spacing: 0.08em;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--grey-4);
  transition: border-color 200ms, background 200ms, color 200ms, transform 150ms;
  cursor: pointer;
  position: relative;
}
.btn:hover {
  border-color: var(--violet);
  color: var(--violet-bright);
  background: var(--violet-soft);
}
.btn:active { transform: translateY(1px); }
.btn .arrow { transition: transform 200ms; }
.btn:hover .arrow { transform: translateX(3px); }

.btn-primary {
  background: rgb(168, 85, 247);
  color: rgb(255, 255, 255);
  border-color: rgb(168, 85, 247);
  font-weight: 700;
}
.btn-primary:hover {
  background: rgb(192, 132, 252);
  border-color: rgb(192, 132, 252);
  color: rgb(10, 10, 11);
}
/* Beat the host noir-mode rewrite on primary button */
html body a.btn-primary,
html body button.btn-primary {
  background: rgb(168, 85, 247) !important;
  border-color: rgb(168, 85, 247) !important;
  color: rgb(255, 255, 255) !important;
}
html body a.btn-primary:hover,
html body button.btn-primary:hover {
  background: rgb(192, 132, 252) !important;
  border-color: rgb(192, 132, 252) !important;
  color: rgb(10, 10, 11) !important;
}

/* Animated focus ring on links */
.text-link {
  color: var(--grey-4);
  border-bottom: 1px solid var(--line);
  transition: color 200ms, border-color 200ms;
}
.text-link:hover {
  color: var(--violet-bright);
  border-color: var(--violet);
}

/* Glow utility */
.violet-glow {
  filter: drop-shadow(0 0 24px var(--violet-glow));
}

/* Subtle grid background pattern */
.grid-bg {
  background-image:
    linear-gradient(var(--line-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
  background-size: 80px 80px;
  background-position: -1px -1px;
}

/* Fade-in on scroll.
 *
 * RUBRIC (Sonar-vetted, applied mechanically):
 *   ✓ small uniform cards in a grid (3-6+) — stagger 60-100 ms per item,
 *     total cascade ≤ 500 ms
 *   ✗ text blocks, ledes, paragraphs — never
 *   ✗ section headings, hero, above-fold — never
 *   ✗ single isolated callouts — never (they need raw, immediate impact)
 *   ✗ side rails, contact rows — never
 *
 * --fade-delay is set per-element to stagger grids; default 0 fades a
 * lone item immediately on intersect.
 */
[data-fade] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 520ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--fade-delay, 0ms);
  will-change: opacity, transform;
}
[data-fade].in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  [data-fade] { opacity: 1; transform: none; transition: none; }
}

/* Marquee */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding-block: 18px;
  background: var(--ink-2);
}
.marquee-track {
  display: flex;
  animation: marquee 90s linear infinite;
  width: max-content;
  will-change: transform;
}
.marquee-item {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey-3);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-right: 56px;
}
.marquee-item:last-child { margin-right: 56px; }
.marquee-item .glyph {
  color: var(--violet);
  font-family: var(--font-mono);
  font-size: 10px;
}
.marquee-copy {
  display: flex;
  flex-shrink: 0;
}
.glyph-cyan   { color: var(--cyan) !important; }
.glyph-violet { color: var(--violet-bright) !important; }
.glyph-lime   { color: var(--lime) !important; }
.glyph-grey   { color: var(--grey-2) !important; }
/* Two copies side-by-side; -50% lands the second copy where the first started */
@keyframes marquee {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

/* Edge fades to soften the wrap visually */
.marquee {
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}

/* Card */
.card {
  border: 1px solid var(--line);
  background: var(--ink-2);
  padding: clamp(20px, 3vw, 32px);
  position: relative;
  transition: border-color 250ms, background 250ms;
}
.card:hover {
  border-color: var(--grey-1);
}
.card .corner {
  position: absolute;
  width: 8px;
  height: 8px;
  border: 1px solid var(--violet);
}
.card .corner.tl { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.card .corner.tr { top: -1px; right: -1px; border-left: none; border-bottom: none; }
.card .corner.bl { bottom: -1px; left: -1px; border-right: none; border-top: none; }
.card .corner.br { bottom: -1px; right: -1px; border-left: none; border-top: none; }

/* Pulse for the dot */
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--violet-glow), 0 0 12px var(--violet-glow); }
  50% { box-shadow: 0 0 0 6px transparent, 0 0 16px var(--violet-glow); }
}

/* Mobile */
@media (max-width: 720px) {
  body { font-size: 14px; }
}

/* Tertiary chip styles */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 8px;
  border: 1px solid;
}
.chip.violet { color: var(--violet-bright); border-color: var(--violet); background: var(--violet-soft); }
.chip.cyan   { color: var(--cyan);          border-color: var(--cyan);   background: var(--cyan-soft); }
.chip.lime   { color: var(--lime);          border-color: var(--lime);   background: var(--lime-soft); }
.chip.amber  { color: var(--amber);         border-color: var(--amber);  background: var(--amber-soft); }
.chip.rose   { color: var(--rose);          border-color: var(--rose);   background: var(--rose-soft); }
.chip.grey   { color: var(--grey-3);        border-color: var(--line);   background: var(--ink); }

/* ── Cross-domain nav loading feedback ────────────────────── */
.btn.is-loading,
.nav-cta.is-loading,
.nav-mobile-cta.is-loading { opacity: 0.6; pointer-events: none; }

.btn.is-loading .arrow,
.nav-cta.is-loading .dot,
.nav-mobile-cta.is-loading .dot {
  animation: rr-spin 0.6s linear infinite;
  display: inline-block;
}

@keyframes rr-spin { to { transform: rotate(360deg); } }

/* Top-of-page progress sliver on cross-domain nav */
body.is-leaving::before {
  content: '';
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--violet) 0%, var(--cyan) 50%, var(--violet) 100%);
  background-size: 200% 100%;
  animation: rr-leaving 1.2s linear infinite;
  z-index: 100000;
}

@keyframes rr-leaving { to { background-position: -200% 0; } }

/* ====== Site footer ====== */
.site-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: var(--ink);
  font-family: var(--font-mono);
}

.site-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 32px;
  max-width: 1200px;
  padding-inline: 24px;
  margin-inline: auto;
}

/* Brand mark — logo + wordmark + LLC badge */
.site-footer-mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 200ms;
}
.site-footer-mark:hover {
  color: var(--grey-4);
}

.site-footer-wordmark {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: inherit;
}
.site-footer-wordmark .dim {
  color: var(--grey-1);
}

.site-footer-llc {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey-1);
  align-self: flex-end;
  padding-bottom: 1px;
}

/* Copyright / meta */
.site-footer-copy {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--grey-1);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* Nav links */
.site-footer-links {
  display: flex;
  align-items: center;
  gap: 12px;
}

.site-footer-link {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey-2);
  text-decoration: none;
  transition: color 200ms;
}
.site-footer-link:hover {
  color: var(--violet-bright);
}

.site-footer-sep {
  color: var(--grey-1);
  font-size: 10px;
  user-select: none;
}

/* Mobile: stack vertically, center */
@media (max-width: 640px) {
  .site-footer-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding-block: 28px;
  }
  .site-footer-copy {
    white-space: normal;
  }
}
/* ====== /Site footer ====== */