.header-animated-bg {
  z-index: 0;
  animation: animated-bg 60s ease infinite;

  --bg-animated-1: #dccaf3;
  --bg-animated-2: #b2f0e4;
}

/* Allows dark-reader to show frontpage: https://nav-it.slack.com/archives/C7NE7A8UF/p1704272426011129 */
[data-darkreader-scheme] .header-animated-bg {
  animation: none;
}

@keyframes animated-bg {
  0% {
    background-color: var(--bg-animated-1);
  }

  10% {
    background-color: var(--bg-animated-1);
  }

  33% {
    background-color: var(--bg-animated-1);
  }

  45% {
    background-color: var(--bg-animated-2);
  }

  60% {
    background-color: var(--bg-animated-2);
  }

  90% {
    background-color: var(--bg-animated-1);
  }

  100% {
    background-color: var(--bg-animated-1);
  }
}

.animation-stop,
.animation-stop *,
.animation-stop *::before,
.animation-stop *::after {
  animation-delay: -1ms !important;
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  background-attachment: initial !important;
  scroll-behavior: auto !important;
  transition-duration: 0s !important;
  transition-delay: 0s !important;
}
