/* Homepage hero atmosphere: soft light, with orbit geometry drawn from the app-and-device scene. */
.home-page .reference-hero {
  background:
    radial-gradient(ellipse 520px 390px at 77% 28%, rgba(64, 153, 238, .22), rgba(119, 190, 248, .10) 40%, transparent 74%),
    radial-gradient(ellipse 520px 270px at 79% 78%, rgba(40, 127, 221, .15), transparent 73%),
    radial-gradient(ellipse 380px 280px at 13% 92%, rgba(123, 192, 249, .16), transparent 74%),
    radial-gradient(circle at 1px 1px, rgba(23, 111, 202, .035) .85px, transparent 1.5px) 0 0 / 28px 28px,
    linear-gradient(118deg, #fff 0%, #fbfdff 46%, #f1f8ff 100%) !important;
}

.home-page .reference-hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -1%;
  display: block !important;
  pointer-events: none;
  background:
    radial-gradient(ellipse 34% 43% at 78% 51%, transparent 97.2%, rgba(38, 126, 216, .17) 97.7%, transparent 98.25%),
    radial-gradient(ellipse 27% 34% at 78% 51%, transparent 96.8%, rgba(90, 166, 235, .13) 97.35%, transparent 98%),
    radial-gradient(ellipse 20% 24% at 79% 49%, rgba(157, 211, 255, .20), transparent 73%);
  opacity: .78;
  transform-origin: 78% 51%;
  animation: appsget-hero-atmosphere-drift 18s ease-in-out infinite alternate;
}

.home-page .reference-hero .signal-hero-copy {
  z-index: 3;
}

.home-page .reference-hero .hero-device-stage {
  z-index: 1;
}

@keyframes appsget-hero-atmosphere-drift {
  from { opacity: .62; transform: translate3d(-.35%, .25%, 0) scale(.995); }
  to { opacity: .9; transform: translate3d(.35%, -.25%, 0) scale(1.005); }
}

@media (max-width: 680px) {
  .home-page .reference-hero {
    background:
      radial-gradient(ellipse 125% 27% at 56% 86%, rgba(65, 153, 235, .19), transparent 75%),
      radial-gradient(ellipse 90% 18% at 12% 8%, rgba(127, 194, 249, .12), transparent 76%),
      radial-gradient(circle at 1px 1px, rgba(23, 111, 202, .032) .85px, transparent 1.5px) 0 0 / 26px 26px,
      linear-gradient(155deg, #fff 0%, #fbfdff 50%, #f2f8ff 100%) !important;
  }

  .home-page .reference-hero::after {
    background:
      radial-gradient(ellipse 44% 18% at 50% 84%, transparent 96.5%, rgba(38, 126, 216, .16) 97.2%, transparent 98%),
      radial-gradient(ellipse 34% 13% at 50% 84%, transparent 96%, rgba(90, 166, 235, .13) 96.8%, transparent 97.8%),
      radial-gradient(ellipse 72% 25% at 50% 86%, rgba(157, 211, 255, .17), transparent 74%);
    opacity: .66;
    transform-origin: 50% 84%;
    animation-duration: 22s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .reference-hero::after {
    animation: none;
    opacity: .76;
    transform: none;
  }
}