/* ================================
   ANIMATIONS.CSS — Keyframes & Motion
   ================================ */

/* --- Splash screen --- */
@keyframes splash-bounce {
  0%   { transform: translateY(0) scale(1); }
  40%  { transform: translateY(-18px) scale(1.1); }
  60%  { transform: translateY(-8px) scale(1.05); }
  80%  { transform: translateY(-14px) scale(1.08); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes dot-pulse {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40%            { transform: scale(1);   opacity: 1; }
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slide-in-left {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes pop-in {
  0%   { opacity: 0; transform: scale(0.7); }
  70%  { transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  20%       { transform: rotate(-10deg); }
  40%       { transform: rotate(10deg); }
  60%       { transform: rotate(-6deg); }
  80%       { transform: rotate(6deg); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX(6px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}

@keyframes confetti-fall {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(80px) rotate(360deg); opacity: 0; }
}

@keyframes ring-fill {
  from { stroke-dashoffset: var(--ring-length); }
  to   { stroke-dashoffset: var(--ring-offset); }
}

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

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

@keyframes bounce-in {
  0%   { opacity: 0; transform: scale(0.3) translateY(20px); }
  50%  { transform: scale(1.05) translateY(-5px); }
  70%  { transform: scale(0.97) translateY(2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes celebration {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.3) rotate(-5deg); }
  50%  { transform: scale(1.2) rotate(5deg); }
  75%  { transform: scale(1.15) rotate(-3deg); }
  100% { transform: scale(1) rotate(0); }
}

/* --- Utility animation classes --- */
.anim-fade-in    { animation: fade-in    var(--t-normal) var(--ease-out) both; }
.anim-fade-in-up { animation: fade-in-up var(--t-normal) var(--ease-out) both; }
.anim-pop-in     { animation: pop-in     var(--t-slow)   var(--ease-bounce) both; }
.anim-slide-right{ animation: slide-in-right var(--t-normal) var(--ease-out) both; }
.anim-wiggle     { animation: wiggle 0.6s var(--ease-out); }
.anim-bounce-in  { animation: bounce-in var(--t-slow) var(--ease-bounce) both; }

/* Stagger helpers */
.anim-delay-1 { animation-delay: 80ms; }
.anim-delay-2 { animation-delay: 160ms; }
.anim-delay-3 { animation-delay: 240ms; }
.anim-delay-4 { animation-delay: 320ms; }
.anim-delay-5 { animation-delay: 400ms; }

/* Skeleton loader */
.skeleton {
  background: linear-gradient(90deg, #F5EBE0 25%, #FFF0E8 50%, #F5EBE0 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s infinite;
  border-radius: var(--r-sm);
}