/* 21/10: seta pontilhada que aponta para a barra de botões no fim da entrada.
   Mesmo estilo da seta "Role a página" (tracinhos azuis + ponta), caminho diferente.
   Aparece uma vez, sendo desenhada da cauda até a ponta; some (da cauda até a ponta) no primeiro clique num botão da barra.
   A posição é calculada em js/app/seta-barra.js a partir da barra; no celular o desenho é outro (arco curto, de cima). */
.seta-barra{position:fixed;left:0;top:0;z-index:9;pointer-events:none}
.seta-barra[hidden]{display:none}
.seta-barra .sb-desenho{display:none}
.seta-barra:not(.celular) .sb-pc,.seta-barra.celular .sb-cel{display:block}
.seta-barra svg{display:block;overflow:visible}
.sb-pontos{fill:none;stroke:var(--azul);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:5 6;stroke-dashoffset:-7}
/* A máscara revela o traço; o tracejado para um pouco antes da ponta (offset 9), como na seta original */
.sb-mascara{fill:none;stroke:#FFFFFF;stroke-width:10;stroke-linecap:butt;stroke-dasharray:100 200;stroke-dashoffset:100}
.sb-ponta{position:absolute;left:0;top:0;width:14px;height:14px;color:var(--azul);offset-anchor:78% 50%;offset-rotate:auto;offset-distance:0%;opacity:0}
.sb-ponta svg path{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
/* Entrada: desenha da cauda até a ponta e fica parada */
.seta-barra.desenha .sb-mascara{animation:sb-desenha 1.4s ease-in-out forwards}
.seta-barra.desenha .sb-ponta{animation:sb-ponta 1.4s ease-in-out forwards}
@keyframes sb-desenha{from{stroke-dasharray:100 200;stroke-dashoffset:100}to{stroke-dasharray:100 200;stroke-dashoffset:9}}
@keyframes sb-ponta{from{offset-distance:0%;opacity:1}to{offset-distance:100%;opacity:1}}
/* Saída: apaga da cauda para a cabeça (a ponta some por último) */
.seta-barra.apaga .sb-mascara{animation:sb-apaga 1.1s ease-in-out forwards}
.seta-barra.apaga .sb-ponta{animation:sb-ponta-sai 1.1s ease-in-out forwards}
@keyframes sb-apaga{from{stroke-dasharray:100 200;stroke-dashoffset:9}to{stroke-dasharray:0 200;stroke-dashoffset:-91}}
@keyframes sb-ponta-sai{0%,88%{offset-distance:100%;opacity:1}100%{offset-distance:100%;opacity:0}}
/* Reduzir movimento: aparece pronta e some de uma vez */
@media not all{
  .seta-barra.desenha .sb-mascara,.seta-barra.desenha .sb-ponta,.seta-barra.apaga .sb-mascara,.seta-barra.apaga .sb-ponta{animation:none}
  .seta-barra.desenha .sb-mascara{stroke-dashoffset:9}
  .seta-barra.desenha .sb-ponta{offset-distance:100%;opacity:1}
}