/*
 * Os quatro blocos lima do símbolo encaixam quando o link que contém o logo recebe o ponteiro ou o foco do teclado:
 * sobem cerca de 6% da altura do símbolo e assentam, um depois do outro. A animação nasce com o :hover, então roda
 * uma vez por entrada do ponteiro. Só `translate` anima; em SVG o px da transformação é a unidade do viewBox, e o
 * símbolo tem 322 unidades de altura (19 = 6%).
 */
@keyframes logo-encaixe {
  40% {
    translate: 0 -19px;
  }
}

.logo-bloco:nth-child(2) {
  --logo-atraso: 60ms;
}

.logo-bloco:nth-child(3) {
  --logo-atraso: 120ms;
}

.logo-bloco:nth-child(4) {
  --logo-atraso: 180ms;
}

@media (prefers-reduced-motion: no-preference) {
  a:hover .logo-bloco,
  a:focus-visible .logo-bloco {
    animation: logo-encaixe 280ms var(--ease-out) var(--logo-atraso, 0ms);
  }
}