/* The stage: two soft lights at the top of a page, the brand violet and a
 * cooler sky blue, fading into the ground. First drawn for the waitlist page; shared so
 * every public page carries the same depth from one place.
 *
 * Usage: add class="oa-stage" to the page's outermost full-width element.
 * Paints behind its content and nothing else -- the element keeps its own
 * background colour.
 *
 * overflow: clip, never hidden: hidden makes the element a scroll container,
 * which breaks position: sticky inside it (the pinned film on the scroll
 * landing, the CPD hero's sticky column). clip trims the light's overspill
 * without that side effect.
 */

.oa-stage {
  --stage-glow: rgba(108, 99, 255, 0.14);
  /* The second, cooler light: sky blue against the brand violet, so the
     ground reads as depth rather than as one coloured spot. */
  --stage-glow-2: rgba(56, 189, 248, 0.09);
  --stage-height: 720px;

  position: relative;
  isolation: isolate;
  overflow: clip;
}

.page-dark .oa-stage {
  --stage-glow: rgba(108, 99, 255, 0.22);
  --stage-glow-2: rgba(56, 189, 248, 0.10);
}

.oa-stage::before,
.oa-stage::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  left: 0;
  right: 0;
}

/* The light: centred above the first heading, wider than the page. */
.oa-stage::before {
  top: calc(var(--stage-height) * -0.3);
  left: -10%;
  right: -10%;
  height: var(--stage-height);
  /* Explicit radii, so the light has faded to nothing before its box ends:
     the default (farthest-corner) left a visible edge on tall pages. */
  background: radial-gradient(ellipse 50% 42% at 50% 52%, var(--stage-glow), transparent 100%);
}

/* The second light, where the grid used to be: high on the far side, drifting
   slowly so the page feels lit rather than printed. Explicit radii again, so
   it has faded out well inside its box. */
.oa-stage::after {
  top: calc(var(--stage-height) * -0.25);
  left: -10%;
  right: -10%;
  height: calc(var(--stage-height) * 1.1);
  background: radial-gradient(ellipse 34% 36% at 72% 34%, var(--stage-glow-2), transparent 100%);
  animation: oa-stage-drift 24s ease-in-out infinite alternate;
}

@keyframes oa-stage-drift {
  from { transform: translate3d(-3%, 0, 0) scale(1); }
  to   { transform: translate3d(4%, 3%, 0) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .oa-stage::after { animation: none; }
}

/* A two-column hero reads better with the light behind its copy. */
.oa-stage--left::before {
  background: radial-gradient(ellipse 40% 42% at 32% 52%, var(--stage-glow), transparent 100%);
}

/* With the copy on the left, the second light sits over the right column. */
.oa-stage--left::after {
  background: radial-gradient(ellipse 30% 38% at 74% 36%, var(--stage-glow-2), transparent 100%);
}

/* A stage that holds more than one block -- the audience switcher and the
   hero under it. The blocks inside paint solid grounds of their own, which
   would cover the light, so the wrapper paints the ground once and they go
   clear. Same colours the blocks used (--ld-ground, --wl-ground). */
.oa-stage--ground { background: var(--oa-surface); }
.page-dark .oa-stage--ground { background: var(--oa-stage); }

.oa-stage--ground > .cpd-hero,
.oa-stage--ground > .reel,
.oa-stage--ground > .waitlist {
  background: transparent;
}

/* The switcher's band and its hairline were what broke the light. */
.oa-stage .audience-chooser,
.page-dark .oa-stage .audience-chooser {
  background: transparent;
  border-bottom-color: transparent;
}