/* entrance animations */

.f-fr-right,
.f-fr-left {
  transition: transform 1.5s ease, opacity 1s ease;
}

.f-delayed {
  transition: opacity 1s ease 0.5s;
}

.s-trig.set-up .f-fr-right,
.s-trig.set-up .f-fr-left,
.s-trig.set-up .f-delayed {
  transition: none;
  opacity: 0;
}

.s-trig.set-up .f-fr-right {
  transform: translate3d(10%, 0, 0);
}

.s-trig.set-up .f-fr-left {
  transform: translate3d(-10%, 0, 0);
}

/* animated gradient background */

@keyframes cta-gradient-1 {
  0% {
    transform: translate3d(-25%, -25%, 0);
  }
  50% {
    transform: translate3d(10%, 10%, 0);
  }
  100% {
    transform: translate3d(-25%, -25%, 0);
  }
}

@keyframes cta-gradient-2 {
  0% {
    transform: translate3d(25%, -25%, 0);
  }
  50% {
    transform: translate3d(-10%, 10%, 0);
  }
  100% {
    transform: translate3d(25%, -25%, 0);
  }
}

@keyframes cta-gradient-3 {
  0% {
    transform: translate3d(0, 50%, 0);
  }
  50% {
    transform: translate3d(10, 50%, 0);
  }
  100% {
    transform: translate3d(0, 50%, 0);
  }
}

#gradient-anim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: blur(8px);
}

#gradient-anim .gradient {
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  background-image: url("../webp/bg-multicolor-underglow.webp");
  background-size: 100% 100%;
}

#gradient-anim:not(.disabled) .gradient:nth-child(1) {
  animation: cta-gradient-1 20s ease-in-out infinite;
}

#gradient-anim.disabled .gradient:nth-child(1) {
  transform: translate3d(-25%, -25%, 0);
}

#gradient-anim:not(.disabled) .gradient:nth-child(2) {
  animation: cta-gradient-2 20s ease-in-out infinite;
}

#gradient-anim.disabled .gradient:nth-child(2) {
  transform: translate3d(25%, -25%, 0);
}

#gradient-anim:not(.disabled) .gradient:nth-child(3) {
  animation: cta-gradient-3 20s ease-in-out infinite;
}

#gradient-anim.disabled .gradient:nth-child(3) {
  transform: translate3d(0, 50%, 0);
}

@media (prefers-reduced-motion: reduce) {
  #gradient-anim .gradient {
    animation: none !important;
  }
}