/* One orbit crosses the service tabs and the active banner as a single surface. */
html[data-customer-view="landing"] .customer-intro-zone {
  position: relative;
}

html[data-customer-view="landing"] .customer-intro-zone::before {
  content: "";
  position: absolute;
  z-index: 5;
  top: 18px;
  left: 18px;
  right: 18px;
  height: 586px;
  border-radius: 24px;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 95% 28%, transparent 0 118px, #ffffffa6 119px 121px, transparent 122px),
    radial-gradient(circle at 95% 28%, transparent 0 156px, #ffffff32 157px 159px, transparent 160px);
  background-size: 120% 125%;
  animation: customer-unified-orbit 7s ease-in-out infinite;
}

/* The former banner-only ring would make this look like two separate pieces. */
html[data-customer-view="landing"] .service-promo-slide .hero-copy::before {
  display: none;
}

@keyframes customer-unified-orbit {
  0%, 100% { background-position: 0 0; opacity: .72; }
  50% { background-position: 100% 55%; opacity: 1; }
}

@media (max-width: 680px) {
  html[data-customer-view="landing"] .customer-intro-zone::before {
    top: 10px;
    left: 10px;
    right: 10px;
    height: 381px;
    border-radius: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-customer-view="landing"] .customer-intro-zone::before {
    animation: none;
  }
}