/* Styles de base pour le conteneur de blobs */
.blob-container {
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: -6;
  display: none;
  justify-content: center;
  align-items: center;
}

/* Affiche les blobs uniquement sur la page d'accueil */
.home .blob-container {
  display: flex;
}

.blob {
  position: absolute;
  filter: blur(30px);
  mix-blend-mode: normal;
  opacity: 0.2;
  width: 600px;
  height: 600px;
  will-change: transform, border-radius;
  transition: transform 0.1s ease-out, border-radius 0.1s ease-out;
}

.blob-1 {
  background: rgba(255, 236, 112, 0.9);
  z-index: 3;
  transform: translateX(-30%) translateY(25%);
}

.blob-2 {
  background:rgba(255, 139, 211, 0.9);
  z-index: 1;
  transform: translateX(30%) translateY(55%);
}

.blob-3 {
  background: rgba(130, 200, 255, 0.9);
  z-index: 2;
  transform: translateX(0%) translateY(-30%);
}

.blob-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle at center,
    transparent 0%,
    rgba(255, 255, 255, 0.8) 100%
  );
  opacity: 0;
  animation: pulse 8s ease-in-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 0.3;
  }
}