/* ── live ticker ────────────────────────────────────────────────
   The two live numbers the mission section closes on, carried in
   the nav so the page opens on its own evidence. It sits centered
   in the nav row, independent of the logo/links either side (see
   the grid in nav.css), and reads as a chip floating on the photo
   rather than as a bar: its own ground, no outline, blurred over
   whatever it passes. On a narrow nav it drops to a line of its
   own beneath the logo and the links rather than leaving.

   Labels in the body sans, values in mono — the same division the
   rest of the page keeps: mono is for machine-produced figures and
   nothing else. A dot pulses beside each figure. They are fetched
   live, so each one should look like it is still listening in the
   long pauses between updates.
   ─────────────────────────────────────────────────────────────── */

/* One leg of a rotation — out, or in. app.js reads the same number;
   keep them together. */
:root { --turn: .34s; }

.statusbar {
  min-width: 0;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  /* No outline: the chip is held by its own ground and the blur
     under it, which is what keeps it reading as glass over the
     photo rather than as a bordered control. */
  background: rgba(15, 14, 13, .52);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  color: var(--ink-2);
}

.statusbar-line {
  display: flex;
  align-items: center;
  /* Wide, because it is the only thing separating the two figures
     now that the rule between them is gone. */
  gap: 20px;
  font-size: var(--t-mono);
  white-space: nowrap;
}

.statusbar-item {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
}

/* The numbers are the point of the ticker — the labels are not. */
.statusbar-n {
  font-family: var(--mono);
  font-size: var(--t-mono-sm);
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--ink);
}

/* ── liveness ───────────────────────────────────────────────────
   One dot per figure, sitting after it. Slow and shallow: it should
   register at the edge of vision and never pull the eye off the
   headline. The two are deliberately out of phase — in step they
   read as one blinking rule, apart as two things each keeping
   their own time.

   The dots are nested inside the items rather than being items
   themselves, which is what lets them animate at all: the arrival
   below transitions the opacity of everything the line holds
   directly, and an animation on the same property would outrank it
   and show the dot through the hold.
   ─────────────────────────────────────────────────────────────── */

.statusbar-dot {
  align-self: center;
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-text);
  opacity: .4;
}

@media (prefers-reduced-motion: no-preference) {
  .statusbar-dot { animation: bar-breathe 2.8s var(--ease) infinite; }
  .statusbar-item:last-child .statusbar-dot { animation-delay: -1.1s; }
}

@keyframes bar-breathe {
  0%, 100% { opacity: .32; box-shadow: 0 0 0 0 rgba(227, 112, 60, 0); }
  38%      { opacity: 1;   box-shadow: 0 0 7px 0 rgba(227, 112, 60, .5); }
}

/* ── narrow ─────────────────────────────────────────────────────
   A phone nav has room for one figure at a time between the logo
   and the links, so the two take turns there instead of sitting
   side by side: the chip keeps its place beside the logo, and the
   figures rotate through it. Sized to the wider of the two and
   left-justified, so the box never resizes under the text.

   The turn itself is in app.js — everything here is the states it
   moves between.
   ─────────────────────────────────────────────────────────────── */

@media (max-width: 880px) {
  /* The row's gap tightens for the chip too — in nav.css, which
     loads after this and would otherwise win. */
  .statusbar { padding: 6px 10px; }
  .statusbar-line { font-size: 11px; }
  .statusbar-n { font-size: var(--t-mono-sm); }

  /* "Companies started" is more label than the space can hold. */
  .statusbar-more { display: none; }
}

@media (max-width: 880px) and (prefers-reduced-motion: no-preference) {
  /* Both figures in one cell: the chip takes the width of the
     wider and holds it, so nothing around it moves as they swap. */
  .statusbar-line { display: grid; }

  .statusbar-item {
    grid-area: 1 / 1;
    transition: opacity var(--turn) var(--ease),
                transform var(--turn) var(--ease);
  }

  /* Where the pair sits before the script takes over, and where
     they stay if it never arrives: the first figure showing, the
     rest below it. Stacking them in one cell means a chip with no
     script would otherwise print both on top of each other. */
  .statusbar-item + .statusbar-item {
    opacity: 0;
    transform: translateY(8px);
  }

  /* Showing. Stated rather than assumed, because it has to beat
     the rule above once the script is running. */
  .statusbar-item[data-turn="on"] {
    opacity: 1;
    transform: none;
  }

  /* Leaving, upward. */
  .statusbar-item[data-turn="out"] {
    opacity: 0;
    transform: translateY(-8px);
  }

  /* Waiting below for its turn. No transition: this state is only
     ever jumped to, never animated into — it is where a figure is
     parked once it has left, and where the next one starts. */
  .statusbar-item[data-turn="under"] {
    opacity: 0;
    transform: translateY(8px);
    transition: none;
  }

  /* The arrival's stagger is for two figures side by side. Here
     only one is ever on screen, and the delay would otherwise
     carry into every rotation after it. */
  .statusbar.is-in .statusbar-line > .statusbar-item { transition-delay: 0s; }
}

/* Under reduced motion nothing rotates, so both figures need to be
   on screen at once — which the nav row cannot hold. They keep the
   line beneath it instead, under the logo they sit next to. */
@media (max-width: 880px) and (prefers-reduced-motion: reduce) {
  nav .wrap {
    flex-wrap: wrap;
    row-gap: 10px;
    align-content: center;
  }
  .statusbar { order: 1; }
}

/* Too narrow even for one figure beside the links. The chip drops
   to a line of its own, still on the logo's axis, still rotating. */
@media (max-width: 379px) {
  nav .wrap {
    flex-wrap: wrap;
    row-gap: 10px;
    align-content: center;
  }
  .statusbar { order: 1; }
}

/* ── arrival ────────────────────────────────────────────────────
   The pill and its contents are held from the first paint, then
   cascade in reading order 500ms in, ahead of the hero's own
   sequence. Nothing around it moves: the ticker holds its box
   throughout, only its paint is held back.

   Transitions rather than a keyframe animation, and the hidden
   state written as the exception rather than the resting state.
   A tab opened in the background never renders, and Chrome leaves
   its animations pending indefinitely — with a backwards fill that
   would strand the ticker at opacity 0 for as long as the tab stays
   unseen. A transition that never runs just leaves the contents at
   their target, which is visible.
   ─────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  /* Held. Set by the inline script in <head> so it is true at the
     first paint, and deliberately without a transition of its own:
     the ticker has to start hidden, not fade out on its way there.
     Transitioning into this state is what made the line fade out
     and then back in. */
  .bar-hold .statusbar:not(.is-in),
  .bar-hold .statusbar:not(.is-in) .statusbar-line > * {
    opacity: 0;
    transition: none;
  }
  .bar-hold .statusbar:not(.is-in) { transform: translateY(-4px); }
  .bar-hold .statusbar:not(.is-in) .statusbar-line > * { transform: translateY(4px); }

  /* The arrival. The transition lives on the destination state, so
     it describes the way in and nothing else. */
  .statusbar.is-in,
  .statusbar.is-in .statusbar-line > * {
    transition: opacity .5s var(--ease), transform .5s var(--ease);
  }
  .statusbar.is-in .statusbar-line > :nth-child(2) { transition-delay: .12s; }

  /* Set when the ticker is released into a window that is not being
     rendered — a background tab, an occluded or minimised window.
     There is no frame to animate on, and a pending transition would
     report and paint its start value, so the contents would simply
     never appear. Dropping the transition puts them straight at
     their resting state instead. Last of the three, so it wins. */
  .statusbar.is-instant,
  .statusbar.is-instant .statusbar-line > * {
    transition: none;
  }
}