/* Styles pour les bulles déformées avec variations d'opacité et de position */
.bubble-morph-1 {
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  animation: morph1 12s ease-in-out infinite alternate;
  transform-origin: center;
  opacity: 0.9;
}

.bubble-morph-2 {
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  animation: morph2 14s ease-in-out infinite alternate;
  animation-delay: 1s;
  transform-origin: center;
  opacity: 0.9;
}

.bubble-morph-3 {
  border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%;
  animation: morph3 13s ease-in-out infinite alternate;
  animation-delay: 2s;
  transform-origin: center;
  opacity: 0.9;
}

.bubble-morph-4 {
  border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
  animation: morph4 15s ease-in-out infinite;
  animation-delay: 1.5s;
  transform-origin: center;
  opacity: 0.9;
}

.bubble-morph-5 {
  border-radius: 35% 65% 31% 69% / 57% 59% 41% 43%;
  animation: morph5 16s ease-in-out infinite;
  animation-delay: 3s;
  transform-origin: center;
  opacity: 0.9;
}

@keyframes morph1 {
  0% {
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
  50% {
    border-radius: 80% 20% 30% 70% / 70% 65% 35% 30%;
    transform: translate(30px, -20px) rotate(2deg);
    opacity: 0.4;
  }
  100% {
    border-radius: 25% 75% 65% 35% / 35% 30% 70% 65%;
    transform: translate(-25px, 15px) rotate(-2deg);
    opacity: 0.8;
  }
}

@keyframes morph2 {
  0% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    transform: translate(0, 0) rotate(-2deg);
    opacity: 0.9;
  }
  50% {
    border-radius: 20% 80% 75% 25% / 45% 65% 35% 55%;
    transform: translate(-25px, 18px) rotate(2deg);
    opacity: 0.3;
  }
  100% {
    border-radius: 75% 25% 45% 55% / 40% 60% 40% 60%;
    transform: translate(20px, -15px) rotate(0deg);
    opacity: 0.7;
  }
}

@keyframes morph3 {
  0% {
    border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%;
    transform: translate(0, 0) rotate(0deg);
    opacity: 0.95;
  }
  50% {
    border-radius: 65% 35% 40% 60% / 70% 50% 50% 30%;
    transform: translate(22px, 22px) rotate(-2deg);
    opacity: 0.35;
  }
  100% {
    border-radius: 35% 65% 70% 30% / 50% 40% 60% 50%;
    transform: translate(-20px, -25px) rotate(2deg);
    opacity: 0.8;
  }
}

@keyframes morph4 {
  0% {
    border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
  33% {
    border-radius: 40% 60% 35% 65% / 40% 60% 40% 60%;
    transform: translate(-18px, 20px) rotate(2deg);
    opacity: 0.4;
  }
  66% {
    border-radius: 70% 30% 45% 55% / 65% 35% 65% 35%;
    transform: translate(20px, -25px) rotate(-2deg);
    opacity: 0.7;
  }
  100% {
    border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
}

@keyframes morph5 {
  0% {
    border-radius: 35% 65% 31% 69% / 57% 59% 41% 43%;
    transform: translate(0, 0) rotate(-2deg);
    opacity: 0.9;
  }
  33% {
    border-radius: 65% 35% 69% 31% / 41% 43% 57% 59%;
    transform: translate(30px, 15px) rotate(0deg);
    opacity: 0.3;
  }
  66% {
    border-radius: 45% 55% 39% 61% / 59% 41% 61% 39%;
    transform: translate(-25px, -20px) rotate(2deg);
    opacity: 0.5;
  }
  100% {
    border-radius: 35% 65% 31% 69% / 57% 59% 41% 43%;
    transform: translate(0, 0) rotate(-2deg);
    opacity: 0.9;
  }
}