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

:root {
  --sx171-motion-instant: 110ms;
  --sx171-motion-fast: 140ms;
  --sx171-motion-standard: 180ms;
  --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, box-shadow, transform !important;
  transition-duration: var(--sx171-motion-fast) !important;
  transition-timing-function: var(--sx171-ease-out) !important;
}

html[data-sx171-motion="ready"] #root main :where(input, select, textarea) {
  transform: translateZ(0);
}

/* 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 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

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

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 {
  transform: scale(0.985) translateZ(0) !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;
}

@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 {
    transform: scale(0.99) !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;
  }
}