/* Touch-only анимации + живой фон */

body.app-intro .app {
  filter: brightness(0.88);
}
body.app-ready .app {
  transition: filter 0.9s ease;
  filter: brightness(1);
}

.platform-bg::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: linear-gradient(
    45deg,
    #020208 0%,
    #0a0518 22%,
    #1a0a32 48%,
    #0a0518 78%,
    #020208 100%
  );
  background-size: 400% 400%;
  animation: bgGradientShift 16s ease infinite;
  opacity: 0.92;
  z-index: 0;
}
.platform-bg__grid,
.platform-bg__orb,
#particles-canvas,
.platform-bg__glow {
  z-index: 1;
}

@keyframes bgGradientShift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes introFadeUp {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes btnPopIn {
  from {
    opacity: 0;
    transform: scale(0.85) rotate(-2deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

@keyframes tradeBreathe {
  0%,
  100% {
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.25), var(--neon);
  }
  50% {
    box-shadow: 0 10px 32px rgba(168, 85, 247, 0.55), 0 0 24px rgba(139, 92, 246, 0.7);
  }
}

@keyframes pairPulse {
  0%,
  100% {
    box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.2);
  }
  50% {
    box-shadow: inset 0 0 0 1px rgba(168, 85, 247, 0.45), 0 0 14px rgba(139, 92, 246, 0.35);
  }
}

@keyframes uiFlashIn {
  0% {
    box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.8);
  }
  100% {
    box-shadow: 0 0 20px 4px rgba(168, 85, 247, 0);
  }
}

@keyframes rippleExpand {
  to {
    transform: scale(2.5);
    opacity: 0;
  }
}

@keyframes priceBump {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
  }
}

/* Stagger появление */
body.app-intro .intro-block {
  opacity: 0;
}
body.app-ready .intro-topbar {
  animation: introFadeUp 0.45s ease forwards;
  animation-delay: 0.05s;
}
body.app-ready .intro-pairs {
  animation: introFadeUp 0.45s ease forwards;
  animation-delay: 0.12s;
}
body.app-ready .intro-chart {
  animation: introFadeUp 0.5s ease forwards;
  animation-delay: 0.2s;
}
body.app-ready .intro-dock {
  animation: introFadeUp 0.5s ease forwards;
  animation-delay: 0.32s;
}
body.app-ready .intro-nav {
  animation: introFadeOnly 0.45s ease forwards;
  animation-delay: 0.42s;
}

@keyframes introFadeOnly {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

body.app-ready .duration-btn,
body.app-ready .quick-stakes button {
  animation: btnPopIn 0.35s ease backwards;
}
/* Дыхание UP/DOWN */
body.app-ready .trade-btn.up,
body.app-ready .trade-btn.down {
  animation: btnPopIn 0.4s ease backwards 0.38s, tradeBreathe 3s ease-in-out 1.5s infinite;
}

.pairs-scroll {
  animation: pairPulse 4s ease-in-out infinite;
}

/* Touch ripple */
button,
.pair-btn,
.balance-card {
  position: relative;
  overflow: hidden;
}
.ui-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(124, 58, 237, 0.45);
  transform: scale(0);
  animation: rippleExpand 0.55s ease-out forwards;
  pointer-events: none;
  z-index: 2;
}

.touch-ui button.ui-touch-active:not(.trade-btn--loading),
.touch-ui .pair-btn.ui-touch-active,
.touch-ui .balance-card.ui-touch-active {
  transform: scale(0.94);
  transition: transform 80ms ease, background 80ms ease, box-shadow 80ms ease;
}

.touch-ui .duration-btn.ui-touch-active,
.touch-ui .quick-stakes button.ui-touch-active {
  background: #7c3aed !important;
  color: #fff !important;
}

.trade-btn--touch-flash {
  filter: brightness(1.25);
  box-shadow: 0 0 28px rgba(168, 85, 247, 0.9) !important;
}

.ui-flash-in {
  animation: uiFlashIn 0.35s ease;
}

.live-price.price-up {
  color: var(--success) !important;
  animation: priceBump 0.4s ease;
}
.live-price.price-down {
  color: var(--error) !important;
  animation: priceBump 0.4s ease;
}

/* Без hover на touch */
.touch-ui .pair-btn:hover::after,
.touch-ui .pair-btn--hover-chart::after {
  opacity: 0 !important;
}
.touch-ui .pair-btn__mini-chart {
  display: none !important;
}

/* Обрезка кнопок сделок */
.trade-dock {
  overflow: visible;
}
.trade-actions {
  overflow: visible;
  padding-bottom: 4px;
}
.trade-btn-wrap {
  overflow: visible;
  min-height: 46px;
  display: flex;
  align-items: stretch;
}
.trade-btn {
  overflow: hidden;
  flex: 1;
}

@media (prefers-reduced-motion: reduce) {
  .brand-mark,
  .platform-bg__orb {
    animation: none;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .platform-bg::before {
    animation: none;
  }
  #particles-canvas,
  .menu-particles-canvas {
    display: none;
  }
}