Login Mascote

Tenho o modelo "Login Mascote" da Modelos Prontos na pasta login-mascote/ (index.html, estilo.css, script.js e LEIAME.md). Quero adaptá-lo à minha marca.

Minha marca:
- Nome: [nome]
- Cor principal: [hex] · cor de apoio: [hex]
- Fonte: [nome da fonte ou "manter"]
- Tom dos textos: [ex.: direto e amigável]

O que fazer:
1. Leia o LEIAME.md e o estilo.css; troque as cores e fontes pelas variáveis do :root (não espalhe cores soltas pelo CSS).
2. Troque os textos de exemplo pelos meus, em português do Brasil.
3. Coloque meu logo: [cole o SVG aqui ou diga o arquivo].
4. Mantenha animações, acessibilidade (contraste AA, foco visível) e prefers-reduced-motion.
5. Abra o index.html no navegador e confira em 1440px e 390px, sem rolagem horizontal.
Me mostre um resumo do que mudou.

Quero colocar o modelo "Login Mascote" (pasta login-mascote/: index.html, estilo.css, script.js) dentro do meu projeto.

Meu projeto usa: [React + Vite / Next.js (App Router) / Vue / WordPress / HTML puro] e [Tailwind / CSS Modules / CSS comum].
Onde colocar: [página ou componente, ex.: src/pages/Login.tsx].

O que fazer:
1. Leia o LEIAME.md e entenda HTML, CSS e JS do modelo.
2. Transforme em componente(s) do meu framework, mantendo o mesmo visual e TODO o comportamento (animações, teclado, toque).
3. Mantenha o CSS com as classes prefixadas (evita conflito) ou converta para o padrão do meu projeto, sem perder nada.
4. Troque manipulação direta do DOM por estado/efeitos do framework quando fizer sentido; limpe listeners e timers ao desmontar.
5. Rode o projeto, abra a página e confira no desktop e no celular.
Liste os arquivos criados e alterados.

Quero ligar o "Login Mascote" a um backend de verdade.

Backend: [Supabase Auth / Firebase / minha API em URL tal / outro].

O que fazer:
1. Leia o LEIAME.md e o script.js e localize onde o envio é simulado.
2. Troque a simulação pela chamada real (login, cadastro, recuperação de senha ou verificação de código — o que o modelo tiver).
3. Mostre os erros do servidor nas mensagens acessíveis que o modelo já tem (aria-live), sem quebrar as animações de carregando/sucesso/erro.
4. Redirecione para [URL depois do sucesso].
5. Nada de chave secreta no front-end: use só chaves públicas e me explique o que configurar no painel do serviço.

Revise o modelo "Login Mascote" que adaptei (pasta login-mascote/) antes de eu publicar:
1. Abra no navegador em 1440px, 768px e 390px: nada cortado, sobreposto ou com rolagem horizontal.
2. Navegue só pelo teclado (Tab, Enter, Esc, setas): tudo alcançável e com foco visível.
3. Contraste AA nos textos e botões; aria-label nos ícones; mensagens de erro anunciadas.
4. Console sem erros; sem console.log esquecido; sem recursos externos além das fontes.
5. Com "reduzir movimento" ligado no sistema, a tela continua bonita e usável.
Corrija o que encontrar e me diga o que foi corrigido.