/* gradient-bar.css — the animated gradient band.
 *
 * 🚨 THIS FILE IS LOADED BY BOTH THE COLOUR LAB AND THE SITE. THAT IS THE POINT.
 *
 * It used to exist twice: once here and once transcribed into events-hub.css
 * with everything renamed to fit the site's conventions — --offset became
 * --evh-goo-offset, moveInCircle became evhCircle, #goo became #evhGoo, and the
 * DOM was restructured. Transcribing FEELS like copying and is not: every rename
 * was somewhere a difference could hide, and three of them did. The band lost a
 * light, gained a stacking context that broke the grain, and had its blob sizing
 * changed from a percentage to pixels. Bunny saw it as "low resolution" and was
 * right; Chase, 2026-08-21: "color bar能做的东西，你直接一比一复制不就行了".
 *
 * So: one file. Change the effect here and both move together. If the site ever
 * needs something this file does not do, add it to this file — do NOT start a
 * second copy under a different prefix.
 *
 * The selectors are all scoped under .gradient-bg already, so it is safe to load
 * site-wide; nothing here matches unless that wrapper is present.
 *
 * The effect is codepen.io/Podgro/pen/oNOKYqr, read from the live pen — same
 * filter constants, same animation curves. See gradient-bar-lab.html for what
 * each variable does and how the palette was arrived at.
 *
 * The consumer supplies: the palette (override the --color-* vars on any
 * ancestor) and the box. The lab sizes the box with --barh; the site stretches
 * .gradient-bg over its band. Nothing else should need overriding. */

:root{
  /* the pen's own palette, byte for byte */
  --color-bg1: rgb(8, 10, 15);
  --color-bg2: rgb(0, 17, 32);
  --color1: 18, 113, 255;
  --color2: 107, 74, 255;
  --color3: 100, 100, 255;
  --color4: 50, 160, 220;
  --color5: 80, 47, 122;
  --color-interactive: 140, 100, 255;
  --circle-size: 80%;
  --blending: hard-light;

  /* exposed so the sliders have something to move */
  --alpha: .8;
  --blur: 40px;
  --noise-op: .3;
  --scrim: 0;
  --offset: 1;          /* see "the pixel offsets" note below */
  --barh: 320px;
}

.gradient-bg{
  position:relative; width:100%; height:var(--barh);
  overflow:hidden;
  background:linear-gradient(40deg, var(--color-bg1), var(--color-bg2));
  isolation:isolate;               /* keeps hard-light off the page behind the bar */
}
.gradient-bg .noiseBg{
  position:absolute; width:100%; height:100%; top:0; left:0; z-index:1;
  mix-blend-mode:soft-light; opacity:var(--noise-op); pointer-events:none;
}
.gradient-bg .svgBlur{display:none}
.gradient-bg .gradients-container{
  filter:url(#goo) blur(var(--blur));
  width:100%; height:100%;
}

@keyframes moveInCircle{0%{transform:rotate(0deg)}50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}
@keyframes moveVertical{0%{transform:translateY(-50%)}50%{transform:translateY(50%)}100%{transform:translateY(-50%)}}
@keyframes moveHorizontal{
  0%{transform:translateX(-50%) translateY(-10%)}
  50%{transform:translateX(50%) translateY(10%)}
  100%{transform:translateX(-50%) translateY(-10%)}}

.gradient-bg .g1,.gradient-bg .g2,.gradient-bg .g3,
.gradient-bg .g4,.gradient-bg .g5,.gradient-bg .interactive{
  position:absolute; mix-blend-mode:var(--blending);
}
.gradient-bg .g1{
  background:radial-gradient(circle at center, rgba(var(--color1), var(--alpha)) 0, rgba(var(--color1), 0) 50%) no-repeat;
  width:var(--circle-size); height:var(--circle-size);
  top:calc(50% - var(--circle-size)/2); left:calc(50% - var(--circle-size)/2);
  transform-origin:center center; animation:moveVertical 30s ease infinite; opacity:1;
}
.gradient-bg .g2{
  background:radial-gradient(circle at center, rgba(var(--color2), var(--alpha)) 0, rgba(var(--color2), 0) 50%) no-repeat;
  width:var(--circle-size); height:var(--circle-size);
  top:calc(50% - var(--circle-size)/2); left:calc(50% - var(--circle-size)/2);
  transform-origin:calc(50% - 400px * var(--offset));
  animation:moveInCircle 20s reverse infinite; opacity:1;
}
.gradient-bg .g3{
  background:radial-gradient(circle at center, rgba(var(--color3), var(--alpha)) 0, rgba(var(--color3), 0) 50%) no-repeat;
  width:var(--circle-size); height:var(--circle-size);
  top:calc(50% - var(--circle-size)/2 + 200px * var(--offset));
  left:calc(50% - var(--circle-size)/2 - 500px * var(--offset));
  transform-origin:calc(50% + 400px * var(--offset));
  animation:moveInCircle 40s linear infinite; opacity:1;
}
.gradient-bg .g4{
  background:radial-gradient(circle at center, rgba(var(--color4), var(--alpha)) 0, rgba(var(--color4), 0) 50%) no-repeat;
  width:var(--circle-size); height:var(--circle-size);
  top:calc(50% - var(--circle-size)/2); left:calc(50% - var(--circle-size)/2);
  transform-origin:calc(50% - 200px * var(--offset));
  animation:moveHorizontal 40s ease infinite; opacity:.7;
}
.gradient-bg .g5{
  background:radial-gradient(circle at center, rgba(var(--color5), var(--alpha)) 0, rgba(var(--color5), 0) 50%) no-repeat;
  width:calc(var(--circle-size) * 2); height:calc(var(--circle-size) * 2);
  top:calc(50% - var(--circle-size)); left:calc(50% - var(--circle-size));
  transform-origin:calc(50% - 800px * var(--offset)) calc(50% + 200px * var(--offset));
  animation:moveInCircle 20s ease infinite; opacity:1;
}
.gradient-bg .interactive{
  background:radial-gradient(circle at center, rgba(var(--color-interactive), var(--alpha)) 0, rgba(var(--color-interactive), 0) 50%) no-repeat;
  width:100%; height:100%; top:-50%; left:-50%; opacity:.7;
}

/* Not in the pen. A black veil between the bar and the page title — the one
   honest fix when the heading will not hold up and the colours are staying. */
.gradient-bg .scrim{position:absolute; inset:0; z-index:2; background:#000; opacity:var(--scrim); pointer-events:none}

@media (prefers-reduced-motion: reduce){
  .gradient-bg .g1,.gradient-bg .g2,.gradient-bg .g3,
  .gradient-bg .g4,.gradient-bg .g5{animation:none !important}