/* PROFESSIONAL 3D INTERACTIVE GLOBE */

#globe-container {
  position: absolute;
  width: 450px;
  height: 450px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  pointer-events: all;
  filter: drop-shadow(0 30px 80px rgba(0,0,0,0.6)) drop-shadow(0 0 100px rgba(79,172,254,0.3));
  cursor: grab;
  transition: filter 0.3s ease, transform 0.3s ease;
  animation: globePulse 3s ease-in-out infinite;
}

#globe-container:hover {
  filter: drop-shadow(0 35px 90px rgba(0,0,0,0.7)) drop-shadow(0 0 120px rgba(79,172,254,0.5));
  transform: translate(-50%, -50%) scale(1.05);
}

#globe-container:active {
  cursor: grabbing;
}

#globe-container canvas {
  display: block;
  border-radius: 50%;
  box-shadow: 0 0 80px rgba(79,172,254,0.4), inset 0 0 60px rgba(79,172,254,0.2);
}

/* Pulse animation for better visibility */
@keyframes globePulse {
  0%, 100% {
    filter: drop-shadow(0 30px 80px rgba(0,0,0,0.6)) drop-shadow(0 0 100px rgba(79,172,254,0.3));
  }
  50% {
    filter: drop-shadow(0 30px 80px rgba(0,0,0,0.6)) drop-shadow(0 0 140px rgba(79,172,254,0.6));
  }
}

/* Responsive globe - larger on mobile for better visibility */
@media (max-width: 991px) {
  #globe-container {
    width: 350px;
    height: 350px;
    top: 40%;
  }
}

@media (max-width: 576px) {
  #globe-container {
    width: 320px;
    height: 320px;
    animation: globePulseMobile 2.5s ease-in-out infinite;
  }

  /* More pronounced pulse on mobile */
  @keyframes globePulseMobile {
    0%, 100% {
      filter: drop-shadow(0 20px 60px rgba(0,0,0,0.7)) drop-shadow(0 0 120px rgba(79,172,254,0.5));
      transform: translate(-50%, -50%) scale(1);
    }
    50% {
      filter: drop-shadow(0 20px 60px rgba(0,0,0,0.7)) drop-shadow(0 0 160px rgba(79,172,254,0.8));
      transform: translate(-50%, -50%) scale(1.02);
    }
  }
}