.social-map-elements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-e@keyframes connectLine {
  0% { transform: scaleX(0); opacity: 0; }
  100% { transform: scaleX(1); opacity: 0.7; }
}

/* Hide SVG decorations on mobile devices */
@media (max-width: 768px) {
  .social-map-elements {
    display: none;
  }
  
  .animated-bg {
    opacity: 0.2 !important;
  }
}

@keyframes floatIn { none;
  z-index: 3;
  overflow: hidden;
}

.floating-pin {
  position: absolute;
  width: 40px;
  height: 40px;
  background-size: contain;
  background-repeat: no-repeat;
  animation: floatIn 1s ease-out forwards, float 3s ease-in-out infinite alternate;
  opacity: 0;
}

.floating-pin.pin1 {
  top: 15%;
  left: 20%;
  background-image: url('../assets/pin_icon.svg');
  animation-delay: 0.5s;
}

.floating-pin.pin2 {
  top: 65%;
  left: 65%;
  background-image: url('../assets/pin_icon.svg');
  animation-delay: 1.2s;
}

.floating-pin.pin3 {
  top: 25%;
  left: 75%;
  background-image: url('../assets/pin_icon.svg');
  animation-delay: 1.8s;
}

.floating-connection {
  position: absolute;
  background: linear-gradient(90deg, #ff5a5f 0%, #7c5fd6 100%);
  height: 2px;
  opacity: 0;
  transform-origin: left center;
  animation: connectLine 2s ease-out forwards;
}

.connection1 {
  top: 20%;
  left: 22%;
  width: 44%;
  animation-delay: 1.5s;
}

.connection2 {
  top: 30%;
  left: 67%;
  width: 15%;
  transform: rotate(-45deg);
  animation-delay: 2.3s;
}

.user-avatar {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-size: cover;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  opacity: 0;
  animation: popIn 0.5s ease-out forwards;
}

.avatar1 {
  top: 15%;
  left: 20%;
  background-image: url('assets/avatar1.jpg');
  animation-delay: 1s;
}

.avatar2 {
  top: 65%;
  left: 65%;
  background-image: url('assets/avatar2.jpg');
  animation-delay: 1.7s;
}

.avatar3 {
  top: 25%;
  left: 75%;
  background-image: url('assets/avatar3.jpg');
  animation-delay: 2.3s;
}

@keyframes floatIn {
  0% { transform: translateY(20px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0.8; }
}

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

@keyframes connectLine {
  0% { transform: scaleX(0); opacity: 0; }
  100% { transform: scaleX(1); opacity: 0.6; }
}

@keyframes popIn {
  0% { transform: scale(0); opacity: 0; }
  70% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.scroll-indicator {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  opacity: 0;
  animation: fadeIn 1s ease-out 3s forwards;
}

.scroll-indicator span {
  display: block;
  width: 30px;
  height: 50px;
  border: 2px solid rgba(124, 95, 214, 0.7);
  border-radius: 15px;
  position: relative;
}

.scroll-indicator span::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 50%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  background-color: rgba(124, 95, 214, 0.7);
  border-radius: 50%;
  animation: scrollDown 2s infinite;
}

@keyframes scrollDown {
  0% { transform: translateY(0); opacity: 0.7; }
  50% { transform: translateY(15px); opacity: 0.2; }
  100% { transform: translateY(0); opacity: 0.7; }
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.ultra-modern-hero {
  position: relative;
  overflow: hidden;
}