CSS Animation - Not Working

Site URL: https://bywater-collective.squarespace.com/home

Hey y'all - This animation was working earlier, but has recently stopped and I can't figure out why. I've targeted the "Footer-blocks--bottom," using javascript to add a class of ".loading-next" once the user has scrolled to the bottom of the page, then the animation is applied that blinks between different background colors of the "Footer-blocks-bottom" and the h2  text. I can see on inspection, that the script is executing correctly - so it seems that the CSS is the problem.

I've played around, adding !important tags, and bringing the code to the bottom of the CSS block, using actual colors over the variables, but I can't get it to work... Any ideas appreciated! Thanks!

Site: https://bywater-collective.squarespace.com/home (PW: byctest)

.loading-next {
    -webkit-animation: loading01 8s ease-in-out 1 forwards;
            animation: loading01 8s ease-in-out 1 forwards;
  font-weight: 400 !important;
}

.loading-next h2 a {
    -webkit-animation: loading01 8s ease-in-out 1 forwards;
            animation: loading01 8s ease-in-out 1 forwards;
  font-weight: 400 !important;
}


@keyframes loading01 {
0% {
    opacity: 1;
  background-color: var(--color-f-bg-load-a) !important;
  }
  20% {
    opacity: 1;
    background-color: var(--color-f-bg-load-b) !important;
    color: var(--color-f-text-load) !important;
  }
  40% {
    opacity: 1;
      background-color: var(--color-f-bg-load-a) !important;
  }
  60% {
    opacity: 1;
    background-color: var(--color-f-bg-load-b) !important;
    color: var(--color-f-text-load) !important;
  }
  80% {
    opacity: 1;
    background-color: var(--color-f-bg-load-a) !important;
  }
  100% {
    opacity: 1;
    background-color: var(--color-f-bg-load-b) !important;
    color: var(--color-f-text-load) !important;
  }
}

Hi, Press F12, check tab Console you will some problems. Fix them first.