/* ============================================================
   CryptoX — Animations & Keyframes
   ============================================================ */

/* ─── Keyframes ─────────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

@keyframes glow {
  0%, 100% { box-shadow: 0 0 8px rgba(107,78,255,0.3); }
  50%       { box-shadow: 0 0 20px rgba(107,78,255,0.7); }
}

@keyframes glow-gold {
  0%, 100% { box-shadow: 0 0 8px rgba(245,158,11,0.3); }
  50%       { box-shadow: 0 0 24px rgba(245,158,11,0.7); }
}

@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes ripple {
  from { transform: scale(0); opacity: 1; }
  to   { transform: scale(4); opacity: 0; }
}

@keyframes bounceIn {
  0%   { transform: scale(0.3); opacity: 0; }
  50%  { transform: scale(1.05); }
  70%  { transform: scale(0.9); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes priceFlashUp {
  0%, 100% { color: inherit; background: transparent; }
  50%       { color: var(--color-green); background: rgba(34,197,94,0.1); }
}

@keyframes priceFlashDown {
  0%, 100% { color: inherit; background: transparent; }
  50%       { color: var(--color-red); background: rgba(239,68,68,0.1); }
}

@keyframes countUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes rotate360 {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ─── Animation Classes ─────────────────────────────────────── */
.animate-fadeIn        { animation: fadeIn 0.4s ease forwards; }
.animate-fadeInUp      { animation: fadeInUp 0.5s ease forwards; }
.animate-fadeInDown    { animation: fadeInDown 0.5s ease forwards; }
.animate-slideInUp     { animation: slideInUp 0.4s ease forwards; }
.animate-slideInLeft   { animation: slideInLeft 0.4s ease forwards; }
.animate-slideInRight  { animation: slideInRight 0.4s ease forwards; }
.animate-spin          { animation: spin 1s linear infinite; }
.animate-pulse         { animation: pulse 2s ease-in-out infinite; }
.animate-glow          { animation: glow 2.5s ease-in-out infinite; }
.animate-float         { animation: float 4s ease-in-out infinite; }
.animate-shimmer       { animation: shimmer 2s ease-in-out infinite; }

/* Stagger delays */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }

/* Opacity for delayed elements */
.animate-fadeInUp,
.animate-fadeInDown,
.animate-slideInUp { opacity: 0; }

/* ─── Price Flash ────────────────────────────────────────────── */
.price-flash-up   { animation: priceFlashUp 0.6s ease; border-radius: 4px; }
.price-flash-down { animation: priceFlashDown 0.6s ease; border-radius: 4px; }

/* ─── Ticker ─────────────────────────────────────────────────── */
.ticker-wrapper {
  overflow: hidden;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  height: 36px;
  display: flex;
  align-items: center;
}

.ticker-track {
  display: inline-flex;
  gap: 48px;
  animation: ticker 40s linear infinite;
}

.ticker-track:hover { animation-play-state: paused; }

.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.ticker-sym  { color: var(--text-primary); }
.ticker-price { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.ticker-up   { color: var(--color-green); }
.ticker-down { color: var(--color-red); }
.ticker-dot  { width: 4px; height: 4px; border-radius: 50%; background: var(--border); }

/* ─── Glow Border ────────────────────────────────────────────── */
.glow-border {
  position: relative;
}

.glow-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: var(--gradient-main);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: xor;
  -webkit-mask-composite: xor;
  animation: gradient-shift 4s ease infinite;
  background-size: 200% 200%;
}

/* ─── Number Counter ────────────────────────────────────────── */
.counter-number { display: inline-block; overflow: hidden; }

/* ─── Hover Lift ────────────────────────────────────────────── */
.hover-lift {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* ─── Active Press ──────────────────────────────────────────── */
.press:active {
  transform: scale(0.97) !important;
  transition: transform 0.1s ease !important;
}

/* ─── Loading Spinner ───────────────────────────────────────── */
.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--color-brand);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.spinner.lg  { width: 36px; height: 36px; border-width: 3px; }
.spinner.xl  { width: 56px; height: 56px; border-width: 4px; }

/* ─── Page Loading Overlay ──────────────────────────────────── */
.page-loader {
  position: fixed;
  inset: 0;
  background: var(--bg-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  z-index: 9999;
  transition: opacity 0.4s ease;
}

.page-loader.done {
  opacity: 0;
  pointer-events: none;
}

.page-loader .logo-icon {
  width: 64px;
  height: 64px;
  font-size: 24px;
  animation: glow 2s ease-in-out infinite;
}

/* ─── Ripple Effect ─────────────────────────────────────────── */
.btn-ripple {
  position: relative;
  overflow: hidden;
}

.btn-ripple .ripple-wave {
  position: absolute;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  background: rgba(255,255,255,0.4);
  transform: scale(0);
  animation: ripple 0.6s linear;
  pointer-events: none;
}

/* ─── Particles BG (landing) ────────────────────────────────── */
.particle-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.particle-bg::before, .particle-bg::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.15;
}

.particle-bg::before {
  width: 500px;
  height: 500px;
  background: var(--color-brand);
  top: -100px;
  right: -100px;
  animation: float 8s ease-in-out infinite;
}

.particle-bg::after {
  width: 400px;
  height: 400px;
  background: var(--color-gold);
  bottom: -100px;
  left: -100px;
  animation: float 10s ease-in-out infinite reverse;
}