/* UnifyTrade logo — presentation and motion. The geometry lives in
   scripts/brand-logo.js and the colours in tokens.css (--logo-1…3).

   Five states, one idea: the bowl is the journal, the three input segments are
   the venues reporting into it. Nothing spins, nothing bounces, nothing
   recolours the mark. Every keyframe animation sits behind
   prefers-reduced-motion, and the resting mark is the reduced-motion state —
   no separate fallback markup is needed.

   Rules: only one animated mark on screen at a time, and .ut-sync and .ut-live
   never run together. */

ut-logo { display: inline-flex; line-height: 0; }
.ut-logo { display: block; overflow: visible; }
.ut-logo .ut-bowl { stroke-dasharray: 86; }   /* bowl path length is 84.55 */

/* ---- lockup ----------------------------------------------------------- */

.ut-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.ut-lockup-text {
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1;
  color: var(--text);
}

.ut-lockup-sub {
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---- boot: cold start, once ------------------------------------------- */
/* The bowl draws from the left arm round to the right, then the three inputs
   land on it. The order is the argument: the journal exists first. */

@media (prefers-reduced-motion: no-preference) {
  .ut-boot .ut-bowl { animation: ut-draw .95s cubic-bezier(.65, 0, .35, 1) .08s both; }
  .ut-boot .ut-in   { opacity: 0; animation: ut-in .42s cubic-bezier(.2, .8, .3, 1) both; }
  .ut-boot .ut-in1  { animation-delay: .70s; }
  .ut-boot .ut-in2  { animation-delay: .84s; }
  .ut-boot          { animation: ut-settle .55s ease 1.06s both; }
}

@keyframes ut-draw   { from { stroke-dashoffset: 86; } to { stroke-dashoffset: 0; } }
@keyframes ut-in     { from { opacity: 0; transform: translate(-6px, 0); } to { opacity: 1; transform: none; } }
@keyframes ut-settle { 0%, 100% { filter: none; } 45% { filter: drop-shadow(0 0 8px var(--logo-glow)); } }

/* ---- sync: pulling from an exchange ----------------------------------- */
/* Use this instead of a spinner wherever the app is fetching from a venue. */

.ut-sync .ut-trace {
  fill: none;
  stroke: var(--logo-1);
  stroke-width: 9;
  stroke-dasharray: 15 71;
}

@media (prefers-reduced-motion: no-preference) {
  .ut-sync .ut-trace { animation: ut-trace 1.45s linear infinite; }
  .ut-sync .ut-in    { animation: ut-blink 1.45s ease-in-out infinite; }
  .ut-sync .ut-in2   { animation-delay: .2s; }
}
@media (prefers-reduced-motion: reduce) { .ut-sync .ut-trace { display: none; } }

@keyframes ut-trace { from { stroke-dashoffset: 86; } to { stroke-dashoffset: 0; } }
@keyframes ut-blink { 0%, 100% { opacity: .22; } 38% { opacity: 1; } }

/* The 16-24px cut: one closed stroke, so the travelling light still reads in a
   button. Its path is longer (100.55 units), so the dash values change with it. */
.ut-logo.ut-sm .ut-bowl,
.ut-logo.ut-sm .ut-trace { stroke-dasharray: 102; stroke-width: 10; }
.ut-sm.ut-sync .ut-trace { stroke-dasharray: 20 82; animation-name: ut-trace-sm; }
@keyframes ut-trace-sm { from { stroke-dashoffset: 102; } to { stroke-dashoffset: 0; } }

/* ---- progress: determinate -------------------------------------------- */
/* setLogoProgress(el, 0…1) — the bowl fills along its own stroke, so an
   import needs no second progress bar. */

.ut-prog .ut-bowl { opacity: .16; }
.ut-prog .ut-fill {
  fill: none;
  stroke-width: 9;
  stroke-dasharray: 86;
  stroke-dashoffset: calc(86 - 86 * var(--p, 0));
  transition: stroke-dashoffset .28s var(--ease);
}
@media (prefers-reduced-motion: reduce) { .ut-prog .ut-fill { transition: none; } }

/* ---- live: a position is open ----------------------------------------- */
/* Header mark only, and only while something really is live. */

@media (prefers-reduced-motion: no-preference) {
  .ut-live { animation: ut-pulse 2.6s ease-in-out infinite; transform-origin: 50% 50%; }
}
@keyframes ut-pulse {
  0%, 100% { transform: scale(1);     filter: none; }
  50%      { transform: scale(1.035); filter: drop-shadow(0 0 7px var(--logo-glow)); }
}

/* ---- hover: the nav mark leans into the pointer ----------------------- */

.ut-hover .ut-in { transition: transform .28s cubic-bezier(.2, .8, .3, 1); }
.brand-mark:hover .ut-in1, .lc-brand:hover .ut-in1, .ut-hover:hover .ut-in1 { transform: translate(4px, 0); }
.brand-mark:hover .ut-in2, .lc-brand:hover .ut-in2, .ut-hover:hover .ut-in2 { transform: translate(2px, 0); }
.brand-mark .ut-in, .lc-brand .ut-in { transition: transform .28s cubic-bezier(.2, .8, .3, 1); }
@media (prefers-reduced-motion: reduce) { .ut-logo .ut-in { transition: none; } }

/* ---- in the app ------------------------------------------------------- */
/* The mark is the loading indicator, never a second one beside it. It is in
   the DOM only while the state it belongs to is on, and display:none stops it
   animating, so the U never moves when nothing is happening. */

.sync-btn-busy { display: none; }
.sync-btn.is-syncing .sync-btn-idle { display: none; }
.sync-btn.is-syncing .sync-btn-busy { display: inline-grid; place-items: center; }

/* Inside a button, beside its label. */
.btn .ut-logo { flex: none; }

/* The connect dialog's import note: the mark stands in for the old
   indeterminate bar, and fills for real once the server reports a total. */
.progress-note.is-marked {
  flex-direction: row;
  align-items: center;
  gap: 13px;
}

.progress-mark {
  flex: none;
  display: grid;
  place-items: center;
}