/*
 * Boot loader animation for the UI modules, loaded by their index.html before the bundle runs.
 * The bars have to be animating already, so the module can phase-align them with the Preloader
 * component from @piwikpro/ui-components - any difference between the two makes the handover
 * from the boot loader to Preloader jump. Colors are hardcoded because the theme tokens are
 * loaded with the bundle and do not exist yet at boot time.
 */

#initial-loader .bars {
  display: flex;
  gap: 10px;
}

#initial-loader .bars > div,
#initial-loader .bars > div > div {
  display: block;
  width: 12px;
  height: 72px;
  border-radius: 6px;
  animation-duration: 3375ms;
  animation-timing-function: cubic-bezier(0.29, 0, 0.32, 1);
  animation-iteration-count: infinite;
}

#initial-loader .bars > div {
  overflow: hidden;
}

#initial-loader .bars > div > div {
  background-color: #107ef1;
}

@media (prefers-color-scheme: dark) {
  #initial-loader .bars > div > div {
    background-color: #80acff;
  }
}

:root[data-initial-loader-theme="light"] #initial-loader .bars > div > div {
  background-color: #107ef1;
}

:root[data-initial-loader-theme="dark"] #initial-loader .bars > div > div {
  background-color: #80acff;
}

#initial-loader .bars > div:nth-child(2n),
#initial-loader .bars > div:nth-child(2n) > div {
  animation-timing-function: cubic-bezier(0.29, 0, 0, 0.98);
}

#initial-loader .bars > div:nth-child(1) {
  animation-name: barMove1;
}

#initial-loader .bars > div:nth-child(1) > div {
  animation-name: fillMove1;
}

#initial-loader .bars > div:nth-child(2) {
  animation-name: barMove2;
}

#initial-loader .bars > div:nth-child(2) > div {
  animation-name: fillMove2;
}

#initial-loader .bars > div:nth-child(3) {
  animation-name: barMove3;
}

#initial-loader .bars > div:nth-child(3) > div {
  animation-name: fillMove3;
}

#initial-loader .bars > div:nth-child(4) {
  animation-name: barMove4;
}

#initial-loader .bars > div:nth-child(4) > div {
  animation-name: fillMove4;
}

#initial-loader .bars > div:nth-child(5) {
  animation-name: barMove5;
}

#initial-loader .bars > div:nth-child(5) > div {
  animation-name: fillMove5;
}

@keyframes barMove1 {
  0%,
  17.78%,
  81.48%,
  100% {
    transform: translateY(0);
  }

  32.59%,
  34.07% {
    transform: translateY(-60px);
  }

  48.89%,
  66.67% {
    transform: translateY(-12px);
  }
}

@keyframes fillMove1 {
  0%,
  1.48%,
  32.59%,
  34.07%,
  65.19%,
  66.67%,
  97.78%,
  100% {
    transform: translateY(60px);
  }

  16.3%,
  17.78% {
    transform: translateY(0);
  }

  48.89%,
  50.37% {
    transform: translateY(24px);
  }

  81.48%,
  82.96% {
    transform: translateY(48px);
  }
}

@keyframes barMove2 {
  0%,
  19.26%,
  76.54%,
  100% {
    transform: translateY(0);
  }

  32.59%,
  48.4% {
    transform: translateY(-36px);
  }

  61.73%,
  63.21% {
    transform: translateY(-60px);
  }
}

@keyframes fillMove2 {
  0%,
  4.44%,
  32.59%,
  33.58%,
  61.73%,
  63.21%,
  90.86%,
  100% {
    transform: translateY(60px);
  }

  17.78%,
  19.26% {
    transform: translateY(24px);
  }

  46.91%,
  48.4% {
    transform: translateY(36px);
  }

  76.54%,
  77.53% {
    transform: translateY(0);
  }
}

@keyframes barMove3 {
  0%,
  7.41%,
  46.91%,
  100% {
    transform: translateY(0);
  }

  19.26%,
  21.23% {
    transform: translateY(-18px);
  }

  33.09%,
  35.06% {
    transform: translateY(-48px);
  }
}

@keyframes fillMove3 {
  0%,
  7.41%,
  33.09%,
  35.06%,
  61.23%,
  100% {
    transform: translateY(60px);
  }

  19.26%,
  21.23% {
    transform: translateY(36px);
  }

  46.91%,
  49.38% {
    transform: translateY(24px);
  }
}

@keyframes barMove4 {
  0%,
  25.68%,
  84.94%,
  100% {
    transform: translateY(0);
  }

  39.01%,
  40.99% {
    transform: translateY(-60px);
  }

  54.32%,
  71.6% {
    transform: translateY(-36px);
  }
}

@keyframes fillMove4 {
  0%,
  10.37%,
  39.01%,
  40.99%,
  69.63%,
  71.6%,
  99.75%,
  100% {
    transform: translateY(60px);
  }

  23.7%,
  25.68% {
    transform: translateY(0);
  }

  54.32%,
  56.3% {
    transform: translateY(36px);
  }

  84.94%,
  86.42% {
    transform: translateY(24px);
  }
}

@keyframes barMove5 {
  0%,
  13.33%,
  90.86%,
  100% {
    transform: translateY(0);
  }

  31.11%,
  33.09% {
    transform: translateY(-12px);
  }

  50.86%,
  52.84% {
    transform: translateY(-60px);
  }

  70.62%,
  73.09% {
    transform: translateY(-18px);
  }
}

@keyframes fillMove5 {
  0%,
  13.33%,
  50.86%,
  52.84%,
  90.86%,
  100% {
    transform: translateY(60px);
  }

  31.11%,
  33.09% {
    transform: translateY(12px);
  }

  70.62%,
  73.09% {
    transform: translateY(36px);
  }
}