/* Living blue/orange swirl behind the whole page.
   Pure CSS, no markup needed. Only transforms animate, so it stays cheap
   on the GPU and doesn't affect your PageSpeed scores. */

/* The swirl sits behind the page, so the page color has to live on <html>
   and <body> has to be see-through. Change #16181d if your background differs. */
html { background: #16181d; }
body { background: transparent; }

html::before,
html::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  will-change: transform;
}

/* Slow-turning swirl, centered up and to the right */
html::before {
  width: 150vmax;
  height: 150vmax;
  left: calc(68vw - 75vmax);
  top: calc(22vh - 75vmax);
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(48, 128, 255, 0)    0deg,
    rgba(46, 125, 255, .34) 55deg,
    rgba(48, 128, 255, 0)  120deg,
    rgba(255, 122, 26, .30) 185deg,
    rgba(255, 140, 60, 0)  250deg,
    rgba(46, 125, 255, .22) 310deg,
    rgba(48, 128, 255, 0)  360deg
  );
  -webkit-mask-image: radial-gradient(closest-side, #000 10%, transparent 72%);
          mask-image: radial-gradient(closest-side, #000 10%, transparent 72%);
  filter: blur(40px);
  opacity: .8;
  mix-blend-mode: screen;
  animation: bg-swirl-spin 55s linear infinite, bg-swirl-breathe 17s ease-in-out infinite alternate;
}

/* Soft glows that drift, turn and overlap, so the color keeps shifting */
html::after {
  width: 140vmax;
  height: 140vmax;
  left: calc(50vw - 70vmax);
  top: calc(50vh - 70vmax);
  background:
    radial-gradient(circle at 28% 32%, rgba(255, 122, 26, .24), transparent 32%),
    radial-gradient(circle at 72% 64%, rgba(46, 125, 255, .28), transparent 36%),
    radial-gradient(circle at 38% 78%, rgba(0, 190, 255, .15), transparent 30%),
    radial-gradient(circle at 66% 24%, rgba(255, 160, 70, .13), transparent 26%);
  opacity: .85;
  mix-blend-mode: screen;
  animation: bg-swirl-drift 34s ease-in-out infinite alternate;
}

@keyframes bg-swirl-spin {
  to { rotate: 360deg; }
}
@keyframes bg-swirl-breathe {
  from { scale: .92; }
  to   { scale: 1.08; }
}
@keyframes bg-swirl-drift {
  0%   { transform: translate(-4vmax, -2vmax) rotate(0deg)   scale(1); }
  50%  { transform: translate(3vmax, 3vmax)   rotate(25deg)  scale(1.06); }
  100% { transform: translate(-2vmax, 4vmax)  rotate(-15deg) scale(.97); }
}

/* People who turn off motion still get the colors, just still */
@media (prefers-reduced-motion: reduce) {
  html::before, html::after { animation: none; }
}