/* Tela de carregamento: uma linha vermelha e uma azul, desencontradas, se alinham numa linha branca
   enquanto a página carrega. Só aparece quando há JavaScript (classe is-loading no <html>). */

.loader {
  display: none;
}

.is-loading .loader,
.loader.is-leaving {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--black);
}

.loader.is-leaving {
  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms cubic-bezier(.16, 1, .3, 1);
}

.is-loading body {
  overflow: hidden;
}

.loader__focus {
  position: relative;
  width: min(240px, 56vw);
  height: 2px;
  /* 0 = desencontrado, 1 = alinhado; js/loader.js atualiza */
  --progress: 0;
}

.loader__line {
  position: absolute;
  inset: 0;
  mix-blend-mode: screen;
}

.loader__line--red {
  background: var(--signal-red);
  transform: translate(calc((1 - var(--progress)) * -22px), calc((1 - var(--progress)) * -5px));
}

.loader__line--blue {
  background: var(--optical-blue);
  transform: translate(calc((1 - var(--progress)) * 22px), calc((1 - var(--progress)) * 5px));
}

.loader__line--white {
  background: var(--white);
  transform: scaleX(var(--progress));
  transform-origin: 0 50%;
  mix-blend-mode: normal;
}

@media (prefers-reduced-motion: reduce) {
  .loader.is-leaving {
    transition: none;
  }

  .loader__line--red,
  .loader__line--blue {
    display: none;
  }

  .loader__line--white {
    transform: none;
  }
}