/* HTML: <div class="loader"></div> */

/* This is got from https://css-loaders.com/line/#l16 */
.loader {
  width: 60px;
  height: 16px;
  display: grid;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

.loader:before,
.loader:after {
  content: "";
  grid-area: 1/1;
  --c:no-repeat linear-gradient(var(--primary-color) 0 0);
  background: var(--c), var(--c), var(--c);
  animation: l16-1 1.5s infinite linear, l16-2 1.5s infinite linear;
  transform: scale(var(--s,1)) translate(3px,-3px);
}

.loader:after {
  --s:-1;
}

@keyframes l16-1 {
  0%,
  3%    {background-size: 0    4px,4px 0   ,0    4px}
  16.67%{background-size: 100% 4px,4px 0   ,0    4px}
  33.33%{background-size: 100% 4px,4px 100%,0    4px}
  46%,
  54%   {background-size: 100% 4px,4px 100%,100% 4px}
  66.67%{background-size: 0    4px,4px 100%,100% 4px}
  83.33%{background-size: 0    4px,4px 0   ,100% 4px}
  96%,
  100%  {background-size: 0    4px,4px 0   ,0    4px}
}

@keyframes l16-2 {
  0%,49.9%{background-position: 0    0,100% 0   ,100% 100%}
  50%,100%{background-position: 100% 0,100% 100%,0    100%}
}

/* Additional CSS to hide main content initially */
body.loading main,
body.loading footer {
  display: none;
}

/* Blurry background */
.loader-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  z-index: 9998;
}