/* ============================================================
   BSL Driver Hub — Animations
   Dopamine moments. Use sparingly — every animation is a small
   reward, not decoration.
   ============================================================ */

/* --- Money count-up --- */
@keyframes money-pop {
  0%   { transform: scale(1);   color: var(--c-bun); }
  40%  { transform: scale(1.18); color: var(--c-lettuce); text-shadow: 0 0 24px rgba(87,148,59,0.5); }
  100% { transform: scale(1);   color: var(--c-bun); }
}
.money-pop { animation: money-pop 700ms cubic-bezier(.2,1.6,.5,1); }

/* --- Tier unlock — full-screen takeover --- */
.tier-celebration {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at center, rgba(248,160,31,0.95) 0%, rgba(200,16,46,0.95) 70%, rgba(10,10,10,0.95) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: tier-in 350ms cubic-bezier(.2,.8,.2,1);
  color: var(--c-cream);
  text-align: center;
  padding: 40px 20px;
}
.tier-celebration .crown { font-size: 90px; animation: bounce-in 600ms cubic-bezier(.2,1.6,.5,1); margin-bottom: 12px; }
.tier-celebration h1 {
  font-family: 'Poppins';
  font-size: 36px;
  color: var(--c-cream);
  margin: 0 0 8px;
  text-shadow: 0 4px 20px rgba(0,0,0,0.4);
  animation: slide-up 500ms 200ms backwards;
}
.tier-celebration .amount {
  font-family: 'Poppins';
  font-weight: 800;
  font-size: 80px;
  color: var(--c-gold);
  text-shadow: 0 6px 24px rgba(0,0,0,0.5);
  margin: 12px 0;
  animation: bounce-in 700ms 300ms backwards;
  line-height: 1;
}
.tier-celebration .sub {
  font-size: 18px;
  opacity: 0.9;
  animation: slide-up 500ms 500ms backwards;
}
.tier-celebration .dismiss {
  margin-top: 28px;
  background: var(--c-cream);
  color: var(--c-black);
  border: none;
  padding: 14px 32px;
  border-radius: 30px;
  font-family: 'Poppins';
  font-weight: 700;
  font-size: 16px;
  animation: slide-up 500ms 700ms backwards;
}

@keyframes tier-in { from { opacity: 0; backdrop-filter: blur(0); } to { opacity: 1; backdrop-filter: blur(8px); } }
@keyframes bounce-in { 0% { transform: scale(0); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes slide-up { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* --- Confetti dots --- */
.confetti {
  position: fixed;
  pointer-events: none;
  inset: 0;
  z-index: 999;
  overflow: hidden;
}
.confetti span {
  position: absolute;
  top: -20px;
  width: 10px;
  height: 14px;
  border-radius: 2px;
  animation: confetti-fall 2.5s linear forwards;
}
@keyframes confetti-fall {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* --- Earnings card pulse on update --- */
@keyframes earnings-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(248, 160, 31, 0.6); }
  70%  { box-shadow: 0 0 0 22px rgba(248, 160, 31, 0); }
  100% { box-shadow: 0 0 0 0 rgba(248, 160, 31, 0); }
}
.earnings-pulse { animation: earnings-pulse 900ms ease-out; }

/* --- Bonus bar fill animation --- */
.bonus-bar-fill {
  position: relative;
  overflow: hidden;
}
.bonus-bar-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.45) 50%, transparent 100%);
  animation: shimmer 2.4s infinite;
}
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* --- Live shift heartbeat --- */
@keyframes heartbeat {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.4); opacity: 0.5; }
}
.live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-lettuce);
  animation: heartbeat 1.4s infinite;
  margin-right: 6px;
}

/* --- Skeleton loaders --- */
.skel {
  background: linear-gradient(90deg, var(--c-line) 0%, var(--c-cream) 50%, var(--c-line) 100%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s infinite;
  border-radius: var(--r-sm);
  display: inline-block;
}
@keyframes skel-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* --- Toast slide --- */
@keyframes toast-slide-in { from { transform: translateY(20px) scale(0.94); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
.toast { animation: toast-slide-in 240ms cubic-bezier(.2,.8,.2,1); }

/* --- FAB pulse --- */
@keyframes fab-pulse-ring {
  0%   { transform: scale(0.85); opacity: 0.7; }
  100% { transform: scale(1.6); opacity: 0; }
}
.fab-ring::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid var(--c-bun);
  animation: fab-pulse-ring 1.6s ease-out infinite;
}

/* --- Number count animation (uses CSS counters via JS-set --target) --- */
.count-up {
  display: inline-block;
  transition: transform 250ms ease;
}
.count-up.bumped { transform: translateY(-3px); }

/* --- Disabled motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}