/* Da Vinci brand tokens, trimmed to what these three pages use.
   Brand rules honoured: text is only black or white, lime is an accent and
   never a surface, motion is fade and translate only, radii are near-square. */

@font-face {
  font-family: 'Porteron';
  src: url('fonts/Porteron-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Porteron';
  src: url('fonts/Porteron-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  --off-black: #261414;
  --deep-purple: #441949;
  --bright-purple: #8a8bff;
  --misty-blue: #b1d6ef;
  --off-white: #d8eae9;
  --lime: #d6f400;

  --keyline: rgba(255, 255, 255, 0.16);
  --keyline-strong: rgba(255, 255, 255, 0.24);
  --font: 'Porteron', ui-sans-serif, system-ui, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.dark {
  background: var(--off-black);
  color: #fff;
}

.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

:focus-visible {
  outline: 3px solid var(--bright-purple);
  outline-offset: 3px;
}

/* --- the flow bar, shared by the projector and the phone ---------------- */

.flow {
  display: flex;
  width: 100%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--keyline);
}

.flow .seg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  color: #000; /* every segment fill is a light brand colour */
  font-weight: 700;
  /* width, not transform: these three segments must tile to exactly 100% and
     each carries a percentage and a count, which scaleX would stretch. Three
     flex children relaying four times a second costs nothing. */
  transition: width 220ms var(--ease);
}

.flow .sell { background: var(--bright-purple); }
.flow .pass { background: var(--misty-blue); }
.flow .buy  { background: var(--lime); }

.flow.hidden .seg {
  background: rgba(255, 255, 255, 0.14);
  color: transparent;
}