/* Framer Motion equivalents converted to native CSS animations */

/* Animation for floating up and down */
@keyframes floatUpDown {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(10px);
  }
}

/* Animation for the first pulsing bubble (top left) */
@keyframes pulseBubble1 {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.3;
  }

  50% {
    transform: scale(1.2);
    opacity: 0.5;
  }
}

/* Animation for the second pulsing bubble (bottom right) */
@keyframes pulseBubble2 {

  0%,
  100% {
    transform: scale(1.2);
    opacity: 0.4;
  }

  50% {
    transform: scale(1);
    opacity: 0.2;
  }
}

/* Animation for fading and moving up */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Apply the custom animations to the respective classes */
.animate-fadeUp {
  animation: fadeUp 0.8s ease-out forwards;
}

.animate-floatUpDown {
  animation: floatUpDown 2s infinite ease-in-out;
}

.animate-bubble1 {
  animation: pulseBubble1 8s infinite ease-in-out;
}

.animate-bubble2 {
  animation: pulseBubble2 10s infinite ease-in-out;
}

/* Note: All other styles are handled by the Tailwind CSS utility classes included via the script.js file. */