/* ============================================
   GLOW ZONE
   Wrapper for sections that share the alternating
   glow background pattern.

   Usage:
     <div class="glow-zone">
       <section class="something section--glow-left">...</section>
       <section class="something section--glow-right">...</section>
       <section class="something section--glow-left">...</section>
     </div>

   Each child section's glow extends 25% above and
   below its own bounds, so neighbouring glows
   naturally bleed into one another. overflow:hidden
   on the zone clips the first and last glow cleanly
   at the zone edges (so nothing leaks into the
   stats-strip above or whatever sits below later).
   ============================================ */

.glow-zone {
  position: relative;
  background: var(--color-deep-space);
  overflow: hidden;
}

/* All direct-child sections become positioning context
   for their pseudo-element glow */
.glow-zone > section {
  position: relative;
}

/* Section content always renders above the glow */
.glow-zone > section > * {
  position: relative;
  z-index: 1;
}

/* ============================================
   GLOW VARIANTS
   ============================================ */

.section--glow-left::before,
.section--glow-right::before {
  content: '';
  position: absolute;

  /* Vertical: extend 25% beyond section bounds top + bottom
     → adjacent sections' glows overlap → seamless transitions */
  top: -25%;
  bottom: -25%;
  width: 90vw;

  z-index: 0;
  pointer-events: none;
}

/* Purple glow anchored to the left */
.section--glow-left::before {
  left: -35vw;
  background: radial-gradient(
    ellipse at center,
    rgba(108, 46, 255, 0.40) 0%,
    rgba(108, 46, 255, 0.18) 30%,
    rgba(108, 46, 255, 0)    65%
  );
}

/* Red glow anchored to the right */
.section--glow-right::before {
  right: -35vw;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 94, 89, 0.40) 0%,
    rgba(255, 94, 89, 0.18) 30%,
    rgba(255, 94, 89, 0)    65%
  );
}