@view-transition {
  navigation: auto;
}

/* Opacity only: chart coordinates and price-label positioning stay untouched. */
::view-transition-group(root),
::view-transition-group(pulse-exchanges),
::view-transition-group(pulse-brand) {
  animation-duration: 200ms;
  animation-timing-function: cubic-bezier(.22, .61, .36, 1);
}
::view-transition-old(root) {
  animation: exchange-surface-out 160ms ease-out both;
}
::view-transition-new(root) {
  animation: exchange-surface-in 200ms ease-out both;
}
.exchangeControls {
  view-transition-name: pulse-exchanges;
}
main > header .brand {
  view-transition-name: pulse-brand;
}
html[data-exchange-entering] main {
  animation: exchange-fallback-in 200ms ease-out both;
}
.exchangeControl {
  position: relative;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.exchangeControl[aria-busy='true'] {
  border-color: var(--gold);
}
.exchangeControl[aria-busy='true']::after {
  content: '';
  position: absolute;
  inset: auto 12% 1px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform-origin: center;
  animation: exchange-connecting 900ms ease-in-out infinite;
}
.exchangeTransitionStatus {
  --exchange-accent: var(--gold, #dfbd75);
  position: fixed;
  z-index: 100;
  inset: auto 16px max(16px, env(safe-area-inset-bottom)) auto;
  max-width: calc(100vw - 32px);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  color: var(--text, #eee);
  background: #111a17;
  border: 1px solid #3c493f;
  border-radius: 10px;
  font-size: 11px;
  pointer-events: none;
  animation: exchange-fallback-in 160ms ease-out both;
}
.exchangeTransitionStatus[data-exchange='mexc-live'] {
  --exchange-accent: #69a8ff;
}
.exchangeTransitionStatus::before {
  content: '';
  flex: 0 0 10px;
  height: 10px;
  border: 1.5px solid #617066;
  border-top-color: var(--exchange-accent);
  border-radius: 50%;
  animation: exchange-indicator 850ms linear infinite;
}
@keyframes exchange-surface-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes exchange-surface-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes exchange-fallback-in { from { opacity: .75; } to { opacity: 1; } }
@keyframes exchange-connecting {
  0%, 100% { opacity: .4; transform: scaleX(.4); }
  50% { opacity: 1; transform: scaleX(1); }
}
@keyframes exchange-indicator { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html[data-exchange-entering] main,
  .exchangeTransitionStatus,
  .exchangeTransitionStatus::before,
  .exchangeControl[aria-busy='true']::after {
    animation: none;
  }
  .exchangeControl { transition: none; }
}