/* =====================================================================
   COMPONENTE · nota-manuscrita
   Anotação à mão (fonte manuscrita, inclinada) com uma seta de traço que se
   desenha sozinha e aponta para o que importa: os cards, o botão.
   A seta fica fora da rotação do texto e é medida em em: acompanha o tamanho.
     --seta-baixo     sai de baixo do começo do texto e curva para baixo e à esquerda
     --seta-direita   sai de cima do fim da 1ª linha e curva para a direita
   Variáveis: --nm-tamanho (fonte), --nm-giro (inclinação), --nm-recuo (recuo da 2ª linha),
   --nm-cor (padrão --cor-destaque-claro), --nm-atraso-seta.
   Desenho da seta: entra com a base/entrada.js (data-entrada na nota). Sem ela, ou com
   reduzir movimento, a seta já aparece pronta.
   ===================================================================== */
.nota-manuscrita{position:relative;display:inline-block;pointer-events:none;white-space:nowrap;
  font:400 var(--nm-tamanho,clamp(28px,2.9vw,46px))/.85 var(--fonte-manuscrita,cursive);
  color:var(--nm-cor,var(--cor-destaque-claro))}
.nota-manuscrita__texto{display:inline-block;transform:rotate(var(--nm-giro,-8deg));transform-origin:0 0}
.nota-manuscrita__texto > span{display:block}
.nota-manuscrita__texto > span + span{margin-left:var(--nm-recuo,.6em)}
.nota-manuscrita__seta{position:absolute;overflow:visible}
.nota-manuscrita__seta path{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nota-manuscrita--seta-baixo .nota-manuscrita__seta{left:-1.09em;top:1.52em;width:1.96em;height:2.09em}
.nota-manuscrita--seta-direita .nota-manuscrita__seta{left:3.03em;top:-1.44em;width:2.41em;height:.82em}

.nota-manuscrita.is-visto .nota-manuscrita__seta path{stroke-dasharray:1;
  animation:nota-manuscrita-desenhar .65s cubic-bezier(.6,.05,.3,1) var(--nm-atraso-seta,.35s) backwards}
.nota-manuscrita.is-visto .nota-manuscrita__seta path + path{animation-delay:calc(var(--nm-atraso-seta,.35s) + .5s)}
@keyframes nota-manuscrita-desenhar{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.nota-manuscrita.is-visto .nota-manuscrita__seta path{animation:none}}