@import 'tailwindcss';
@import '@repo/ui/theme.css';
@source "../../../packages/ui/src";

/* =========================================
   ANIMATION: FLOATING
   ========================================= */

/* --- Keyframes Definition --- */
@keyframes floating {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px); /* Peak float distance (adjust as needed) */
  }
}

/* --- Main Utility Class --- */
.animate-floating {
  animation: floating 4s ease-in-out infinite;
}

/* --- Speed Variations (Optional) --- */
.animate-floating-fast {
  animation: floating 3s ease-in-out infinite;
}

.animate-floating-slow {
  animation: floating 5s ease-in-out infinite;
}