.earth-wrap {
  isolation: isolate;
  background: #03151d;
}

.earth-wrap::before {
  content: "";
  position: absolute;
  inset: 9.5%;
  z-index: 0;
  border-radius: 50%;
  background-image:
    linear-gradient(90deg, rgba(2, 13, 18, 0.08), transparent 43%, rgba(255, 255, 255, 0.08) 65%, rgba(2, 13, 18, 0.42)),
    url("images/albatross/earth-blue-marble.jpg");
  background-position: var(--satellite-x, 50%) center;
  background-size: auto var(--satellite-zoom, 100%);
  box-shadow: inset -35px -12px 60px rgba(0, 0, 0, 0.55), 0 0 45px rgba(115, 183, 199, 0.16);
}

#bird-earth {
  position: relative;
  z-index: 1;
  opacity: 0;
}

.earth-wrap::after {
  content: "";
  position: absolute;
  inset: 9.5%;
  z-index: 1;
  border: 2px solid rgba(228, 238, 235, 0.72);
  border-radius: 50%;
  background: var(--region-band, transparent);
  box-shadow: inset -28px -8px 45px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

.earth-wrap.region-south {
  --region-band: linear-gradient(to bottom, transparent 56%, rgba(236, 104, 75, 0.08) 57%, rgba(236, 104, 75, 0.5) 78%, rgba(236, 104, 75, 0.16) 100%);
}

.earth-wrap.region-north {
  --region-band: linear-gradient(to bottom, rgba(200, 218, 105, 0.22), rgba(200, 218, 105, 0.5) 28%, transparent 49%);
}

.earth-wrap.region-equator {
  --region-band: linear-gradient(to bottom, transparent 43%, rgba(115, 183, 199, 0.6) 47%, rgba(115, 183, 199, 0.6) 53%, transparent 57%);
}

.earth-help,
.earth-status,
.earth-credit {
  z-index: 2;
}

.earth-wrap.is-dragging {
  cursor: grabbing;
}

.earth-credit {
  position: absolute;
  right: 14px;
  bottom: 14px;
  color: #e4eeeb;
  font-family: var(--mono);
  font-size: 0.48rem;
  text-decoration: none;
}

.earth-credit:hover,
.earth-credit:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 580px) {
  .earth-credit {
    right: 10px;
    bottom: 10px;
    max-width: 145px;
    text-align: right;
  }
}