/* ══════════════════════════════════════════════
   Animations & Micro-interactions
   ══════════════════════════════════════════════ */

/* ── Fade In ── */
@keyframes fadeIn {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}
.anim-fade-in {
  animation: fadeIn 0.35s ease-out both;
}

/* Stagger helper classes */
.anim-delay-1 { animation-delay: 0.05s; }
.anim-delay-2 { animation-delay: 0.1s; }
.anim-delay-3 { animation-delay: 0.15s; }
.anim-delay-4 { animation-delay: 0.2s; }
.anim-delay-5 { animation-delay: 0.25s; }
.anim-delay-6 { animation-delay: 0.3s; }
.anim-delay-7 { animation-delay: 0.35s; }
.anim-delay-8 { animation-delay: 0.4s; }

/* ── Scale In (for splash) ── */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.6) translateY(15%); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.anim-scale-in {
  animation: scaleIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ── Slide Up ── */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(30%); }
  to   { opacity: 1; transform: translateY(0); }
}
.anim-slide-up {
  animation: slideUp 0.45s ease-out both;
}

/* ── Ball Bounce ── */
@keyframes ballBounce {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.8); }
  70%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.anim-ball-bounce {
  animation: ballBounce 0.35s ease-out;
}

/* ── Ball Pop (selection) ── */
@keyframes ballPop {
  0%   { transform: scale(0.5); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1.05); opacity: 1; }
}
.anim-ball-pop {
  animation: ballPop 0.3s ease-out forwards;
}

/* ── Pulse Glow (jackpot) ── */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 20px -2px rgba(249,199,79,0.15); }
  50%      { box-shadow: 0 0 30px 0px rgba(249,199,79,0.25); }
}
.anim-pulse-glow {
  animation: pulseGlow 2.5s ease-in-out infinite;
}

/* ── Text Shimmer ── */
@keyframes textShimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.anim-text-shimmer {
  background: linear-gradient(90deg, #F9C74F 0%, #FFDE7A 25%, #F9C74F 50%, #D4A730 75%, #F9C74F 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: textShimmer 3s linear infinite;
}

/* ── Loading Dots (splash) ── */
@keyframes dotPulse {
  0%, 100% { transform: scale(0.6); opacity: 0.4; }
  50%      { transform: scale(1); opacity: 1; }
}
.splash__dot:nth-child(1) { animation: dotPulse 1.2s ease-in-out infinite; }
.splash__dot:nth-child(2) { animation: dotPulse 1.2s ease-in-out infinite 0.2s; }
.splash__dot:nth-child(3) { animation: dotPulse 1.2s ease-in-out infinite 0.4s; }

/* ── Spin (loading) ── */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.anim-spin {
  animation: spin 1s linear infinite;
}

/* ── Number flip ── */
@keyframes flipDown {
  0%   { transform: rotateX(-90deg); opacity: 0; }
  100% { transform: rotateX(0deg); opacity: 1; }
}
.anim-flip {
  animation: flipDown 0.4s ease-out;
}

/* ── Shake (error) ── */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
.anim-shake {
  animation: shake 0.4s ease-out;
}

/* ── Cart slide up ── */
@keyframes slideUpCart {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.anim-cart-in {
  animation: slideUpCart 0.35s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

/* ── Toast ── */
@keyframes toastIn {
  from { opacity: 0; transform: translateY(-20px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(-20px) scale(0.95); }
}
.toast {
  position: fixed;
  top: calc(16px + env(safe-area-inset-top, 0px));
  left: 16px;
  right: 16px;
  padding: 14px 20px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  z-index: 2000;
  animation: toastIn 0.3s ease-out;
  display: flex;
  align-items: center;
  gap: 10px;
}
.toast--success { background: rgba(45,198,83,0.95); color: #fff; }
.toast--error   { background: rgba(255,71,87,0.95); color: #fff; }
.toast--info    { background: rgba(67,97,238,0.95); color: #fff; }
.toast.removing { animation: toastOut 0.3s ease-in forwards; }