/* Social Media Pulsing Icon Effect - Inspired by GoDaddy */

.social-pulse-container {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.social-pulse-container .pulse {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: currentColor;
  opacity: 0;
  animation: social-pulse 2s ease-out infinite;
}

/* Stagger animation delays for each social icon */
.social-pulse-container:nth-child(1) .pulse {
  animation-delay: 0s;
}

.social-pulse-container:nth-child(2) .pulse {
  animation-delay: 0.2s;
}

.social-pulse-container:nth-child(3) .pulse {
  animation-delay: 0.4s;
}

.social-pulse-container:nth-child(4) .pulse {
  animation-delay: 0.6s;
}

.social-pulse-container:nth-child(5) .pulse {
  animation-delay: 0.8s;
}

.social-pulse-container:nth-child(6) .pulse {
  animation-delay: 1s;
}

@keyframes social-pulse {
  0% {
    transform: scale(0.8);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.4;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

/* Enhanced hover effect */
.social-pulse-container a {
  position: relative;
  z-index: 1;
  transition: all 0.3s ease;
}

.social-pulse-container:hover a {
  transform: scale(1.1);
}

.social-pulse-container:hover .pulse {
  animation-play-state: paused;
  opacity: 0.3;
  transform: scale(1.2);
}

/* Facebook specific color */
.social-pulse-container.facebook .pulse {
  background-color: #1877f2;
}

/* Twitter/X specific color */
.social-pulse-container.twitter .pulse,
.social-pulse-container.x .pulse {
  background-color: #000000;
}

/* Instagram specific color */
.social-pulse-container.instagram .pulse {
  background: radial-gradient(
    circle at 30% 107%,
    #fdf497 0%,
    #fdf497 5%,
    #fd5949 45%,
    #d6249f 60%,
    #285aeb 90%
  );
}

/* LinkedIn specific color */
.social-pulse-container.linkedin .pulse {
  background-color: #0077b5;
}

/* YouTube specific color */
.social-pulse-container.youtube .pulse {
  background-color: #ff0000;
}

/* Pinterest specific color */
.social-pulse-container.pinterest .pulse {
  background-color: #e60023;
}

/* TikTok specific color */
.social-pulse-container.tiktok .pulse {
  background-color: #000000;
}

/* Mobile optimization */
@media (max-width: 768px) {
  @keyframes social-pulse {
    0% {
      transform: scale(0.9);
      opacity: 0.6;
    }
    50% {
      transform: scale(1.2);
      opacity: 0.3;
    }
    100% {
      transform: scale(1.5);
      opacity: 0;
    }
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .social-pulse-container .pulse {
    animation: none;
  }

  .social-pulse-container:hover .pulse {
    display: none;
  }
}