/* ===============================================
   Earth Background Block Styles - Three.js WebGL
   =============================================== */

.js-has-earth {
  /* position: relative;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  min-height: 400px;
  z-index: 1; */
}

.block-earth-background {
  position: relative;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 600px;
  z-index: 1;
}

.earth-background {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  max-width: 100vw;
  height: 100%;
  z-index: -1;
  overflow: hidden !important;
}


.earth-background__canvas-container {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 50% !important;
  height: 100% !important;
  z-index: 1 !important;
  pointer-events: auto;
  transform: scale(1) translate3d(0, -100px, 0) rotate(8deg) !important;
}

.earth-background__content {
  position: relative;
  z-index: 2;
}

.earth-background__canvas-container canvas {
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  height: 100% !important;
  opacity: 1;
  transition: opacity 0.3s ease;
  display: block !important;
}


/* Fallback background for when WebGL is not supported */
.earth-background-fallback {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 70% 30%, rgba(0, 180, 216, 0.1) 0%, transparent 50%);
  pointer-events: none;
  z-index: -1;
}

/* Responsive Design */
@media (min-width: 768px) {
  .earth-background__canvas-container {
    transform: scale(1.1) translate3d(48px, 60px, 0) rotate(8deg) !important;
  }
}

@media (min-width: 1024px) {
  .earth-background__canvas-container {
    transform: scale(1.25) translate3d(60px, 0, 0) rotate(8deg) !important;
  }
}

@media (min-width: 1800px) {
  .earth-background__canvas-container {
    transform: scale(1.4) translate3d(60px, 40px, 0) rotate(8deg) !important;
  }
}

@media (max-width: 767px) {
  .earth-background {
    padding-top: 160px !important;
    margin-top: -120px !important;
  }

  .earth-background__canvas-container {
    opacity: 0.4;
  }

  .earth-background__content {
    padding: 1rem;
  }
}