// The two soft lights behind the top of a page, shared by the landing's hero
// and the content pages so moving from one to the other does not feel like
// changing sites.
//
// Lights rather than an image: nothing to download, and nothing that dates the
// page when the brand shifts. `isolate` keeps the negative z-index inside the
// element instead of behind the page background.
//
// `$overflow: clip` for a tall element with sticky children: `hidden` makes the
// element a scroll container, and `position: sticky` inside one stops
// following the page.
@mixin glow($overflow: hidden) {
  position: relative;
  isolation: isolate;
  overflow: $overflow;

  &::before,
  &::after {
    content: '';
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(80px);
  }

  &::before {
    top: -14rem;
    left: 50%;
    width: 64rem;
    height: 38rem;
    transform: translateX(-58%);
    opacity: 0.5;
    background: radial-gradient(
      closest-side,
      var(--pi-color-primary),
      transparent
    );
  }

  &::after {
    top: 4rem;
    right: -8rem;
    width: 26rem;
    height: 26rem;
    opacity: 0.35;
    background: radial-gradient(
      closest-side,
      var(--pi-color-accent),
      transparent
    );
  }
}