#content-body.jsj-ambient-bg,
#contendt-body.jsj-ambient-bg {
  --jsj-bg-cyan: #1096b2;
  --jsj-bg-teal: #0e93af;
  --jsj-bg-lime: #80bb45;
  --jsj-bg-red: #ec3c43;
  --jsj-bg-sky: #8ba4d9;
  --jsj-pointer-x: 0px;
  --jsj-pointer-y: 0px;
  --jsj-scroll-y: 0px;
  position: relative !important;
  isolation: isolate !important;
  overflow: clip !important;
  background: transparent !important;
}

#content-body.jsj-ambient-bg > *:not(.jsj-ambient-bg__layer),
#contendt-body.jsj-ambient-bg > *:not(.jsj-ambient-bg__layer) {
  position: relative !important;
  z-index: 2 !important;
}

#content-body.jsj-ambient-bg::before,
#contendt-body.jsj-ambient-bg::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 14% 84%, rgba(236, 60, 67, 0.78), transparent 23%),
    radial-gradient(circle at 86% 16%, rgba(174, 213, 68, 0.84), transparent 26%),
    radial-gradient(circle at 36% 52%, rgba(139, 164, 217, 0.38), transparent 20%),
    linear-gradient(135deg, var(--jsj-bg-cyan) 0%, var(--jsj-bg-teal) 48%, var(--jsj-bg-lime) 100%) !important;
  background-size: 140% 140%, 130% 130%, 125% 125%, 160% 160% !important;
  background-position:
    calc(50% + (var(--jsj-pointer-x) * 0.22)) calc(50% + (var(--jsj-pointer-y) * 0.18)),
    calc(50% + (var(--jsj-pointer-x) * -0.18)) calc(50% + (var(--jsj-pointer-y) * -0.2)),
    calc(50% + (var(--jsj-scroll-y) * 0.04)) calc(50% + (var(--jsj-pointer-y) * 0.08)),
    50% 50% !important;
  filter: saturate(1.08) brightness(0.98) !important;
  animation: jsjColorShift 34s ease-in-out infinite alternate !important;
}

#content-body.jsj-ambient-bg::after,
#contendt-body.jsj-ambient-bg::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.09), transparent 42%),
    linear-gradient(295deg, rgba(0, 0, 0, 0.08), transparent 44%) !important;
  mix-blend-mode: screen !important;
  opacity: 0.75 !important;
}

.jsj-ambient-bg__layer {
  position: absolute !important;
  inset: -8% !important;
  z-index: 1 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  will-change: transform, opacity, filter !important;
}

.jsj-ambient-bg__layer--aurora {
  background:
    radial-gradient(circle at 18% 26%, rgba(255, 255, 255, 0.24), transparent 18%),
    radial-gradient(circle at 82% 22%, rgba(151, 201, 60, 0.2), transparent 20%),
    radial-gradient(circle at 18% 82%, rgba(236, 60, 67, 0.16), transparent 18%),
    radial-gradient(circle at 56% 50%, rgba(16, 150, 178, 0.16), transparent 24%) !important;
  filter: blur(38px) saturate(1.1) !important;
  opacity: 0.9 !important;
  transform:
    translate3d(calc(var(--jsj-pointer-x) * 0.35), calc(var(--jsj-pointer-y) * 0.28), 0)
    translateY(calc(var(--jsj-scroll-y) * -0.06))
    scale(1.04) !important;
  animation: jsjAuroraFloat 22s ease-in-out infinite alternate !important;
}

.jsj-ambient-bg__layer--mesh {
  inset: 0 !important;
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.14), transparent 58%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px) !important;
  background-size: 100% 100%, 42px 42px, 42px 42px !important;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.75), transparent 92%) !important;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.75), transparent 92%) !important;
  opacity: 0.34 !important;
  transform:
    translate3d(calc(var(--jsj-pointer-x) * -0.12), calc(var(--jsj-pointer-y) * -0.08), 0)
    translateY(calc(var(--jsj-scroll-y) * 0.02)) !important;
}

.jsj-ambient-bg__layer--glow {
  inset: auto -12% -22% -12% !important;
  height: 48% !important;
  background:
    radial-gradient(circle at 18% 40%, rgba(236, 60, 67, 0.24), transparent 28%),
    radial-gradient(circle at 82% 36%, rgba(128, 187, 69, 0.22), transparent 30%),
    radial-gradient(circle at 54% 8%, rgba(255, 255, 255, 0.16), transparent 22%) !important;
  filter: blur(42px) !important;
  opacity: 0.84 !important;
  transform:
    translate3d(calc(var(--jsj-pointer-x) * 0.18), calc(var(--jsj-pointer-y) * 0.16), 0)
    translateY(calc(var(--jsj-scroll-y) * -0.09)) !important;
  animation: jsjGlowBreathe 18s ease-in-out infinite alternate !important;
}

@keyframes jsjColorShift {
  0% {
    background-position:
      46% 52%,
      54% 48%,
      50% 50%,
      50% 50%;
    filter: saturate(1.02) brightness(0.97);
  }

  100% {
    background-position:
      56% 46%,
      46% 56%,
      54% 46%,
      50% 50%;
    filter: saturate(1.12) brightness(1);
  }
}

@keyframes jsjAuroraFloat {
  0% {
    transform:
      translate3d(calc(var(--jsj-pointer-x) * 0.2), calc(var(--jsj-pointer-y) * 0.18), 0)
      translateY(calc(var(--jsj-scroll-y) * -0.03))
      scale(1.02);
    opacity: 0.78;
  }

  100% {
    transform:
      translate3d(calc(var(--jsj-pointer-x) * 0.42), calc(var(--jsj-pointer-y) * 0.32), 0)
      translateY(calc(var(--jsj-scroll-y) * -0.08))
      scale(1.08);
    opacity: 0.96;
  }
}

@keyframes jsjGlowBreathe {
  0% {
    opacity: 0.66;
    transform:
      translate3d(calc(var(--jsj-pointer-x) * 0.08), calc(var(--jsj-pointer-y) * 0.06), 0)
      translateY(calc(var(--jsj-scroll-y) * -0.04))
      scale(1);
  }

  100% {
    opacity: 0.92;
    transform:
      translate3d(calc(var(--jsj-pointer-x) * 0.24), calc(var(--jsj-pointer-y) * 0.18), 0)
      translateY(calc(var(--jsj-scroll-y) * -0.1))
      scale(1.08);
  }
}

@media (max-width: 991px) {
  #content-body.jsj-ambient-bg::before,
  #contendt-body.jsj-ambient-bg::before {
    background-size: 150% 150%, 150% 150%, 135% 135%, 180% 180% !important;
  }

  .jsj-ambient-bg__layer--aurora {
    filter: blur(30px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #content-body.jsj-ambient-bg::before,
  #contendt-body.jsj-ambient-bg::before,
  .jsj-ambient-bg__layer--aurora,
  .jsj-ambient-bg__layer--glow {
    animation: none !important;
  }
}