/* SUNDEX p189 — one crisp motion language for product and processing UI. */

:root {
  --sx171-motion-instant: 110ms;
  --sx171-motion-fast: 140ms;
  --sx171-motion-standard: 160ms;
  --sx171-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --sx171-ease-move: cubic-bezier(0.77, 0, 0.175, 1);
}

/* Replace legacy transition-all utilities with bounded, interruptible motion. */
html[data-sx171-motion="ready"] #root main :where(button, a[href], input, select, textarea) {
  transition-property: color, background-color, border-color, opacity, transform, scale !important;
  transition-duration: var(--sx171-motion-fast) !important;
  transition-timing-function: var(--sx171-ease-out) !important;
}

/* Processing shells are fixed geometry. Their contents may crossfade; the shell never moves. */
body.sundex-transaction-system :where(.stx-shell, .stx-head, .stx-progress, .stx-stage) {
  animation: none !important;
  transition: none !important;
}

body.sundex-transaction-system .stx-stage > :first-child {
  backface-visibility: hidden;
  opacity: 1;
  transform: none;
  animation: none !important;
  transition: none !important;
}

body.sundex-transaction-system .stx-stage > :first-child > :first-child {
  backface-visibility: hidden;
  transform-origin: 50% 36%;
}

/* The stage transition owns receipt entry; keep its continuous status motion only. */
body.sundex-transaction-system.sx141-withdrawal-receipt-state .sx141-withdrawal-receipt {
  animation: none !important;
}

body.sundex-transaction-system :where(.stx-vf-screen, .sx123-screen) {
  animation: none !important;
}

body.sundex-transaction-system.sx141-withdrawal-receipt-state .sx141-receipt-status span:not([class*="animate-ping"]) {
  animation: none !important;
}

/* The swap list is small; deferred row painting caused visible late pop-in. */
body.sx149-swap main[aria-label="Swap assets"] .sx149-coin-menu button {
  content-visibility: visible !important;
  contain: paint style !important;
}

/* Progress changes stay on the compositor instead of relaying out the shell. */
body.sundex-transaction-system .stx-progress [style*="scaleX"] {
  will-change: transform;
}

body.sundex-transaction-system :where(.sx110-coin-scroll, .sx156-coin-scroll, .stx-stage-coins, .stx-vf-coin-list) {
  overflow-anchor: none;
  scroll-behavior: auto !important;
}

body.sundex-transaction-system :where(.sx110-coin-scroll, .sx156-coin-scroll, .stx-stage-coins, .stx-vf-coin-list) > button,
body.sundex-transaction-system .sx149-coin-row {
  animation: none !important;
  transition-property: color, background-color, border-color, opacity !important;
  transition-duration: 120ms !important;
  transition-timing-function: var(--sx171-ease-out) !important;
}

/* Immediate tactile acknowledgement without moving page geometry. */
html[data-sx171-motion="ready"] #root main :where(
  .wallet-action,
  .stx-stage button:not(:disabled),
  .sx149-button,
  .sx149-reverse
):active {
  scale: 0.985 !important;
  transition-duration: var(--sx171-motion-instant) !important;
}

html[data-sx171-motion="ready"] #root main :where(button, a[href], input, select, textarea):focus-visible {
  transition-duration: var(--sx171-motion-instant) !important;
}

/* A single restrained loader: static mark, fast constant progress, no breathing scale. */
#sx96-global-loader {
  contain: strict !important;
  animation: sx171-loader-enter 140ms var(--sx171-ease-out) both !important;
}

#sx96-global-loader.sx171-loader-exit {
  pointer-events: none !important;
  animation: sx171-loader-exit 110ms var(--sx171-ease-out) both !important;
}

#sx96-global-loader .sx96-loader-core::before {
  opacity: 0.78 !important;
  transform: translate(-50%, -60%) scale(1) !important;
  animation: none !important;
}

#sx96-global-loader .sx96-loader-track::after {
  animation: sx171-loader-progress 820ms linear infinite !important;
}

@keyframes sx171-loader-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes sx171-loader-exit {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes sx171-loader-progress {
  from { transform: translateX(-115%); }
  to { transform: translateX(345%); }
}

/* Wallet skeleton uses constant velocity, which reads as progress instead of pulsing. */
.wallet-skeleton-block::after,
.wallet-skeleton-actions > i::after {
  opacity: 0.58 !important;
  animation: wallet-skeleton-pass 1.15s linear infinite !important;
}

/* Loading and completion indicators remain continuous and compositor-friendly. */
html[data-sx171-motion="ready"] :where(.animate-spin, .sx149-dialog-spinner i) {
  animation-timing-function: linear !important;
}

html[data-sx171-motion="ready"] :where(button, [role="button"])[aria-busy="true"] {
  cursor: progress !important;
  opacity: 0.78;
}

/* Toasts should acknowledge immediately without animating layout height. */
[data-sonner-toast] {
  transition-property: transform, opacity, box-shadow !important;
  transition-duration: 180ms !important;
  transition-timing-function: var(--sx171-ease-out) !important;
}

@media (hover: hover) and (pointer: fine) {
  html[data-sx171-motion="ready"] #root main :where(.wallet-action, .stx-stage button:not(:disabled)):hover {
    transition-duration: var(--sx171-motion-fast) !important;
  }
}

@media (max-width: 700px) {
  body.sundex-transaction-system .stx-stage > :first-child > :first-child {
    transform: none !important;
  }

  html[data-sx171-motion="ready"] #root main :where(
    .wallet-action,
    .stx-stage button:not(:disabled),
    .sx149-button,
    .sx149-reverse
  ):active {
    scale: 0.99 !important;
  }
}

/* Verification coin selection has exactly one scroll owner. The list flexes
   around network/amount controls without post-paint height measurements. */
body.sundex-transaction-system.sx127-withdraw-layout.sx123-verification-coins .stx-stage.sx123-stage {
  overflow: hidden !important;
}

body.sundex-transaction-system.sx127-withdraw-layout.sx123-verification-coins .sx135-deposit-clone {
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

body.sundex-transaction-system.sx127-withdraw-layout.sx123-verification-coins .sx135-deposit-clone > .sx134-step1-list {
  flex: 1 1 auto !important;
  max-height: none !important;
  clip-path: none !important;
}

body.sundex-transaction-system.sx127-withdraw-layout.sx123-verification-coins .sx135-deposit-clone > :where(.sx132-networks, .sx132-required-amount, .sx132-submit) {
  flex: 0 0 auto !important;
}

@media (prefers-reduced-motion: reduce) {
  #sx96-global-loader,
  .wallet-skeleton-block::after,
  .wallet-skeleton-actions > i::after,
  html[data-sx171-motion="ready"] :where(.animate-spin, .sx149-dialog-spinner i) {
    animation: none !important;
  }

  #sx96-global-loader .sx96-loader-track::after {
    width: 64% !important;
    transform: none !important;
    animation: none !important;
  }

  html[data-sx171-motion="ready"] #root main :where(button, a[href], input, select, textarea) {
    transition-property: color, background-color, border-color, opacity, box-shadow !important;
    transition-duration: 100ms !important;
    transform: none !important;
  }

  body.sundex-transaction-system .stx-progress [style*="scaleX"] {
    transition: none !important;
    will-change: auto;
  }

  body.sundex-transaction-system.sx141-withdrawal-receipt-state .sx141-withdrawal-receipt {
    animation: none !important;
  }

  [data-sonner-toast] {
    transition: opacity 100ms linear !important;
  }
}