/* esgri-gradient-band.css — the animated band, site-wide.
 *
 * The effect itself is gradient-bar.css, shared byte for byte with the colour
 * lab; this file is only what a consumer has to supply: the palette and the box.
 * It carries no animation, no filter and no blob of its own — if something about
 * the effect needs changing, change gradient-bar.css and both the lab and the
 * site move together. (That rule was learned the hard way: a transcribed second
 * copy drifted in three places and Bunny read the result as "low resolution".)
 *
 * Rolled out 2026-09-09. It ran on /past-events/ alone from 2026-08-20 as a
 * trial — Chase, in the revamp chat: "之前我们说过的在past event上的这个效果还不错，
 * 要不要推广到所有的黑色底上？", Bunny: "yes, as we said before".
 *
 * 🚨 TITLE BANDS ONLY, and that is a decision rather than an oversight. The
 * bands are 176px of heading over a flat black; a moving gradient behind a
 * paragraph of body copy is a different proposition and nobody has asked for it.
 * The six bands are listed in esgri-gradient-band.js.
 *
 * THE PALETTE IS CHASE'S, out of the lab, unaltered — the same values that were
 * on /past-events/. Four of the six lights sit above mid-grey on blue, so under
 * Hard Light they screen rather than multiply and the band actually glows.
 */

.esgri-grad {
  --color-bg1: rgb(8, 10, 15);
  --color-bg2: rgb(0, 17, 32);
  --color1: 19, 85, 185;
  --color2: 123, 88, 202;
  --color3: 94, 94, 156;
  --color4: 14, 39, 52;
  --color5: 80, 47, 122;
  --color-interactive: 120, 97, 189;
  --circle-size: 80%;
  --blending: hard-light;

  position: relative !important;
  background: #000 !important;
}

/* The box. The lab sizes its bar with --barh; a band's height comes from the
   heading inside it, so the effect is stretched over whatever that turns out
   to be.
 *
 * 🚨 FULL-BLEED, NOT inset:0. Several bands are only as wide as the 1180px
 * content shell and paint their black edge to edge through a ::before at
 * `left:50%; width:100vw; margin-left:-50vw` — /staff/ and /about/ are built
 * that way. An `inset: 0` gradient stops at the shell and leaves a black margin
 * either side, which is exactly what Chase photographed on 2026-09-09 minutes
 * after the roll-out. Matching the same 100vw trick covers both kinds of band:
 * on one that is already full width it is the same rectangle. */
.esgri-grad > .gradient-bg {
  position: absolute !important;
  top: 0; bottom: 0;
  left: 50% !important;
  width: 100vw !important;
  margin-left: -50vw !important;
  right: auto !important;
  height: auto !important;
}

/* The black those bands paint with a ::before sits at z-index 0 and would cover
   the gradient. Push the gradient just above it; the band's own children are
   lifted higher still by the rule below. */
.esgri-grad > .gradient-bg { z-index: 0 !important; }
.esgri-grad::before { z-index: -1 !important; }

/* Everything the band already contained has to come back above the gradient.
   A band's inner wrapper is named differently on every page, so this lifts any
   direct child that is not the gradient itself rather than listing them. */
.esgri-grad > *:not(.gradient-bg) {
  position: relative;
  z-index: 1;
}