/*
 * The boot state.
 *
 * Everything here has to work with no script and no font loaded, because it
 * paints before either arrives. It is removed by the wasm module once the app
 * has mounted, and it fades rather than vanishing so a fast load does not
 * flash.
 */

.boot {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  background: var(--bg);
  transition: opacity 320ms ease;
}

/* Set by the wasm module on mount. */
.boot--done {
  opacity: 0;
  pointer-events: none;
}

.boot__mark {
  position: relative;
  width: 132px;
  height: 132px;
}

/*
 * The four candlesticks, building left to right.
 *
 * They are the mark's own bars, at the mark's own heights. They grow once and
 * stop — a bar that keeps flickering would imply live prices behind it, and
 * there are none. Nothing on this page may pose as market data, and a logo is
 * not an exception to that.
 */
.boot__bars {
  position: absolute;
  /* Roughly where the mark's own candlesticks sit inside the S. */
  inset: 20% 20% 22% 24%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.boot__bars span {
  position: relative;
  width: 17%;
  height: var(--to);
  background: linear-gradient(180deg, var(--gold-hi), var(--gold-lo));
  border-radius: 2px;
  transform-origin: 50% 100%;
  animation: boot-rise 420ms cubic-bezier(0.16, 1, 0.3, 1) var(--at) both;
}

/* The wick, which is what makes a bar a candlestick rather than a column. */
.boot__bars span::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -22%;
  width: 1.5px;
  height: 144%;
  margin-left: -0.75px;
  background: var(--gold-lo);
  border-radius: 1px;
}

@keyframes boot-rise {
  from { transform: scaleY(0); opacity: 0; }
  to { transform: scaleY(1); opacity: 1; }
}

/*
 * The real mark resolves over the bars once they have finished building. It is
 * the artwork itself — nothing here is a redrawing of it, so nothing here can
 * be slightly wrong.
 */
.boot__logo {
  position: absolute;
  inset: 0;
  width: 132px;
  height: 132px;
  opacity: 0;
  /*
   * The artwork's ground is pure black and the page is two values away from
   * it, which at this size leaves a faint square. Feathering the outermost
   * few per cent hides the edge; the mark's ink sits well inside that, so
   * nothing of it is touched.
   */
  -webkit-mask-image: radial-gradient(closest-side, var(--mask-keep) 86%, transparent 100%);
  mask-image: radial-gradient(closest-side, var(--mask-keep) 86%, transparent 100%);
  /* Held back so the four bars stand complete for a beat before the mark
     resolves over them. Starting on the last bar's finish meant the chart the
     animation exists to draw was never once seen whole. */
  animation: boot-resolve 560ms ease-out 980ms both;
}

@keyframes boot-resolve {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: none; }
}

.boot__label {
  margin: 0;
  color: var(--text-4);
  font-size: 12px;
  letter-spacing: 0.02em;
  animation: boot-resolve 460ms ease-out 1120ms both;
}

/*
 * Asked for less movement, the state still has to say the page is working —
 * so the mark and the label are simply there, at rest, from the first frame.
 */
@media (prefers-reduced-motion: reduce) {
  .boot__bars { display: none; }
  .boot__logo,
  .boot__label { animation: none; opacity: 1; transform: none; }
}