/* ==========================================================================
   Flux Chain Analysis: tokens, reset, type, layout.
   Night ground with a blue cast, dark glass slabs with a warm rim, soft glows
   and motion. Headings in Lora, body in IBM Plex Sans, IBM Plex Mono only for
   addresses, transaction ids and numeric table columns. Sentence case.
   There are no background lines or grids anywhere.

   Colour rules
   - One colour per entity family on the whole page (--c-*). They are the
     validated dataviz dark palette (see assets/js/core/palette.js for the
     validator runs). Nothing else on the page uses these hues.
   - Chrome (rims, focus, selected toggles, links) is cream and white. Text never
     wears a series colour: the colour lives on the mark beside the text.
   ========================================================================== */

@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/lora-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}

:root {
  color-scheme: dark;

  --font-serif: "Lora", Georgia, "Times New Roman", serif;
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Ground: night with a blue cast. Elevation is lightness. */
  --night-0: #04060d;
  --night-1: #070b16;
  --night-2: #0a0e1c; /* slab / chart surface (the validator surface) */
  --night-3: #0f1527;
  --night-4: #151d36;
  --night-5: #1e2848;

  /* Ink */
  --text: #eef2fd;
  --text-2: #c9d3ec;
  --text-3: #a8b4d4;
  --text-4: #8796bb;
  --text-faint: #5f6f94; /* decoration only */

  /* Rims and hairlines */
  --line-1: rgba(255, 255, 255, 0.06);
  --line-2: rgba(255, 255, 255, 0.1);
  --line-3: rgba(255, 255, 255, 0.18);
  --line-cool: rgba(150, 170, 230, 0.16);
  --line-cream: rgba(255, 230, 168, 0.12);
  --line-cream-2: rgba(255, 230, 168, 0.28);

  /* Chrome accent: cream (never a series colour) and white-hot */
  --cream: #ffe6a8;
  --cream-hot: #fff3d4;
  --hot: #ffffff;

  /* Entity families (validated dark palette, one colour per family) */
  --c-fn: #3987e5; /* InFlux: Foundation-labeled nodes */
  --c-corp: #199e70; /* InFlux: unlabeled nodes */
  --c-titan: #9085e9; /* Titan nodes and Titan pool */
  --c-team: #d55181; /* Team group */
  --c-fund: #d95926; /* Foundation fund */
  --c-bridge: #008300; /* Fusion bridge pools */
  --c-ops: #c98500; /* treasury, ops, app-fee payers, trading wallets */
  --c-ops2: #8c5600; /* darker step of ops, only where two ops wallets share one stack */
  --c-exch: #e66767; /* exchanges */
  --c-other: #4d566b; /* unidentified / rest of network */
  --c-genesis: #aab6d6; /* protocol-issued supply */

  --radius-slab: 16px;
  --radius-panel: 12px;
  --radius-control: 9px;

  --shadow-float: 0 24px 60px -14px rgba(1, 3, 10, 0.78), 0 10px 22px -10px rgba(1, 3, 10, 0.55);
  --shadow-tile: 0 26px 60px -34px rgba(0, 0, 0, 0.92);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --topbar-h: 52px;
  --wrap: 1240px;
  --wrap-wide: 1400px;
  --gutter: clamp(16px, 4vw, 40px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar-h) + 24px);
  background: var(--night-0);
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text-2);
  font: 400 16px/1.6 var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Soft colour fields behind the page. Light only, no lines. */
  background:
    radial-gradient(1200px circle at 10% -6%, rgba(255, 214, 128, 0.07), transparent 58%),
    radial-gradient(1400px circle at 92% 6%, rgba(93, 139, 255, 0.12), transparent 56%),
    radial-gradient(1000px circle at 50% 118%, rgba(255, 230, 168, 0.05), transparent 60%),
    linear-gradient(180deg, #080c18 0%, #060914 46%, #04060d 100%);
  background-attachment: fixed;
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
}

.nb {
  white-space: nowrap;
}

/* a component's own display rule must not undo the hidden attribute */
[hidden] {
  display: none !important;
}

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: rgba(255, 214, 128, 0.32);
  color: #fff;
}

:focus-visible {
  outline: 2px solid rgba(255, 230, 168, 0.92);
  outline-offset: 2px;
  border-radius: 4px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: fixed;
  left: 12px;
  top: -60px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--cream);
  color: #0a0e1c;
  font-weight: 600;
  transition: top 160ms var(--ease-out);
}
.skip:focus {
  top: 10px;
}

/* ---- Type --------------------------------------------------------------- */

h1,
h2,
h3 {
  margin: 0;
  color: var(--text);
  font-family: var(--font-serif);
  font-weight: 600;
  /* Lora's tabular figures also widen its word space, so headings use proportional ones */
  font-variant-numeric: normal;
  text-wrap: balance;
}

h4 {
  margin: 0;
  color: var(--text);
  font: 600 15px/1.35 var(--font-sans);
  text-wrap: balance;
}

h1 {
  font-size: clamp(34px, 4.4vw, 58px);
  line-height: 1.08;
  letter-spacing: -0.012em;
}

h2 {
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

h3 {
  font-size: clamp(19px, 1.6vw, 23px);
  line-height: 1.25;
  letter-spacing: -0.005em;
}

p {
  margin: 0;
  text-wrap: pretty;
}

.lead {
  font-size: clamp(17px, 1.4vw, 19.5px);
  line-height: 1.6;
  color: var(--text-2);
  max-width: 68ch;
}

.muted {
  color: var(--text-3);
}
.dim {
  color: var(--text-4);
}

.mono {
  font-family: var(--font-mono);
}


code,
kbd {
  font: 400 0.9em var(--font-mono);
  padding: 0.12em 0.4em;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

/* ---- Layout ------------------------------------------------------------- */

.wrap {
  width: min(100% - var(--gutter) * 2, var(--wrap));
  margin-inline: auto;
}

.wrap--wide {
  width: min(100% - var(--gutter) * 2, var(--wrap-wide));
  margin-inline: auto;
}

main {
  display: block;
}

.sec {
  position: relative;
  padding-block: clamp(64px, 8vw, 112px);
}

.sec-head {
  display: grid;
  gap: 16px;
  margin-bottom: clamp(26px, 3.6vw, 46px);
  max-width: 860px;
}

.grid {
  display: grid;
  gap: 20px;
}

/* ---- Reveal on scroll --------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  /* !important: a tile or row has its own hover transitions, which must not replace this one.
     The reveal classes come off once the entrance is done (see initReveals in core/motion.js). */
  transition:
    opacity 700ms var(--ease-out) var(--d, 0ms),
    transform 700ms var(--ease-out) var(--d, 0ms) !important;
}
.reveal.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none !important;
  }
}

/* A section that failed to build says so in plain text */
.building {
  padding: 24px 0;
  color: var(--text-3);
  font-size: 14px;
}