/*
 * Home page readability glows for the darker, more colourful home background.
 * Loaded after the compiled stylesheet; layout and wording are unchanged.
 * Every glow is a radial gradient that fades to transparent before its own
 * edge, so no box outline is ever visible.
 */

/* Centre column: strongest behind the names, fading out towards the edges.
   Width is capped so the glow has faded away well before the cross in the
   sky on the right-hand side. */
#home > .z-10 {
  isolation: isolate;
}

#home > .z-10::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -1rem;
  bottom: -3rem;
  left: 50%;
  width: min(40rem, 100%);
  /* Follows the names, which sit 2cm lower (see home-names.css). */
  transform: translate(-50%, 2cm);
  pointer-events: none;
  background:
    radial-gradient(
      closest-side at 50% 50%,
      rgba(255, 249, 236, 0.62) 0%,
      rgba(255, 249, 236, 0.4) 45%,
      rgba(255, 249, 236, 0) 100%
    ),
    radial-gradient(
      closest-side at 50% 50%,
      rgba(255, 249, 236, 0.5) 0%,
      rgba(255, 249, 236, 0.38) 50%,
      rgba(255, 249, 236, 0.15) 78%,
      rgba(255, 249, 236, 0) 100%
    );
  background-size: 74% 46%, 100% 100%;
  background-position: 50% 45%, 50% 50%;
  background-repeat: no-repeat;
}

/* On desktop the cross sits roughly three quarters of the way across the
   screen, so keep the glow inside the middle 44% of the viewport. */
@media (min-width: 1024px) {
  #home > .z-10::before {
    width: min(40rem, 44vw);
  }
}

/* Verse: a faint pale glow just behind the line of text. */
#home > .z-10 > p:first-child {
  position: relative;
  isolation: isolate;
}

#home > .z-10 > p:first-child::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -0.9rem -2.5rem;
  pointer-events: none;
  background: radial-gradient(
    closest-side,
    rgba(255, 249, 236, 0.55) 0%,
    rgba(255, 249, 236, 0.35) 55%,
    rgba(255, 249, 236, 0) 100%
  );
}