/* Claudinho Bloquinho (bloquinho.js). Usa as animações gerais de personagens.css e acrescenta o jeito de blocos:
 * olhos que acendem (halo), piscada seca, boca de pixels que sobe e desce em degraus de um bloco. */
.cl-bloco { image-rendering: pixelated; }

/* olhos acendem quando ele aparece e ficam com um brilho que respira */
.cl-bloco .clb-halo { animation: clb-halo 2.8s ease-in-out infinite; }
.cl-bloco .cl-olhos { animation: clb-acende .9s steps(4, end) 1 both, clb-piscar 4.1s steps(1, end) .9s infinite; }
@keyframes clb-acende { 0% { opacity: 0; } 50% { opacity: .5; } 75% { opacity: .15; } 100% { opacity: 1; } }
@keyframes clb-piscar { 0%, 92%, 100% { transform: scaleY(1); } 93% { transform: scaleY(.5); } 95% { transform: scaleY(.1); } 97% { transform: scaleY(.5); } }
@keyframes clb-halo { 0%, 100% { opacity: .1; } 50% { opacity: .22; } }

/* boca de blocos: a boca fechada é um sorriso de pixels, a aberta vai de 1 a 3 blocos de altura */
.cl-bloco .cl-boca-aberta { transform-origin: 50% 0; }

/* OUVINDO: olhos bem acesos, ondas em blocos piscando */
[data-estado="ouvindo"] .cl-bloco .clb-halo { animation: clb-halo-forte 1.1s ease-in-out infinite; }
[data-estado="ouvindo"] .cl-bloco .cl-olhos { animation: clb-piscar 5.2s steps(1, end) infinite; transform: none; }
[data-estado="ouvindo"] .cl-bloco .cl-onda { animation: clb-onda 1.2s steps(3, end) infinite; transform: none; }
[data-estado="ouvindo"] .cl-bloco .cl-onda2 { animation-delay: .3s; }
@keyframes clb-halo-forte { 0%, 100% { opacity: .2; } 50% { opacity: .4; } }
@keyframes clb-onda { 0% { opacity: 0; } 34% { opacity: 1; } 100% { opacity: .2; } }

/* PENSANDO: olhar de lado, brilho tremeluz, blocos de pensamento subindo */
[data-estado="pensando"] .cl-bloco .cl-pupilas { transform: translate(8px, 0); transition: transform .3s steps(2, end); }
[data-estado="pensando"] .cl-bloco .cl-olhos { animation: clb-tremeluz 1.6s steps(1, end) infinite; }
[data-estado="pensando"] .cl-bloco .cl-pensa rect { transform-origin: center; animation: clb-bloco-sobe 1.2s steps(3, end) infinite; }
[data-estado="pensando"] .cl-bloco .cl-pensa rect:nth-child(2) { animation-delay: .2s; }
[data-estado="pensando"] .cl-bloco .cl-pensa rect:nth-child(3) { animation-delay: .4s; }
[data-estado="pensando"] .cl-bloco .cl-boca-fechada { transform: scaleX(.6); transform-origin: center; }
@keyframes clb-tremeluz { 0%, 100% { opacity: 1; } 40% { opacity: .55; } 55% { opacity: 1; } 80% { opacity: .75; } }
@keyframes clb-bloco-sobe { 0%, 100% { transform: translateY(0); opacity: .6; } 50% { transform: translateY(-4px); opacity: 1; } }

/* FALANDO: boca em degraus de bloco (1, 2 ou 3 de altura), olhos pulsam junto */
[data-estado="falando"] .cl-bloco .cl-boca-aberta { animation: clb-fala .9s infinite; }
[data-estado="falando"] .cl-bloco .clb-halo { animation: clb-halo-forte .45s ease-in-out infinite; }
@keyframes clb-fala {
  0% { transform: scaleY(.3334); animation-timing-function: steps(1, end); }
  15% { transform: scaleY(1); animation-timing-function: steps(1, end); }
  30% { transform: scaleY(.6667); animation-timing-function: steps(1, end); }
  45% { transform: scaleY(1); animation-timing-function: steps(1, end); }
  60% { transform: scaleY(.3334); animation-timing-function: steps(1, end); }
  75% { transform: scaleY(.6667); animation-timing-function: steps(1, end); }
  100% { transform: scaleY(.3334); }
}
/* boca no ritmo real da voz: arredonda para 1, 2 ou 3 blocos onde o navegador sabe arredondar */
[data-sinc="1"][data-estado="falando"] .cl-bloco .cl-boca-aberta { animation: none; transform: scaleY(calc(.3334 + var(--boca, 0) * .6666)); }
@supports (width: round(up, 1.2px, 1px)) {
  [data-sinc="1"][data-estado="falando"] .cl-bloco .cl-boca-aberta { transform: scaleY(calc(max(1, round(up, var(--boca, 0) * 3, 1)) / 3)); }
}

@media (prefers-reduced-motion: reduce) {
  .cl-bloco .cl-olhos, .cl-bloco .clb-halo, .cl-bloco .cl-onda, .cl-bloco .cl-pensa rect { animation: none !important; }
}

/* Tela "Escolha o seu Claudinho": o Bloquinho (padrão) vem primeiro, ocupando a linha toda */
.bv-grade .bv-cartao[data-id="bloco"] { grid-column: 1 / -1; }
.bv-grade .bv-cartao[data-id="bloco"] .bv-rosto { width: 52%; }