/* Drifting gradient background, sitewide.
 *
 * Kept in its own file because the site is served by ten different documents: the SPA shell plus
 * nine server-rendered pages that each carry their own inline <style>. They all link this, so the
 * drift has one definition instead of ten copies to keep in step.
 *
 * Pseudo-elements on <body> so no document needs an extra element. Only `transform` is animated,
 * which the compositor can run on the GPU without laying out or repainting the page content, and
 * `pointer-events:none` keeps the layer out of the way of every click. Colours are the logo's gold
 * and bronze; they are written as literal rgba rather than custom properties because each inline
 * shell declares its own :root and would not otherwise resolve them.
 */
/* inset:-10% gives a 120% span: enough headroom that a translate never drags a hard edge into
 * view, while keeping the percentage positions below close enough to viewport percentages to
 * reason about. At -25% the maths put two of the four blobs off-screen entirely. */
/* The layer paints at step 2 of the root stacking context, which is BEFORE <body>'s own
 * background box at step 3 — so an opaque body colour hides it completely. The page colour
 * therefore belongs on <html> (step 1, below the layer) and body must stay transparent.
 * background-color, not the shorthand: a page's background-image (the app's grid, for one) has to
 * survive, and it paints above the gradient, which is where it belongs.
 * !important because each server-rendered page sets its body colour in a later inline <style>. */
html{background-color:#050506 !important}
body{background-color:transparent !important}

body::before,body::after{
  content:"";position:fixed;inset:-10%;z-index:-1;pointer-events:none;will-change:transform}
body::before{
  background:
    /* lands at viewport 10%,12% — the upper left, clear of the hero headline */
    radial-gradient(34% 30% at 17% 18%,rgba(245,197,24,.45),transparent 70%),
    /* lands at viewport 82%,20% — behind the prize panel, which has its own opaque card */
    radial-gradient(30% 26% at 77% 25%,rgba(224,130,74,.36),transparent 72%);
  animation:bgdrift-a 19s ease-in-out infinite}
body::after{
  background:
    /* viewport 68%,78% */
    radial-gradient(38% 32% at 65% 73%,rgba(245,197,24,.34),transparent 74%),
    /* viewport 22%,72% */
    radial-gradient(30% 26% at 27% 68%,rgba(224,130,74,.26),transparent 72%);
  animation:bgdrift-b 26s ease-in-out infinite}
@keyframes bgdrift-a{
  0%{transform:translate3d(0,0,0) scale(1)}
  34%{transform:translate3d(9%,6%,0) scale(1.10)}
  67%{transform:translate3d(-7%,-5%,0) scale(1.04)}
  100%{transform:translate3d(0,0,0) scale(1)}}
@keyframes bgdrift-b{
  0%{transform:translate3d(0,0,0) scale(1.06)}
  40%{transform:translate3d(-9%,-6%,0) scale(1)}
  74%{transform:translate3d(8%,7%,0) scale(1.12)}
  100%{transform:translate3d(0,0,0) scale(1.06)}}
/* Someone who has asked for less motion still gets the depth, just held still. */
@media(prefers-reduced-motion:reduce){body::before,body::after{animation:none}}
