body.site {
  background: #f7f8fa;
}

.site-background {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.98), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #eff1f4 36%, #d5dae2 100%);
}

.site-background::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    linear-gradient(120deg, transparent 0 42%, rgba(255, 255, 255, 0.72) 48%, transparent 56%),
    linear-gradient(300deg, transparent 0 38%, rgba(210, 214, 220, 0.36) 46%, transparent 58%);
  filter: blur(34px);
  animation: alutron-bg-sheen 18s ease-in-out infinite alternate;
}

.site-background .oval {
  position: absolute;
  width: var(--w);
  height: var(--h);
  left: var(--x);
  top: var(--y);
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 35% 28%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.45) 42%, transparent 72%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(190, 196, 205, 0.26));
  border: 1px solid rgba(255, 255, 255, 0.64);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 28px 90px rgba(121, 131, 145, 0.18);
  filter: blur(var(--blur));
  opacity: var(--opacity);
  transform: translate3d(0, 0, 0) rotate(var(--r));
  animation: alutron-bg-drift var(--duration) ease-in-out infinite alternate;
  animation-delay: var(--delay);
}

.site-background .oval::after {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: inherit;
  background: url("/images/ES/alulogow.jpg") center / contain no-repeat;
  mix-blend-mode: multiply;
  opacity: 0.2;
}

.site-background .oval:nth-child(1) {
  --w: 560px;
  --h: 230px;
  --x: -8%;
  --y: 10%;
  --r: -18deg;
  --blur: 1px;
  --opacity: 0.74;
  --duration: 5s;
  --delay: -2s;
}

.site-background .oval:nth-child(2) {
  --w: 720px;
  --h: 300px;
  --x: 54%;
  --y: 6%;
  --r: 20deg;
  --blur: 3px;
  --opacity: 0.58;
  --duration: 6.5s;
  --delay: -6s;
}

.site-background .oval:nth-child(3) {
  --w: 620px;
  --h: 260px;
  --x: 18%;
  --y: 60%;
  --r: -8deg;
  --blur: 2px;
  --opacity: 0.62;
  --duration: 5.8s;
  --delay: -10s;
}

.site-background .oval:nth-child(4) {
  --w: 460px;
  --h: 190px;
  --x: 72%;
  --y: 64%;
  --r: -24deg;
  --blur: 6px;
  --opacity: 0.44;
  --duration: 7.2s;
  --delay: -4s;
}

.body-wrapper,
.body-innerwrapper,
#sp-main-body {
  background: transparent;
}

@keyframes alutron-bg-drift {
  0% {
    transform: translate3d(-36px, 24px, 0) rotate(var(--r)) scale(0.96);
  }

  100% {
    transform: translate3d(84px, -72px, 0) rotate(calc(var(--r) + 14deg)) scale(1.08);
  }
}

@keyframes alutron-bg-sheen {
  0% {
    transform: translate3d(-4%, -2%, 0) rotate(0deg);
    opacity: 0.72;
  }

  100% {
    transform: translate3d(4%, 3%, 0) rotate(8deg);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-background::before,
  .site-background .oval {
    animation: none;
  }
}