/* Coordinated first-paint motion for the dashboard. Later navigation keeps its existing transitions. */
@keyframes dashboard-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes dashboard-number-in {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes dashboard-fade-only {
  from { opacity: 0; }
  to { opacity: 1; }
}

.boot-loader { position: fixed; z-index: 3000; inset: 0; display: grid; place-items: center; background: var(--paper); color: var(--mint-dark); pointer-events: none; }
.boot-loader-q { width: 112px; height: 112px; overflow: visible; }
.boot-loader-q text { fill: currentColor; font-family: "Syne", sans-serif; font-size: 21px; font-weight: 800; stroke: none; }
body.dashboard-loading .shell {
  visibility: hidden;
}

.boot-loader.is-arriving { background: transparent; transition: background .18s ease; }

body.dashboard-ready .topbar-left-actions {
  animation: dashboard-fade-in .32s ease both;
}

/* Do not transform these containers: their children include viewport-fixed brands. */
body.dashboard-ready .topbar-brand,
body.dashboard-ready .topbar-actions {
  animation: dashboard-fade-only .32s ease both;
}

body.dashboard-ready .summary {
  animation: dashboard-fade-in .36s .04s ease both;
}

body.dashboard-ready .summary strong {
  animation: dashboard-number-in .3s .12s ease both;
}

body.dashboard-ready .summary-select {
  animation: dashboard-fade-in .3s .16s ease both;
}

body.dashboard-ready .tab-row {
  animation: dashboard-fade-in .34s .14s ease both;
}

body.dashboard-ready #queueView {
  animation: dashboard-fade-in .38s .2s ease both;
}

html.fonts-ready body.dashboard-ready .doq-brand {
  animation: dashboard-fade-in .32s .04s ease both;
}

@media (prefers-reduced-motion: reduce) {
  body.dashboard-ready .topbar-left-actions,
  body.dashboard-ready .topbar-brand,
  body.dashboard-ready .topbar-actions,
  body.dashboard-ready .summary,
  body.dashboard-ready .summary strong,
  body.dashboard-ready .summary-select,
  body.dashboard-ready .tab-row,
  body.dashboard-ready #queueView,
  html.fonts-ready body.dashboard-ready .doq-brand {
    animation: none;
  }
}