/* Styles pour la bulle 3D EVA - Transparente et adaptée au thème clair/sombre */
.eva-sphere-wrapper {
  animation: eva-sphere-float 4s ease-in-out infinite;
}

@keyframes eva-sphere-float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

.lottie-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
}

.lottie-container svg {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

/* Bulle 3D avec reflets réalistes - Transparente et neutre */
@keyframes bubble-shine {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.4; }
  50% { transform: translate(-45%, -45%) scale(1.1); opacity: 0.6; }
}

.bubble-3d {
  position: relative;
  border-radius: 50%;
  /* Gradient neutre blanc/gris transparent - adapté au thème clair */
  background: radial-gradient(
      circle at 35% 25%,
      rgba(255, 255, 255, 0.15) 0%,
      rgba(255, 255, 255, 0.08) 25%,
      rgba(255, 255, 255, 0.04) 50%,
      rgba(255, 255, 255, 0.02) 75%,
      transparent 100%
  );
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
      inset 0 0 20px rgba(255, 255, 255, 0.05),
      inset -10px -10px 20px rgba(0, 0, 0, 0.02),
      inset 10px 10px 20px rgba(255, 255, 255, 0.03),
      0 8px 16px rgba(0, 0, 0, 0.06),
      0 0 24px rgba(255, 255, 255, 0.03);
}

/* Mode sombre - ajustement pour le thème dark */
.dark .bubble-3d {
  background: radial-gradient(
      circle at 35% 25%,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(255, 255, 255, 0.06) 25%,
      rgba(255, 255, 255, 0.03) 50%,
      rgba(255, 255, 255, 0.01) 75%,
      transparent 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
      inset 0 0 20px rgba(255, 255, 255, 0.04),
      inset -10px -10px 20px rgba(0, 0, 0, 0.1),
      inset 10px 10px 20px rgba(255, 255, 255, 0.02),
      0 8px 16px rgba(0, 0, 0, 0.2),
      0 0 24px rgba(255, 255, 255, 0.02);
}

/* Reflet principal (highlight) - Blanc transparent */
.bubble-3d::before {
  content: '';
  position: absolute;
  top: 20%;
  left: 22%;
  width: 35%;
  height: 35%;
  border-radius: 50%;
  background: radial-gradient(
      circle at 30% 30%,
      rgba(255, 255, 255, 0.25) 0%,
      rgba(255, 255, 255, 0.10) 30%,
      transparent 70%
  );
  filter: blur(10px);
  animation: bubble-shine 3s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

.dark .bubble-3d::before {
  background: radial-gradient(
      circle at 30% 30%,
      rgba(255, 255, 255, 0.20) 0%,
      rgba(255, 255, 255, 0.08) 30%,
      transparent 70%
  );
}

/* Reflet secondaire (petit reflet) - Blanc transparent */
.bubble-3d::after {
  content: '';
  position: absolute;
  bottom: 28%;
  right: 22%;
  width: 20%;
  height: 20%;
  border-radius: 50%;
  background: radial-gradient(
      circle at 50% 50%,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(255, 255, 255, 0.06) 40%,
      transparent 70%
  );
  filter: blur(8px);
  pointer-events: none;
  z-index: 1;
}

.dark .bubble-3d::after {
  background: radial-gradient(
      circle at 50% 50%,
      rgba(255, 255, 255, 0.15) 0%,
      rgba(255, 255, 255, 0.05) 40%,
      transparent 70%
  );
}