/*
 * Load this stylesheet before the web component script. It serves three purposes:
 *   1. Sets the globe container's size and background color to reduce layout shift (CLS).
 *   2. Keeps projected fallback content available to assistive tech while visually hidden.
 *   3. Shows a loading spinner while the component initializes, then hides it once defined.
 */
.globe-container {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    max-height: calc(100vh - 6rem);
    aspect-ratio: 3 / 2;
    background-color: #2f4e53;
    overflow: hidden;
    margin-bottom: -1px; /* Fix 1px spacing gap issue under globe section */
}

@media screen and (max-width: 640px) {
    .globe-container {
        aspect-ratio: 380 / 400;
    }
}

/* Screen-reader-only fallback content */
wv-hero-globe .component-data {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* Loading spinner — shown before the web component renders, hidden once defined */
wv-hero-globe:defined::before {
  display: none;
}

wv-hero-globe::before {
  content: '';
  display: block;
  width: 60px;
  height: 60px;
  border-radius: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  background-image: url("https://wvusstatic.com/wvus_assets/logos/beacon-circle-orange.svg");
  background-size: 60px 60px;
  background-repeat: no-repeat;
  animation: sk-bounce 3.5s infinite ease-in-out;
}

@keyframes sk-bounce {
  0%,
  100% {
    transform: scale(0);
  }
  50% {
    transform: scale(1);
  }
}

/* Hide the loading spinner for reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  wv-hero-globe::before {
    display: none;
  }
}