/* Styles pour l'effet astronomique 3D du conteneur de contacts */
.astro-bg {
  position: absolute;
  inset: -20px;
  border-radius: 16px;
  overflow: hidden;
  z-index: -2;
  opacity: 0.8;
  transform: translateZ(-50px);
  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

.contact-3d-container:hover .astro-bg {
  transform: translateZ(-80px);
}

.astro-stars {
  position: absolute;
  inset: 0;
  background: linear-gradient(125deg, rgba(2, 0, 36, 0.8) 0%, rgba(9, 9, 121, 0.5) 35%, rgba(0, 0, 0, 0.7) 100%);
}

.astro-star {
  position: absolute;
  width: 2px;
  height: 2px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.3);
  opacity: 0;
  animation: twinkle-astro 3s infinite ease-in-out;
}

.astro-nebula {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.2;
  background: radial-gradient(circle, rgba(62, 81, 181, 0.2) 0%, rgba(0, 0, 0, 0) 70%);
  animation: float-nebula 15s infinite ease-in-out;
}

.astro-nebula:nth-child(2) {
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(103, 58, 183, 0.15) 0%, rgba(0, 0, 0, 0) 70%);
  animation-delay: -5s;
  animation-duration: 20s;
}

.astro-nebula:nth-child(3) {
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(33, 150, 243, 0.1) 0%, rgba(0, 0, 0, 0) 70%);
  animation-delay: -10s;
  animation-duration: 18s;
}

@keyframes twinkle-astro {
  0%, 100% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes float-nebula {
  0%, 100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(50px, 20px);
  }
  50% {
    transform: translate(20px, 50px);
  }
  75% {
    transform: translate(-30px, 10px);
  }
}

/* Effet de parallaxe au mouvement de la souris */
.parallax-wrapper {
  transform-style: preserve-3d;
  transform: perspective(1000px);
}

.parallax-layer {
  transition: transform 0.2s ease-out;
}

.parallax-deep {
  transform: translateZ(-100px);
}

.parallax-medium {
  transform: translateZ(-50px);
}

.parallax-shallow {
  transform: translateZ(-20px);
}