:root{
  --ssk-bg-purple: rgba(124,58,237,.22);
  --ssk-bg-teal: rgba(20,184,166,.16);
  --ssk-bg-pink: rgba(236,72,153,.10);
}

/* Animated background (front-end) */
body.ssk-animated-bg{
  background:
    radial-gradient(900px 520px at 12% 8%, var(--ssk-bg-purple), transparent 60%),
    radial-gradient(860px 520px at 92% 18%, var(--ssk-bg-teal), transparent 58%),
    radial-gradient(720px 520px at 50% 98%, var(--ssk-bg-pink), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #fbf7ff 40%, #ffffff 100%);
  background-size: 160% 160%;
  background-attachment: fixed;
  animation: sskBgShift 18s ease-in-out infinite;
}

/* If the theme uses a page wrapper, animate there too for better coverage */
body.ssk-animated-bg #page,
body.ssk-animated-bg .site{
  background: transparent;
}

body.ssk-animated-bg:before,
body.ssk-animated-bg:after{
  content:"";
  position: fixed;
  inset: -20%;
  pointer-events: none;
  z-index: 0;
  filter: blur(22px);
  opacity: .55;
  transform: translate3d(0,0,0);
}

body.ssk-animated-bg:before{
  background:
    radial-gradient(420px 320px at 18% 22%, rgba(124,58,237,.22), transparent 65%),
    radial-gradient(460px 340px at 82% 18%, rgba(34,211,238,.18), transparent 65%),
    radial-gradient(520px 380px at 62% 78%, rgba(236,72,153,.10), transparent 70%);
  animation: sskBlobA 22s ease-in-out infinite;
}

body.ssk-animated-bg:after{
  background:
    radial-gradient(520px 400px at 26% 72%, rgba(20,184,166,.14), transparent 68%),
    radial-gradient(520px 400px at 76% 70%, rgba(167,139,250,.16), transparent 68%),
    radial-gradient(520px 400px at 50% 28%, rgba(250,204,21,.08), transparent 70%);
  animation: sskBlobB 26s ease-in-out infinite;
}

/* Keep content above the animated overlays */
body.ssk-animated-bg #page,
body.ssk-animated-bg .site,
body.ssk-animated-bg #content,
body.ssk-animated-bg #primary,
body.ssk-animated-bg .site-header,
body.ssk-animated-bg .site-footer,
body.ssk-animated-bg #masthead,
body.ssk-animated-bg #colophon{
  position: relative;
  z-index: 1;
}

@keyframes sskBgShift{
  0%{background-position: 0% 0%;}
  50%{background-position: 100% 55%;}
  100%{background-position: 0% 0%;}
}

@keyframes sskBlobA{
  0%{transform: translate3d(-2%, -1%, 0) scale(1);}
  50%{transform: translate3d(2%, 2%, 0) scale(1.02);}
  100%{transform: translate3d(-2%, -1%, 0) scale(1);}
}

@keyframes sskBlobB{
  0%{transform: translate3d(2%, 2%, 0) scale(1.01);}
  50%{transform: translate3d(-2%, -1%, 0) scale(1);}
  100%{transform: translate3d(2%, 2%, 0) scale(1.01);}
}

@media (prefers-reduced-motion: reduce){
  body.ssk-animated-bg{
    animation: none;
  }
  body.ssk-animated-bg:before,
  body.ssk-animated-bg:after{
    animation: none;
  }
}

@media (max-width: 767px){
  /* Mobile Safari can get "seams" with fixed backgrounds; let it scroll smoothly. */
  body.ssk-animated-bg{
    background-attachment: scroll;
  }
}