/* The API home page's hero. Everything else on the page comes from base.css, ue.css and api.css. */

.hero {
  position: relative;
  overflow: clip;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -8rem 0 auto;
  height: 62rem;
  background:
    radial-gradient(46rem 24rem at 72% 14%, rgba(255, 47, 146, 0.17), transparent 68%),
    radial-gradient(34rem 26rem at 96% 50%, rgba(255, 184, 28, 0.17), transparent 70%),
    radial-gradient(30rem 22rem at 4% 30%, rgba(255, 47, 146, 0.08), transparent 70%);
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 44rem;
  background-image: radial-gradient(circle, rgba(255, 240, 225, 0.12) 1px, transparent 1.5px);
  background-size: 1.5rem 1.5rem;
  -webkit-mask-image: radial-gradient(60rem 30rem at 50% 12%, #000 20%, transparent 74%);
  mask-image: radial-gradient(60rem 30rem at 50% 12%, #000 20%, transparent 74%);
  pointer-events: none;
}

.hero > * {
  position: relative;
  z-index: 1;
}

.hero-inner {
  display: grid;
  gap: var(--sp-6);
  padding-block: var(--sp-6);
}

.hero-copy {
  min-width: 0;
  animation: ue-rise 640ms var(--glide) both;
}

.hero-copy .lede {
  margin-top: var(--sp-4);
}

@media (min-width: 62rem) {
  .hero-inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--sp-7);
    align-items: center;
    padding-block: var(--sp-7);
  }
}