/* Shared glass-ring background for the site's contact invitations. */
.contact-orbits {
  --contact-art-width: min(58%, 700px);
  --contact-art-height: 100%;
  --contact-art-top: 0;
  --contact-art-bottom: auto;
  --contact-art-right: 0;
  --contact-art-opacity: .9;
  --contact-art-mask: linear-gradient(90deg, transparent, #000 32%);
  position: relative;
  isolation: isolate;
  /* Clip the art without creating a scroll container for heading anchors. */
  overflow: clip;
  background: radial-gradient(ellipse at 85% 100%, #1c5661, transparent 65%), #052b42;
  color: #fff;
}

.contact-orbits::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: var(--contact-art-top);
  right: var(--contact-art-right);
  bottom: var(--contact-art-bottom);
  width: var(--contact-art-width);
  height: var(--contact-art-height);
  background-image: url("/assets/site/img/shared/contact-orbits-v1.webp");
  background-image: image-set(
    url("/assets/site/img/shared/contact-orbits-v1-640.webp") 1x,
    url("/assets/site/img/shared/contact-orbits-v1.webp") 2x
  );
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
  -webkit-mask-image: var(--contact-art-mask);
  mask-image: var(--contact-art-mask);
  opacity: var(--contact-art-opacity);
  pointer-events: none;
}

.contact-orbits > div { min-width: 0; }

/* The compact contact-details panel needs a quieter decorative layer. */
.contacts-panel.contact-orbits {
  --contact-art-width: 90%;
  --contact-art-right: -28%;
  --contact-art-opacity: .2;
  --contact-art-mask: linear-gradient(90deg, transparent 10%, #000 85%);
}

/* Stacked invitations keep the glass at the bottom, away from the headline. */
@media (max-width: 900px) {
  .contact-orbits {
    --contact-art-width: 90%;
    --contact-art-height: 80%;
    --contact-art-top: auto;
    --contact-art-bottom: -10%;
    --contact-art-right: -22%;
    --contact-art-opacity: .32;
    --contact-art-mask: linear-gradient(155deg, transparent 15%, #000 95%);
  }
}

@media (max-width: 560px) {
  .contact-orbits {
    --contact-art-width: 115%;
    --contact-art-height: 66%;
    --contact-art-right: -35%;
    --contact-art-opacity: .3;
  }
}

@media (forced-colors: active) {
  .contact-orbits::after { display: none; }
}