/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/.pnpm/next@15.3.3_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[5].use[2]!./node_modules/.pnpm/next@15.3.3_react-dom@19.1.0_react@19.1.0__react@19.1.0/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[5].use[3]!./src/components/Landing/Common/WaterBubble.module.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
.WaterBubble_waterBubble__lLtp4 {
  width: var(--bubble-size);
  height: var(--bubble-size);

  border-radius: 50%;
  position: relative;
  overflow: hidden;
  background: rgba(213, 213, 213, 0.1);
  -webkit-backdrop-filter: blur(2.75px);
          backdrop-filter: blur(2.75px);
  border: 1px solid #fff;
  animation: WaterBubble_waterBounce__jEP5a 3s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.WaterBubble_waterBubble__lLtp4 img {
  width: 40px;
  height: 40px;
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Áp dụng animation mờ/rõ cho từng ảnh */
.WaterBubble_image1__l32mn {
  animation: WaterBubble_fadeInOut1___KtJu 3s ease-in-out infinite;
}

.WaterBubble_image2__QDTJQ {
  animation: WaterBubble_fadeInOut2__FaHAm 3s ease-in-out infinite;
}

/* Animation nảy, sử dụng biến độ cao */
@keyframes WaterBubble_waterBounce__jEP5a {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(var(--bounce-height));
  }
}

/* Animation đổi ảnh 1 */
/* Ảnh 1: rõ ở đỉnh (50%), mờ ở đáy (0% và 100%) */
@keyframes WaterBubble_fadeInOut1___KtJu {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Ảnh 2: rõ ở đáy (0% và 100%), mờ ở đỉnh (50%) */
@keyframes WaterBubble_fadeInOut2__FaHAm {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}