/* ==========================================================================
   ANON — mascote do interruptor de tema
   --------------------------------------------------------------------------
   Só o mascote. As cores do site (claro/escuro) estão em tema.css; o desenho e
   o comportamento estão em mascote.js. Este arquivo cuida de posição, tamanho e
   movimento.

   COMO USAR
     <link rel="stylesheet" href="/anonshield/tema.css">
     <link rel="stylesheet" href="/anonshield/mascote.css">
     <script src="/anonshield/mascote.js" defer></script>
   e um lugar para ele morar:
     <span data-as-mascote></span>
   Sem esse span, o mascote se instala sozinho no canto inferior direito.

   TAMANHO — mexa só nesta variável
     --as-mascote-altura: 76px;
   O desenho tem 152px de altura nativa, então 76px é metade. Vale saber o que
   se perde ao encolher: em 76px o emblema do peito fica com ~6px e não dá pra
   distinguir o cadeado. A silhueta, os olhos acesos e a lâmpada continuam
   legíveis. Em 152px tudo aparece.

   ANATOMIA DO BRAÇO (a parte que custou caro)
   O braço tem duas articulações encaixadas, como braço de verdade:
     .braco-ombro     gira em (64,76) — o ombro fica PRESO no corpo
     .braco-cotovelo  gira em (72,92) — vai DENTRO do grupo do ombro
   Encaixar um no outro resolve o cotovelo sozinho: quando o ombro gira, o
   cotovelo é levado junto.

   Puxar não é descer o braço, é ESTICAR: em repouso o cotovelo está 8,10px
   fora da linha ombro→mão; puxando, estende até 3,07px. É a extensão que
   empurra a mão para baixo. Descer o grupo inteiro movia o ombro e descolava
   do corpo.

   OS ÂNGULOS SÃO AMARRADOS ENTRE SI — não mexa em um só:
     ombro -10,74°  ·  cotovelo 32,58°  ·  cordão scaleY 1,1250
   Vieram de lei dos cossenos, com a mão em (91,96) e alvo em (91,101):
     distância ombro→alvo = raiz(27² + 25²) = 36,80
     cos = (17,89² + 36,80² - 19,42²) / (2·17,89·36,80) = 0,98511 → 9,90°
     braço novo = 42,79° + 9,90° = 52,69°, era 63,43° → ombro gira -10,74°
     antebraço em absoluto vai a 21,84°; dentro do grupo, gira 32,58°
   Resultado: a mão desce 5,01px com 0,01px de desvio horizontal — puxão a 90°.
   Por isso o cordão só estica (1,1250 = 45/40) e não torce.

   Limite descoberto no caminho: os dois segmentos somam 37,31px, o que em
   x=91 trava a descida em 5,7px. Pedir mais é pedir um braço que não fecha.
   ========================================================================== */

:root {
  --as-mascote-altura: 76px;
}

/* --------------------------------------------------------------------------
   O BOTÃO
   É <button> de verdade: Tab chega nele, Enter aciona, aria-pressed diz o
   estado. Não é <div> com clique.
   -------------------------------------------------------------------------- */
/* O !important AQUI TEM MOTIVO, não é preguiça.
   O tema deste site tem 631 regras que dão fundo a botão, muitas com
   !important. Sem forçar, o Anon aparecia dentro de uma caixinha azul
   arredondada — herdada de uma regra genérica de `button` que eu não escrevi e
   não controlo. Reset de aparência contra CSS de terceiro é o caso em que
   !important é a ferramenta certa.
   Só as propriedades de APARÊNCIA levam !important. Tamanho e posição não, para
   continuar sendo possível ajustar de fora. */
.as-mascote {
  appearance: none;
  -webkit-appearance: none;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  padding: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: auto !important;
  height: auto !important;
  margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: inline-block;
  line-height: 0;
  flex: none;
}

/* hover e active tambem: o tema costuma trocar o fundo nesses estados */
.as-mascote:hover,
.as-mascote:active,
.as-mascote:focus {
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  transform: none !important;
}

.as-mascote svg {
  display: block;
  height: var(--as-mascote-altura);
  width: auto;
  overflow: visible;              /* o "zzz" sai um pouco da moldura */
  background: none !important;
  filter: none !important;
}

.as-mascote:focus { outline: none; }
.as-mascote:focus-visible {
  outline: 3px solid #8fd0f0;
  outline-offset: 3px;
  border-radius: 10px;
}

/* quando não há lugar indicado, ele se instala no canto */
.as-mascote--canto {
  position: fixed;
  right: 16px;
  bottom: 14px;
  z-index: 999999;
}

/* --------------------------------------------------------------------------
   NO CABEÇALHO DO SITE
   Ele entra na div .b1-actions, a mesma que segura "Conta" e "Carrinho".

   O PROBLEMA DE TAMANHO, dito com franqueza: o cabeçalho tem ~66px de altura e
   o desenho tem 152px. Em 64px o Anon fica pequeno — a silhueta, os olhos
   acesos e a lâmpada continuam legíveis, mas o emblema do peito cai para ~5px e
   o cadeado não se distingue. É o preço de estar no cabeçalho.

   As margens negativas deixam ele passar um pouco da linha da barra sem
   ESTICAR a altura do cabeçalho. Margem negativa é o que permite um elemento
   mais alto morar numa linha mais baixa sem empurrar o resto.

   Se preferir ver o Anon inteiro, troque uma variável só:
     --as-mascote-altura: 152px    (e aumente as margens negativas)
   ou tire ele do cabeçalho e deixe no canto, onde cabe no tamanho cheio.
   -------------------------------------------------------------------------- */
.b1-actions .as-mascote {
  --as-mascote-altura: 64px;
  margin: -6px 0 -6px 12px;
  position: relative;
  z-index: 5;
}

/* em tela estreita o cabeçalho já está apertado: some com ele para não
   atropelar a busca e o carrinho. O tema continua funcionando — quem estiver
   no escuro segue no escuro, só não tem onde clicar. */
@media (max-width: 780px) {
  .b1-actions .as-mascote { display: none; }
}

/* --------------------------------------------------------------------------
   A LÂMPADA
   Acesa no claro, apagada no escuro.
   -------------------------------------------------------------------------- */
.lamp-vidro {
  fill: #dfe4e8;
  stroke: #b6c0c8;
  stroke-width: 1.6;
  transition: fill .22s ease, stroke .22s ease;
}
.lamp-filamento {
  stroke: #b0bac2;
  stroke-width: 1.4;
  fill: none;
  transition: stroke .22s ease;
}
.lamp-brilho { opacity: 0; transition: opacity .22s ease; }
.lamp-raios {
  opacity: 0;
  transition: opacity .22s ease;
  stroke: #f0c04a;
  stroke-width: 2;
  stroke-linecap: round;
}
html[data-tema="claro"] .lamp-vidro     { fill: #ffd76a; stroke: #e0ac2e; }
html[data-tema="claro"] .lamp-filamento { stroke: #b07d12; }
html[data-tema="claro"] .lamp-brilho    { opacity: .45; }
html[data-tema="claro"] .lamp-raios     { opacity: .85; }

/* --------------------------------------------------------------------------
   O PUXÃO
   -------------------------------------------------------------------------- */
.braco-ombro {
  transform-origin: 64px 76px;        /* OMBRO: preso no corpo */
  transition: transform .22s cubic-bezier(.34, 1.4, .64, 1);
}
.as-mascote.puxando .braco-ombro { transform: rotate(-10.74deg); }

.braco-cotovelo {
  transform-origin: 72px 92px;        /* COTOVELO */
  transition: transform .22s cubic-bezier(.34, 1.4, .64, 1);
}
.as-mascote.puxando .braco-cotovelo { transform: rotate(32.58deg); }

/* o cordão só estica: a mão desce reto, então não há por que torcer */
.cordao-corpo {
  fill: #97a3ad;
  transform-origin: 91px 56px;
  transition: transform .22s cubic-bezier(.34, 1.4, .64, 1);
}
.as-mascote.puxando .cordao-corpo { transform: scaleY(1.125); }

/* a bolinha está a 69px do topo: 69 × 1,125 = 77,63, ou seja 8,63px mais
   baixo. Quanto mais longe do ponto fixo, mais desloca. */
.cordao-ponta {
  fill: #8a97a3;
  transition: transform .22s cubic-bezier(.34, 1.4, .64, 1);
}
.as-mascote.puxando .cordao-ponta { transform: translateY(8.63px); }

/* --------------------------------------------------------------------------
   VIDA QUANDO ESTÁ PARADO
   Só se move o que NÃO toca o cordão. Se o braço que puxa balançasse, a mão
   descolaria da linha.
   -------------------------------------------------------------------------- */
@keyframes as-bracinho {
  0%, 100% { transform: rotate(-4.5deg); }
  50%      { transform: rotate(6deg); }
}
@keyframes as-bracinho-cotovelo {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(4.5deg); }
}
@keyframes as-perninhas {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}
@keyframes as-cabecinha {
  0%, 100% { transform: rotate(-1.2deg); }
  50%      { transform: rotate(1.2deg); }
}

.braco-livre {
  animation: as-bracinho 2.3s ease-in-out infinite;
  transform-origin: 20px 76px;        /* OMBRO esquerdo */
}
/* delay NEGATIVO: começa a animação já no meio, em vez de esperar. É o que faz
   o antebraço ficar atrasado em relação ao braço — jeito que membro solto se
   move. Delay positivo travaria ele parado no primeiro instante. */
.braco-livre-cotovelo {
  animation: as-bracinho-cotovelo 2.3s ease-in-out infinite;
  animation-delay: -0.4s;
  transform-origin: 15px 92px;        /* COTOVELO esquerdo */
}
.pernas {
  animation: as-perninhas 3s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: top center;
}
.cabeca {
  animation: as-cabecinha 4.2s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: bottom center;
}

/* --------------------------------------------------------------------------
   ACORDADO NO CLARO, DORMINDO NO ESCURO
   -------------------------------------------------------------------------- */
.olho-aberto  { transition: opacity .2s ease; }
.olho-fechado { opacity: 0; transition: opacity .2s ease; }
html[data-tema="escuro"] .olho-aberto  { opacity: 0; }
html[data-tema="escuro"] .olho-fechado { opacity: 1; }

.zzz { opacity: 0; transition: opacity .3s ease .1s; }
html[data-tema="escuro"] .zzz { opacity: .8; }

/* --------------------------------------------------------------------------
   TROCA DE TEMA INSTANTÂNEA
   --------------------------------------------------------------------------
   Esta regra faz par com a função trocar() do mascote.js: ela põe a classe
   `as-sem-transicao` no <html>, troca o tema, e tira a classe dois quadros
   depois. Nesses dois quadros nada anima, então a página vira de uma vez.

   Por que isso é necessário: com transição de cor, cada elemento repinta no seu
   ritmo e o olho lê como se o site escurecesse POR PARTES. Fica pior que a troca
   seca.

   Por que não desligar transição para sempre: o site tem transições legítimas —
   hover de link, slider do filtro, sugestões da busca, acordeão. Desligar tudo
   deixa o site morto ao toque. Congelar só durante a troca resolve as duas
   coisas.

   O mascote é reexcluído: o braço precisa continuar descendo suave no mesmo
   clique. Classe vence seletor universal, então a segunda regra ganha.
   -------------------------------------------------------------------------- */
html.as-sem-transicao *,
html.as-sem-transicao *::before,
html.as-sem-transicao *::after {
  transition: none !important;
  animation-duration: 0s !important;
}
html.as-sem-transicao .as-mascote,
html.as-sem-transicao .as-mascote * {
  transition: transform .22s cubic-bezier(.34, 1.4, .64, 1),
              opacity .2s ease, fill .22s ease, stroke .22s ease !important;
  animation-duration: revert !important;
}

/* --------------------------------------------------------------------------
   QUEM PEDIU MENOS MOVIMENTO, RECEBE MENOS MOVIMENTO
   A lista cita .braco-ombro e .braco-cotovelo. A versão anterior ainda citava
   .braco-puxa, classe que deixou de existir quando o braço ganhou as duas
   articulações — ou seja, o puxão continuava animando para quem pediu
   prefers-reduced-motion, sem ninguém notar.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .braco-livre,
  .braco-livre-cotovelo,
  .pernas,
  .cabeca {
    animation: none !important;
  }
  .braco-ombro,
  .braco-cotovelo,
  .cordao-corpo,
  .cordao-ponta,
  .lamp-vidro,
  .lamp-brilho,
  .lamp-raios,
  .lamp-filamento,
  .olho-aberto,
  .olho-fechado,
  .zzz {
    transition: none !important;
  }
}