/*
 * Ícones a lápis da Obliq: o relógio das poses.
 *
 * Cada SVG em dist/ é uma tira de poses do tamanho do ícone:
 *   DESENHO (a última é o desenho pronto, que é o estado parado) + 2 do VIVO + 12 da AÇÃO.
 * Quase todos têm 7 poses de desenho (--il-n: 7). A assinatura de 32 e 64 tem 12, porque o lápis
 * escreve de verdade, e a ação dela é essa escrita: nela use também a classe il-n12 (o componente
 * React já põe sozinho).
 * A pose troca a cada 125 ms (3 quadros a 24 fps), em degrau: sem easing, sem fade.
 * O tremor (vivo) já corre DENTRO do desenho e da ação: cada pose usa a variante da vez.
 *
 * Uso:  <span class="il il-32" style="background-image:url(/icones-lapis/estoque-32.svg)"></span>
 *   (nada)          parado: o desenho pronto. É o padrão.
 *   il--desenho     o lápis traça o ícone e a linha segue viva em laço
 *   il--acao        o ícone faz o que ele significa (1,5 s) e a linha segue viva em laço
 *   il--breve       junto com um dos dois: o vivo para depois de uns 2 s (7,5 voltas) e volta ao parado
 *                   (para a entrada de uma página, que não pode ficar fervendo para sempre)
 *   il--vivo        só a linha viva, em laço
 *   il--vivo-hover  vivo só com o ponteiro em cima (dele ou de quem tem .il-pai)
 * O VIVO troca de variante a cada 2 quadros (83 ms) em todo lugar: entrada, hover, notificação. O
 * vivo de 3 quadros (125 ms) foi aposentado em 25/09 (lia como ruído). O desenho e a ação seguem
 * em poses de 125 ms. il--notificacao continua aceita, sem efeito.
 */
.il {
  --il-s: 32px;
  --il-n: 7;
  --il-p: 6;
  display: inline-block;
  flex: none;
  width: var(--il-s);
  height: var(--il-s);
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: calc(var(--il-s) * var(--il-p) * -1) 0;
  vertical-align: middle;
}
.il-20 { --il-s: 20px; }
.il-32 { --il-s: 32px; }
.il-64 { --il-s: 64px; }
.il-n12 { --il-n: 12; --il-p: 11; }

.il--desenho {
  animation:
    il-desenho calc(var(--il-n) * 125ms) steps(var(--il-n), jump-none) both,
    il-vivo 250ms steps(3, jump-end) calc((var(--il-n) - 1) * 125ms) infinite; /* entra na pose pronta: nenhuma pose dura 250 ms */
}
.il--acao {
  animation:
    il-acao 1500ms steps(12, jump-none) backwards,
    il-vivo 250ms steps(3, jump-end) 1500ms infinite;
}
/* a ação da assinatura de 32 e 64 é o lápis escrevendo (as mesmas 12 poses do desenho) */
.il-n12.il--acao {
  animation:
    il-desenho 1500ms steps(12, jump-none) both,
    il-vivo 250ms steps(3, jump-end) 1375ms infinite;
}
.il--breve { animation-iteration-count: 1, 7.5; } /* o vivo breve: ~1,9 s */

/* il--notificacao ficou sem efeito: desde 25/09 o vivo de 83 ms é o vivo de todo lugar (a classe
   continua aceita para nada quebrar) */
/* o hover não atropela um desenho ou uma ação em andamento (o clique num link com hover) */
.il--vivo,
.il--vivo-hover:not(.il--acao):not(.il--desenho):hover,
.il-pai:hover .il--vivo-hover:not(.il--acao):not(.il--desenho) { animation: il-vivo 250ms steps(3, jump-end) infinite; }

/* sobre fundo de tinta (o botão escuro): o desenho sai na cor do papel. O filtro inverte a tinta
   #1B1814 para perto de #E4E7EB e o sépia a esquenta de volta para o papel. */
.il--papel { filter: invert(1) sepia(0.25) brightness(1.04); }

/* esperando a vez de entrar (o componente React põe isto): o papel fica em branco até a mão chegar */
.il[data-il='espera'] { visibility: hidden; }

@keyframes il-desenho {
  from { background-position: 0 0; }
  to { background-position: calc(var(--il-s) * var(--il-p) * -1) 0; }
}
@keyframes il-vivo {
  from { background-position: calc(var(--il-s) * var(--il-p) * -1) 0; }
  to { background-position: calc(var(--il-s) * (var(--il-p) + 3) * -1) 0; }
}
@keyframes il-acao {
  from { background-position: calc(var(--il-s) * (var(--il-p) + 3) * -1) 0; }
  to { background-position: calc(var(--il-s) * (var(--il-p) + 14) * -1) 0; }
}

/* quem pediu menos movimento vê o desenho pronto, sempre */
@media (prefers-reduced-motion: reduce) {
  .il, .il--desenho, .il--acao, .il--vivo, .il--vivo-hover:hover, .il-pai:hover .il--vivo-hover {
    animation: none !important;
    background-position: calc(var(--il-s) * var(--il-p) * -1) 0 !important;
  }
}