/* ═══════════════════════════════════════════════════════════════
   CoolInvite — All Keyframe Animations
   ═══════════════════════════════════════════════════════════════ */

/* ── Background / Environment ── */
@keyframes auroraShift {
  0%, 100% { background-position: 0% 50%; }
  33%       { background-position: 100% 50%; }
  66%       { background-position: 50% 0%; }
}

@keyframes meshDrift {
  0%   { transform: translate(0, 0) rotate(0deg); }
  33%  { transform: translate(30px, -20px) rotate(2deg); }
  66%  { transform: translate(-20px, 30px) rotate(-1deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/* ── Floating Hearts / Particles ── */
@keyframes floatUp {
  0%   { transform: translateY(0) rotate(0deg) scale(1);    opacity: 0.7; }
  50%  { transform: translateY(-50vh) rotate(180deg) scale(1.1); opacity: 0.5; }
  100% { transform: translateY(-100vh) rotate(360deg) scale(0.8); opacity: 0; }
}

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

@keyframes sparkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50%       { transform: scale(1.4) rotate(90deg); opacity: 0.6; }
}

/* ── UI Entrance Animations ── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

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

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

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

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

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

@keyframes slideOutLeft {
  from { transform: translateX(0);     opacity: 1; }
  to   { transform: translateX(-100%); opacity: 0; }
}

/* ── Button / Card Interactions ── */
@keyframes pulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(56, 189, 248, 0.4); }
  50%       { transform: scale(1.03); box-shadow: 0 0 0 12px rgba(56, 189, 248, 0); }
}

@keyframes pulsePink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(244, 114, 182, 0.5); }
  70%       { box-shadow: 0 0 0 16px rgba(244, 114, 182, 0); }
}

@keyframes growPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

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

@keyframes rubberBand {
  0%   { transform: scale(1); }
  30%  { transform: scaleX(1.25) scaleY(0.75); }
  40%  { transform: scaleX(0.75) scaleY(1.25); }
  50%  { transform: scaleX(1.15) scaleY(0.85); }
  65%  { transform: scaleX(0.95) scaleY(1.05); }
  75%  { transform: scaleX(1.05) scaleY(0.95); }
  100% { transform: scale(1); }
}

/* ── Confetti ── */
@keyframes confettiExplode {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(0.5);
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--tx), var(--ty)) rotate(720deg) scale(1);
    opacity: 0;
  }
}

@keyframes confettiWiggle {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(8deg); }
  75%  { transform: rotate(-8deg); }
  100% { transform: rotate(0deg); }
}

/* ── Coin / Shimmer ── */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

@keyframes coinPop {
  0%   { transform: scale(1);    }
  40%  { transform: scale(1.35); }
  70%  { transform: scale(0.9);  }
  100% { transform: scale(1);    }
}

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

/* ── Progress Bar ── */
@keyframes progressFill {
  from { width: 0%; }
}

@keyframes liquidFill {
  0%   { transform: scaleX(0); transform-origin: left; }
  100% { transform: scaleX(1); transform-origin: left; }
}

/* ── Skeleton Loading ── */
@keyframes skeletonShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Toast ── */
@keyframes toastIn {
  from { opacity: 0; transform: translateY(-12px) 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(-8px) scale(0.95); }
}

/* ── Special: Runaway NO ── */
@keyframes noShake {
  0%, 100% { transform: translateX(0); }
  25%       { transform: translateX(-5px) rotate(-3deg); }
  75%       { transform: translateX(5px) rotate(3deg); }
}

/* ── Logo / Hero ── */
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}

@keyframes heroFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%       { transform: translateY(-16px) rotate(1deg); }
}

/* ── Staggered entrance helpers ── */
.stagger-1 { animation-delay: 0ms !important; }
.stagger-2 { animation-delay: 60ms !important; }
.stagger-3 { animation-delay: 120ms !important; }
.stagger-4 { animation-delay: 180ms !important; }
.stagger-5 { animation-delay: 240ms !important; }
.stagger-6 { animation-delay: 300ms !important; }

/* ── Entrance utility classes ── */
.animate-fadeInUp {
  animation: fadeInUp 0.6s var(--ease-out) both;
}
.animate-fadeIn {
  animation: fadeIn 0.4s var(--ease-out) both;
}
.animate-bounceIn {
  animation: bounceIn 0.6s var(--ease-spring) both;
}
.animate-slideInRight {
  animation: slideInRight 0.4s var(--ease-out) both;
}
.animate-slideInUp {
  animation: slideInUp 0.5s var(--ease-spring) both;
}