/* ==========================================================================
   Binance World Assets  ·  anim.css
   Restrained motion only. Everything here is switched off under
   prefers-reduced-motion: reduce.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TRANSITIONS
   -------------------------------------------------------------------------- */
.btn,
.nav-link,
.chip,
.seg-btn,
.tab,
.input,
.select,
.textarea,
.pos-card,
.choice,
.faq-item,
.modal-close,
.toast-close,
.footer-link,
.nav-toggle {
  transition:
    background-color 120ms linear,
    border-color 120ms linear,
    color 120ms linear,
    opacity 120ms linear;
}

.btn:active { transition-duration: 0ms; }

.odds-fill,
.meter-fill,
.split-seg {
  transition: width 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. ENTRANCES
   -------------------------------------------------------------------------- */
@keyframes bwa-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes bwa-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.modal-backdrop.is-open { animation: bwa-fade-in 140ms linear; }
.modal-backdrop.is-open .modal { animation: bwa-rise 180ms cubic-bezier(0.22, 0.61, 0.36, 1); }

.toast { animation: bwa-rise 180ms cubic-bezier(0.22, 0.61, 0.36, 1); }

.tabpanel.is-active { animation: bwa-fade-in 160ms linear; }

/* --------------------------------------------------------------------------
   3. SKELETON SHIMMER
   -------------------------------------------------------------------------- */
@keyframes bwa-shimmer {
  0%   { opacity: 0.5; }
  50%  { opacity: 1; }
  100% { opacity: 0.5; }
}

.skel { animation: bwa-shimmer 1400ms ease-in-out infinite; }

/* --------------------------------------------------------------------------
   4. PENDING STATE
   -------------------------------------------------------------------------- */
@keyframes bwa-pulse-dot {
  0%   { opacity: 1; }
  50%  { opacity: 0.25; }
  100% { opacity: 1; }
}

.net-badge.is-live .net-dot,
.toast.is-pending .toast-title {
  animation: bwa-pulse-dot 1800ms ease-in-out infinite;
}

/* Value that just changed on chain, flashed once by the chain layer
   adding .is-flash and removing it after the animation ends. */
@keyframes bwa-flash {
  0%   { background-color: rgba(240, 185, 11, 0.22); }
  100% { background-color: transparent; }
}

.is-flash { animation: bwa-flash 700ms linear; }

/* Spinner used inside buttons while a transaction is in flight */
@keyframes bwa-spin {
  to { transform: rotate(360deg); }
}

.spinner {
  display: inline-block;
  width: 11px;
  height: 11px;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: bwa-spin 700ms linear infinite;
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   5. REDUCED MOTION
   -------------------------------------------------------------------------- */
/* --- motion layer ------------------------------------------------------- */
@keyframes bwa-row-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes bwa-live   { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes bwa-breathe{ 0%,100% { opacity: .55; } 50% { opacity: .95; } }

.feed-row.is-entering { animation: bwa-row-in .34s cubic-bezier(.2,.7,.2,1) both; }
.is-live-pulse        { animation: bwa-live 2.2s ease-in-out infinite; }
.motion .deck-card.is-center .deck-glow { animation: bwa-breathe 3.6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  html { scroll-behavior: auto; }

  .btn:active { transform: none; }

  .skel { opacity: 0.75; }

  .spinner {
    border-right-color: currentColor;
    opacity: 0.6;
  }
}