/* =========================================================
   Vadim Crypto — Animations & Keyframes
   ========================================================= */

/* ====== Page transitions between tabs ====== */
.tab-content {
  animation: tabFadeIn var(--dur-page) var(--ease-decelerate) both;
}
@keyframes tabFadeIn {
  from { opacity: 0; transform: translateY(8px) scale(0.995); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ====== Aurora background drift on hero ====== */
@keyframes auroraDrift {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0.85; }
  50%  { transform: translate3d(-6%, 4%, 0) rotate(8deg); opacity: 1; }
  100% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0.85; }
}
@keyframes auroraDrift2 {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0.6; }
  50%  { transform: translate3d(8%, -4%, 0) rotate(-6deg); opacity: 0.9; }
  100% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0.6; }
}

/* ====== Shimmer for premium CTA ====== */
@keyframes shimmerSweep {
  0%   { transform: translateX(-130%) skewX(-18deg); }
  100% { transform: translateX(230%) skewX(-18deg); }
}

/* ====== Pulse glow for success ====== */
@keyframes pulseGlowGreen {
  0%, 100% { box-shadow: 0 0 0 0 rgba(40, 240, 160, 0.5), 0 8px 24px -8px rgba(40,240,160,0.3); }
  50%      { box-shadow: 0 0 0 14px rgba(40, 240, 160, 0), 0 8px 24px -8px rgba(40,240,160,0.5); }
}

/* ====== Ticker digit roll ====== */
@keyframes digitRoll {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ====== Spinner ====== */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ====== Skeleton shimmer ====== */
@keyframes skelShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skel {
  background: linear-gradient(
    90deg,
    rgba(168, 145, 255, 0.06) 0%,
    rgba(168, 145, 255, 0.18) 50%,
    rgba(168, 145, 255, 0.06) 100%
  );
  background-size: 200% 100%;
  animation: skelShimmer 1.4s infinite linear;
  border-radius: var(--r-2);
}

/* ====== Float for badge ====== */
@keyframes floatBadge {
  0%, 100% { transform: translateY(0) rotateY(0deg); }
  50%      { transform: translateY(-6px) rotateY(8deg); }
}

/* ====== Reveal on intersection ====== */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-slow) var(--ease-decelerate),
              transform var(--dur-slow) var(--ease-decelerate);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
/* FIX #2 (CSS-фоллбэк): при reduced-motion (и как страховка) НЕ прячем контент.
   В Telegram iOS WebView IntersectionObserver часто не срабатывает для off-screen
   карточек → они навсегда остаются opacity:0. JS-таймер armReveal() добавит .in
   всем оставшимся через ~500мс; этот media-блок — второй пояс безопасности. */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Stagger via delays */
.reveal[data-delay="1"] { transition-delay: 60ms; }
.reveal[data-delay="2"] { transition-delay: 120ms; }
.reveal[data-delay="3"] { transition-delay: 180ms; }
.reveal[data-delay="4"] { transition-delay: 240ms; }
.reveal[data-delay="5"] { transition-delay: 300ms; }
.reveal[data-delay="6"] { transition-delay: 360ms; }

/* ====== Hover lift (no hover on touch, but desktop preview) ====== */
@media (hover: hover) {
  .lift { transition: transform var(--dur-base) var(--ease-standard),
                       box-shadow var(--dur-base) var(--ease-standard); }
  .lift:hover { transform: translateY(-3px); box-shadow: var(--sh-3); }
}

/* ====== Press feedback ====== */
.press { transition: transform var(--dur-fast) var(--ease-standard); }
.press:active { transform: scale(0.97); }

/* ====== Slide-in for steps ====== */
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}
.step-enter { animation: slideInRight 380ms var(--ease-decelerate) both; }

/* ====== Bottom sheet slide ====== */
@keyframes sheetUp {
  from { transform: translateY(110%); }
  to   { transform: translateY(0); }
}

/* ====== Copy success ====== */
@keyframes copyPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.copied { animation: copyPop 360ms var(--ease-spring); }

/* ====== Tab pill morph ====== */
.tabbar-indicator {
  transition: transform 360ms var(--ease-spring),
              width 360ms var(--ease-spring);
}

/* ====== Stair tilt for ladder ====== */
@keyframes stairRise {
  from { opacity: 0; transform: translateX(-12px) rotateZ(-1deg); }
  to   { opacity: 1; transform: translateX(0) rotateZ(0deg); }
}
.stair { animation: stairRise 420ms var(--ease-decelerate) both; }
.stair[data-idx="0"] { animation-delay: 40ms; }
.stair[data-idx="1"] { animation-delay: 110ms; }
.stair[data-idx="2"] { animation-delay: 180ms; }
.stair[data-idx="3"] { animation-delay: 250ms; }
.stair[data-idx="4"] { animation-delay: 320ms; }

/* ====== Toast pop ====== */
@keyframes toastPop {
  from { opacity: 0; transform: translate(-50%, 12px) scale(0.96); }
  to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

/* ====== Number count-up assist (CSS-only count placeholder) ====== */
.count-up { font-variant-numeric: tabular-nums; }

/* ====== Hero rate ticker each char ====== */
.rate-digit { display: inline-block; will-change: transform; }
.rate-digit.flip { animation: digitRoll 320ms var(--ease-decelerate) both; }

/* ====== Status badge breathing for active orders ====== */
@keyframes breathe {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}
.status-breath { animation: breathe 2.4s ease-in-out infinite; }

/* ═══════════════════════════════════════════════════════════
   WOW-апгрейд 02.06.2026 — premium-детали (luxury/refined)
   ═══════════════════════════════════════════════════════════ */

/* Дышащий конический бордер премиум-CTA «Продать USDT» */
@keyframes auraSpin { to { transform: rotate(1turn); } }

/* Trust-пилюли безопасности — каскадное появление */
@keyframes trustPop {
  0%   { opacity: 0; transform: translateY(7px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Замок фиксации курса — мягкий пульс */
@keyframes lockPulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.12); }
}

/* Конфетти на успешной заявке (золото + мята) */
@keyframes confettiFall {
  0%   { transform: translate3d(0, -8px, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate3d(var(--cx, 0px), var(--cy, 130px), 0) rotate(var(--cr, 540deg)); opacity: 0; }
}

/* Направленные переходы вкладок (нативный свайп-фил) */
.tab-content.slide-l { animation: slideInLeft 320ms var(--ease-decelerate) both; }
.tab-content.slide-r { animation: slideInRight 320ms var(--ease-decelerate) both; }

/* Reduced-motion: гасим декоративную анимацию, контент остаётся */
@media (prefers-reduced-motion: reduce) {
  .btn-aura::before { animation: none !important; }
  .confetti-piece { display: none !important; }
  .tab-content.slide-l, .tab-content.slide-r { animation: none !important; }
}