/* Animações exclusivas dos atalhos do cabeçalho público. */
.cabecalho .cabecalho-atalhos .icone-cabecalho {
  overflow:visible;
  pointer-events:none;
}
.cabecalho .cabecalho-atalhos :is(a,button):is(:hover,:focus-visible) > .icone-cabecalho {
  animation:none;
}
.cabecalho .icone-cabecalho .mercadoria {opacity:0;}
.cabecalho .icone-cabecalho .carrinho-desenho {transform-origin:12px 17px;}
.cabecalho .icone-cabecalho .estrela-desenho {transform-origin:12px 12px;}
.cabecalho .icone-cabecalho .login-braco {opacity:0;transform:rotate(65deg);transform-origin:17px 15px;}
.cabecalho .icone-cabecalho .login-cabeca {transform-origin:12px 12px;}
.cabecalho .icone-cabecalho .logout-porta {transform-origin:4px 12px;transform:scaleX(.12);}

/* Três pacotes entram na cesta; o carrinho reage com um balanço curto. */
.cabecalho .carrinho-acesso:not(.favoritos-acesso):is(:hover,:focus-visible) .mercadoria {
  animation:fn-pacote-caindo 1.05s cubic-bezier(.3,.1,.6,1) both;
}
.cabecalho .carrinho-acesso:not(.favoritos-acesso):is(:hover,:focus-visible) .mercadoria-dois {animation-delay:.16s;}
.cabecalho .carrinho-acesso:not(.favoritos-acesso):is(:hover,:focus-visible) .mercadoria-tres {animation-delay:.32s;}
.cabecalho .carrinho-acesso:not(.favoritos-acesso):is(:hover,:focus-visible) .carrinho-desenho {
  animation:fn-carrinho-tremida 1.4s ease-in-out both;
}
@keyframes fn-pacote-caindo {
  0% {opacity:0;transform:translateY(-14px) rotate(-15deg);}
  12% {opacity:1;}
  40% {opacity:1;transform:translateY(5px) rotate(8deg);}
  49% {opacity:0;transform:translateY(9px) rotate(0);}
  100% {opacity:0;transform:translateY(9px);}
}
@keyframes fn-carrinho-tremida {
  0%,18%,100% {transform:translateX(0) rotate(0);}
  28% {transform:translateX(-1.2px) rotate(-5deg);}
  38% {transform:translateX(1.2px) rotate(5deg);}
  48% {transform:translateX(-1px) rotate(-4deg);}
  58% {transform:translateX(1px) rotate(4deg);}
  70% {transform:translateX(-.6px) rotate(-2deg);}
  82% {transform:translateX(.4px) rotate(1deg);}
}

.cabecalho .favoritos-acesso:is(:hover,:focus-visible) .estrela-desenho {
  animation:fn-estrela-girando .9s cubic-bezier(.2,.7,.25,1) both;
}
@keyframes fn-estrela-girando {
  0% {transform:rotate(0) scale(1);}
  45% {transform:rotate(190deg) scale(1.18);filter:drop-shadow(0 0 3px #ffe8a3);color:#ffe8a3;}
  100% {transform:rotate(360deg) scale(1);}
}

.cabecalho [data-sessao-cliente]:is(:hover,:focus-visible) .login-braco {
  animation:fn-login-aceno 1.15s ease-in-out both;
}
.cabecalho [data-sessao-cliente]:is(:hover,:focus-visible) .login-cabeca {
  animation:fn-login-cabeca 1.15s ease-in-out both;
}
@keyframes fn-login-aceno {
  0% {opacity:0;transform:rotate(65deg);}
  20% {opacity:1;transform:rotate(0);}
  35%,65% {opacity:1;transform:rotate(-23deg);}
  50%,80% {opacity:1;transform:rotate(12deg);}
  100% {opacity:1;transform:rotate(0);}
}
@keyframes fn-login-cabeca {
  0%,100% {transform:rotate(0);}
  25%,75% {transform:rotate(-7deg);}
}

/* A seta sai primeiro; a folha da porta fecha em seguida. */
.cabecalho [data-sessao-cliente]:is(:hover,:focus-visible) .logout-seta {
  animation:fn-logout-seta 1.15s cubic-bezier(.3,0,.7,1) both;
}
.cabecalho [data-sessao-cliente]:is(:hover,:focus-visible) .logout-porta {
  animation:fn-logout-porta 1.15s ease-in-out both;
}
@keyframes fn-logout-seta {
  0%,10% {opacity:1;transform:translateX(0);}
  24% {opacity:1;transform:translateX(-2px);}
  48%,100% {opacity:0;transform:translateX(13px);}
}
@keyframes fn-logout-porta {
  0%,42% {transform:scaleX(.12);}
  78% {transform:scaleX(1);}
  88% {transform:scaleX(.95);}
  100% {transform:scaleX(1);}
}

@media (prefers-reduced-motion:reduce) {
  .cabecalho .cabecalho-atalhos :is(a,button):is(:hover,:focus-visible) .icone-cabecalho,
  .cabecalho .cabecalho-atalhos :is(a,button):is(:hover,:focus-visible) .icone-cabecalho * {
    animation:none!important;
  }
}