@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

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

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-6px); }
  60% { transform: translateY(-3px); }
}

@keyframes drift {
  0%   { transform: translateX(0) translateY(0) scale(1); opacity: 0.9; }
  15%  { transform: translateX(6px) translateY(-3px) scale(0.85); opacity: 1; }
  30%  { transform: translateX(-8px) translateY(-6px) scale(1.15); opacity: 0.85; }
  45%  { transform: translateX(-4px) translateY(2px) scale(0.9); opacity: 1; }
  60%  { transform: translateX(10px) translateY(-4px) scale(1.2); opacity: 0.95; }
  75%  { transform: translateX(4px) translateY(-8px) scale(1); opacity: 0.85; }
  90%  { transform: translateX(-10px) translateY(-2px) scale(1.1); opacity: 1; }
  100% { transform: translateX(0) translateY(0) scale(1); opacity: 0.9; }
}

.anim-fade-in {
  opacity: 0;
  animation: fadeIn var(--anim-duration-base) ease-out forwards;
}

.anim-fade-in-up {
  opacity: 0;
  transform: translateY(24px);
  animation: fadeInUp var(--anim-duration-base) ease-out forwards;
}

.anim-float {
  animation: float 4s ease-in-out infinite;
}