/* DAFA CAMBIO V9.9 — business-grade micro-interactions. Only visual changes. */
:root { --dafa-ease: cubic-bezier(.22,1,.36,1); }
/* Tab highlight glides to the actual width of active option; JS measures sizes. */
.motion-tabs { position:relative; isolation:isolate; }
.motion-tabs::before {
  content:""; position:absolute; pointer-events:none; z-index:0;
  left:var(--motion-x,4px); top:var(--motion-y,4px);
  width:var(--motion-w,0px); height:var(--motion-h,30px);
  border-radius:9px; background:linear-gradient(120deg,#dbfa95 0%,#c9f66b 80%);
  box-shadow:0 2px 10px rgba(201,246,107,.12);
  opacity:0; transition:left 300ms var(--dafa-ease),top 300ms var(--dafa-ease),width 300ms var(--dafa-ease),height 300ms var(--dafa-ease),opacity 200ms ease;
}
.motion-tabs.motion-ready::before {opacity:1}
.motion-tabs > button {
  position:relative; z-index:1; background:transparent!important;
  transition:color 240ms ease,transform 190ms var(--dafa-ease)!important;
}
.motion-tabs > button.active {color:#142817!important}
.motion-tabs > button:active {transform:scale(.965)}
/* The selected channel card remains restrained, not a bouncing arcade button. */
.method {transition:transform 240ms var(--dafa-ease), border-color 230ms ease,box-shadow 230ms ease!important}
.method:active {transform:scale(.993)}
.refresh,.primary,.ghost,.calc-swap,.quick button {
 transition:background-color 200ms ease,border-color 200ms ease,box-shadow 200ms ease,transform 190ms var(--dafa-ease),filter 190ms ease;
}
.primary:active,.ghost:active,.refresh:active,.quick button:active,.calc-swap:active {transform:scale(.975)}
/* Reversible calculator: input and output gently reveal new direction after JS math. */
.calc-swap {display:inline-flex;align-items:center;justify-content:center;gap:8px}
.swap-symbol {display:inline-block;min-width:19px;text-align:center;font-size:17px;line-height:1;
 transform:rotate(0deg);transition:transform 340ms var(--dafa-ease);backface-visibility:hidden}
.calc-swap.is-reversed .swap-symbol{transform:rotate(180deg)}
/* V9.9.4 silent business-grade animation: calculator reverses with clearly visible
   focus zoom, comparable to the selected USD/USDT tab's subtle pop. */
@keyframes dafa-calc-swap {
  0% {opacity:.70;transform:translate3d(0,5px,0) scale(.982)}
  48% {opacity:1;transform:translate3d(0,-2px,0) scale(1.078)}
  72% {transform:translate3d(0,-1px,0) scale(1.024)}
  100% {opacity:1;transform:translate3d(0,0,0) scale(1)}
}
@keyframes dafa-calc-focus {
  0% {transform:scale(.975);box-shadow:0 0 0 rgba(201,246,107,0)}
  48% {transform:scale(1.08);box-shadow:0 0 25px rgba(201,246,107,.15)}
  100% {transform:scale(1);box-shadow:0 0 0 rgba(201,246,107,0)}
}
@keyframes dafa-swap-tap {
  0% {transform:scale(.97)}
  50% {transform:scale(1.085)}
  100% {transform:scale(1)}
}
@keyframes dafa-tab-zoom {
  0% { transform:scale(.97); }
  55% { transform:scale(1.065); }
  100% { transform:scale(1); }
}
.motion-tabs > button.motion-tap-zoom {
  animation:dafa-tab-zoom 340ms var(--dafa-ease) both;
  transform-origin:center center;
  will-change:transform;
}
.calc-just-reversed #calcFlow,
.calc-just-reversed .numberfield,
.calc-just-reversed .result,
.calc-just-reversed #calcRate,
.calc-just-reversed #calcHint {
  animation:dafa-calc-swap 490ms var(--dafa-ease) both;
  transform-origin:center center;
  will-change:transform,opacity;
}
.calc-just-reversed .result {
  animation-name:dafa-calc-focus;
  animation-duration:510ms;
  animation-delay:45ms;
  transform-origin:center center;
}
.calc-just-reversed #calcHint{animation-delay:70ms}
.calc-just-reversed .calc-swap {
  animation:dafa-swap-tap 490ms var(--dafa-ease) both;
  transform-origin:center;
}
.calc-swap-actions{display:flex;justify-content:flex-end;align-items:center;min-width:0}
.calc-swap-actions .calc-swap{min-height:43px;padding:10px 18px}
/* Animate only real text changes. No simulated prices or fake rolling numbers. */
@keyframes dafa-quote-update {
  0% { opacity:.68;transform:translate3d(0,4px,0) scale(.988); filter:brightness(1.09); }
  55% { opacity:1;transform:translate3d(0,-1px,0) scale(1.025);filter:brightness(1.08); }
  100% { opacity:1;transform:translate3d(0,0,0) scale(1);filter:brightness(1); }
}
.dafa-price-changed {animation:dafa-quote-update 330ms var(--dafa-ease) both;transform-origin:center left}
/* Mobile zoom is intentionally slightly smaller to avoid adjacent overlap. */
@media(max-width:650px) {
 @keyframes dafa-calc-swap {
  0% {opacity:.72;transform:translateY(4px) scale(.985)}
  48% {opacity:1;transform:translateY(-1px) scale(1.058)}
  72% {transform:translateY(0) scale(1.015)}
  100% {opacity:1;transform:translateY(0) scale(1)}
 }
 @keyframes dafa-calc-focus {
  0% {transform:scale(.986);box-shadow:0 0 0 rgba(201,246,107,0)}
  48% {transform:scale(1.06);box-shadow:0 0 20px rgba(201,246,107,.14)}
  100% {transform:scale(1);box-shadow:0 0 0 rgba(201,246,107,0)}
 }
 .motion-tabs>button.motion-tap-zoom {animation-duration:310ms}
 .calc-direction {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:9px;padding:11px}
 .calc-flow {display:flex;flex-basis:100%;min-width:0;align-items:baseline;justify-content:space-between;gap:8px}
 .calc-flow strong{font-size:15px;white-space:nowrap}
 .calc-swap-actions{display:flex;min-width:0;width:100%;justify-content:flex-end}
 .calc-swap-actions .calc-swap{min-height:43px;width:100%;flex:1;white-space:nowrap}
}
@media(max-width:355px){.calc-direction{gap:7px;padding:9px}.calc-flow strong{font-size:14px}.calc-swap{padding:9px 8px}}
/* UX accessibility / battery */
@media (prefers-reduced-motion: reduce) {
 .motion-tabs::before,.motion-tabs>button,.method,.refresh,.primary,.ghost,.calc-swap,.quick button,.swap-symbol{transition:none!important;animation:none!important}
 .calc-just-reversed #calcFlow,.calc-just-reversed .numberfield,.calc-just-reversed .result,
 .calc-just-reversed #calcRate,.calc-just-reversed #calcHint,.calc-just-reversed .calc-swap,.dafa-price-changed,.motion-tabs>button.motion-tap-zoom{animation:none!important;filter:none!important;transform:none!important;will-change:auto!important;box-shadow:none!important}
}