/* Aparência e animação do carrossel da home.
 *
 * Está num arquivo separado, e não dentro do template, porque é bastante
 * regra de estilo — e porque assim o navegador guarda o arquivo em cache e
 * não baixa de novo a cada página.
 *
 * ⚠️ A última regra do arquivo (prefers-reduced-motion) desliga TODA a
 * animação para quem pediu isso no sistema. Não é detalhe de etiqueta:
 * movimento na tela provoca enjoo e tontura em algumas pessoas, e o sistema
 * operacional já pergunta isso a elas. Se você acrescentar animação nova,
 * acrescente também lá embaixo.
 */

/* ── Temas ─────────────────────────────────────────────────────────────── */

/* ⚠️ 31/08/2026: os azuis de destaque daqui foram trocados pela paleta do
 * manual novo (#1683ff de ação, #2563eb de hover, #6fb4ff sobre escuro,
 * #071a33 de marinho). O fundo de palco (#02081a) NÃO mudou — ver a lição
 * logo abaixo: cor de palco e cor de marca são decisões separadas. */

/* ⚠️ Este `position: relative` disputa com a classe `absolute` do Tailwind,
 * que os slides também usam. As duas valem uma classe, ou seja, o mesmo peso —
 * então quem vence é o arquivo carregado por último.
 *
 * Por isso o base.html carrega ESTE arquivo ANTES do site.css. Invertendo, o
 * `relative` daqui ganha, os slides saem do empilhamento, o fundo escuro
 * encolhe até o tamanho do texto e as setas do carrossel caem na faixa branca
 * que sobra embaixo. O sintoma parece problema de altura do banner, e não de
 * ordem de arquivo — foi o que aconteceu em 24/08/2026. */
.tt-banner {
  position: relative;
  overflow: hidden;
}

/* ⚠️ Os nomes dos temas são de PAPEL, não de cor — "destaque" e não "azul".
 * Aprendido na troca de paleta de 24/08/2026: o tema do meio se chamava
 * "verde", e quando a marca deixou de ser verde o nome passou a mentir. Nome
 * de papel sobrevive à próxima troca de cor; nome de cor não.
 *
 * ⚠️ Estes nomes ficam gravados no banco (Banner.tema). Renomear um exige
 * atualizar as linhas que já existem — ver o alias de compatibilidade no fim
 * deste bloco. */

/* ⚠️ A LUZ DO BANNER É ÂMBAR, E O CHÃO CONTINUA MARINHO (11/09/2026).
 *
 * Escolhido pelo Alan comparando cinco propostas lado a lado numa página de
 * teste temporária, que foi apagada depois da escolha (está no histórico do
 * Git, no commit desta mudança, se alguém quiser ver as outras quatro).
 * A regra que faz isso conviver com o manual de marca: o quente entra como
 * LUZ, nunca como tinta de elemento clicável. O azul continua sendo a cor de
 * AÇÃO (botão, link), que é o princípio do manual. Se o âmbar virasse botão,
 * brigaria com o azul do resto do site e desfaria o sistema.
 *
 * Por que não mais azul sobre escuro: é o que toda loja de eletrônico faz.
 * Âmbar contra marinho é paleta de instrumento de medição, e é a luz do
 * alumínio da Apple em foto de produto — combina com "seminovo bem cuidado"
 * de um jeito que azul não combina.
 *
 * ⚠️ Lição de 24/08/2026, ainda válida: este fundo já esteve pintado com a cor
 * da MARCA da Techable, e estava errado — o banner deles não usa a cor da
 * marca. Cor de identidade (botão, logo, link) e cor de palco (o banner) são
 * decisões separadas: a primeira precisa de contraste para ser lida, a segunda
 * precisa ficar para trás. */

/* As três variáveis que cada tema define, e das quais tudo o mais deriva:
 *   --tt-acento      a luz da tela do aparelho e a varredura
 *   --tt-acento-txt  a etiqueta (precisa passar contraste sobre o fundo)
 *   --tt-linha       o traço do desenho técnico                            */

/* Escuro: a luz baixa, à direita, atrás do aparelho. É a versão que o Alan
 * escolheu, e a base das outras duas. */
.tt-tema-escuro {
  --tt-acento: #f2a33c;
  --tt-acento-txt: #f2b45c;
  --tt-linha: rgba(255, 255, 255, .30);
  background:
    radial-gradient(62% 95% at 80% 78%, rgba(242, 163, 60, .30) 0%, rgba(242, 163, 60, 0) 60%),
    radial-gradient(110% 130% at 20% 10%, #0a1e3c 0%, #02081a 70%);
  color: #ffffff;
}

/* Destaque: irmão mais quente e mais claro do escuro — luz mais alta e mais
 * forte, com o marinho abrindo em azul.
 *
 * ⚠️ Precisa ser visivelmente diferente do escuro: dos três banners no ar, DOIS
 * usam tema escuro e um usa destaque. Se os dois temas se parecessem, o
 * carrossel pareceria travado em vez de passando. */
.tt-tema-destaque {
  --tt-acento: #f2a33c;
  --tt-acento-txt: #f7c479;
  --tt-linha: rgba(255, 255, 255, .38);
  background:
    radial-gradient(70% 100% at 72% 38%, rgba(242, 163, 60, .42) 0%, rgba(242, 163, 60, 0) 62%),
    linear-gradient(118deg, #02081a 0%, #0a2a52 58%, #123f77 100%);
  color: #ffffff;
}

/* Alias do nome antigo. Existe só para um banner cadastrado antes da troca de
 * paleta não aparecer sem fundo nenhum. Pode sair quando não houver mais
 * nenhuma linha com tema="verde" no banco. */
.tt-tema-verde {
  --tt-acento: #f2a33c;
  --tt-acento-txt: #f7c479;
  --tt-linha: rgba(255, 255, 255, .38);
  background:
    radial-gradient(70% 100% at 72% 38%, rgba(242, 163, 60, .42) 0%, rgba(242, 163, 60, 0) 62%),
    linear-gradient(118deg, #02081a 0%, #0a2a52 58%, #123f77 100%);
  color: #ffffff;
}

/* Claro: dia. O branco é levemente quente para não brigar com o âmbar, e o
 * traço do aparelho vira marinho. Nenhum banner usa este tema hoje — ele fica
 * de pé porque o painel vai oferecer os três. */
.tt-tema-claro {
  --tt-acento: #d9822b;
  --tt-acento-txt: #a95d16;
  --tt-linha: rgba(7, 26, 51, .30);
  background: linear-gradient(135deg, #ffffff 0%, #f5f0e8 55%, #e9ddcc 100%);
  color: #071a33;
}

/* ⚠️ A etiqueta usa Orbitron, que é o uso que o manual de marca reserva para
 * ela: rótulo curto em CAIXA ALTA. É o único lugar do banner com a fonte de
 * título — o resto é Inter, inclusive o <h1>. Frase longa em Orbitron caixa
 * alta fica ilegível, então a etiqueta precisa continuar curta.
 *
 * O espaçamento cai no celular porque Orbitron é larga e a etiqueta do 1º
 * banner tem 4 palavras, no limite do que o manual recomenda. */
.tt-etiqueta {
  font-family: 'Orbitron', ui-sans-serif, system-ui, sans-serif;
  color: var(--tt-acento-txt);
  letter-spacing: .16em;
}

@media (max-width: 640px) {
  .tt-etiqueta { letter-spacing: .08em; }
}

.tt-tema-escuro .tt-subtitulo,
.tt-tema-destaque .tt-subtitulo,
.tt-tema-verde .tt-subtitulo { color: rgba(255, 255, 255, .78); }
.tt-tema-claro .tt-subtitulo { color: #475569; }

/* Botão principal */
.tt-botao-1 { background: #1683ff; color: #fff; }
.tt-botao-1:hover { background: #2563eb; }
.tt-tema-destaque .tt-botao-1,
.tt-tema-verde .tt-botao-1 { background: #fff; color: #071a33; }
.tt-tema-destaque .tt-botao-1:hover,
.tt-tema-verde .tt-botao-1:hover { background: rgba(255, 255, 255, .88); }

/* Botão secundário */
.tt-botao-2 {
  background: rgba(255, 255, 255, .10);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}
.tt-botao-2:hover { background: rgba(255, 255, 255, .20); }
.tt-tema-claro .tt-botao-2 { background: #fff; color: #071a33; box-shadow: inset 0 0 0 1px #cbd5e1; }

/* ── O aparelho em desenho técnico ─────────────────────────────────────── */

.tt-enfeites {
  position: absolute;
  inset: 0;
  pointer-events: none; /* nunca rouba o clique do botão */
  overflow: hidden;
}

/* ⚠️ 11/09/2026: aqui moravam DUAS manchas de luz borradas e QUATRO contornos
 * pequenos de aparelho flutuando. Saíram todos, e por motivo — não por enjoo:
 *
 *   1. o lado direito do banner era espaço morto num monitor de 1440px, e os
 *      enfeites pequenos não ancoravam nada;
 *   2. fundo escuro com borrão azul virou o visual mais copiado da internet, e
 *      o objetivo declarado do Alan é parecer empresa mais séria;
 *   3. um borrão grande com `filter: blur(90px)` é caro de desenhar a cada
 *      quadro, e agora a mesma luz vem de graça no degradê do tema.
 *
 * No lugar entrou UM desenho grande. A regra é a da Chanel: uma peça forte e o
 * resto quieto. Se voltar a acrescentar enfeite aqui, tire outra coisa. */

.tt-aparelho {
  position: absolute;
  top: 50%;
  height: auto;
  transform: translateY(-50%);
  color: var(--tt-linha);
}

/* ⚠️ CADA DESENHO TEM SEU TAMANHO E SUA POSIÇÃO, e isso é metade da variedade
 * entre os banners (11/09/2026). Com os três no mesmo lugar e no mesmo tamanho,
 * o carrossel parecia o mesmo banner três vezes mesmo com desenhos diferentes.
 * A outra metade é a luz, que muda por tema.
 *
 * ⚠️ O texto continua sempre à ESQUERDA nos três. Num carrossel que troca
 * sozinho a cada 6s, texto que pula de lado obriga o olho a se reencontrar a
 * cada troca — variedade ali viraria desconforto, não personalidade. */
.tt-aparelho-macbook   { right: 0%; width: 36rem; max-width: 52%; }
.tt-aparelho-imac-ipad { right: -3%; width: 38rem; max-width: 56%; }
.tt-aparelho-envio     { right:  4%; width: 26rem; max-width: 40%; top: 54%; }

/* A tela acesa e a grade de calibração. Ver o porquê do desenho no topo de
 * templates/_aparelho_tecnico.html. `tt-tela-luz` também pinta a etiqueta de
 * remessa da caixa de envio — é o que mantém os três desenhos na mesma
 * família. */
.tt-tela-luz   { fill: var(--tt-acento); opacity: .12; }
.tt-tela-grade { opacity: .5; }
.tt-rastro     { stroke: var(--tt-acento); opacity: .45; }

/* A varredura atravessa a tela e recomeça. Devagar de propósito: teste de
 * monitor é lento, e movimento rápido atrás do texto atrapalha ler o título.
 *
 * ⚠️ A distância vem de `--tt-varre-fim`, escrita no próprio elemento pelo
 * template, porque cada tela tem uma largura. Com um número fixo aqui, a
 * varredura pararia no meio da tela do iMac e passaria direto pela do iPad.
 *
 * ⚠️ O ATRASO DE 1,8s NÃO É ENFEITE: é o tempo do sorriso da marca se
 * desenhar. Sem ele, as duas animações disputam a mesma telinha no exato
 * momento da primeira impressão. Com ele vira uma sequência — a marca aparece,
 * e só então o teste começa a rodar. */
.tt-varredura {
  animation: tt-varre 5.5s ease-in-out 1.8s infinite;
}

@keyframes tt-varre {
  0%   { transform: translateX(-90px); opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateX(var(--tt-varre-fim, 392px)); opacity: 0; }
}

/* ── A marca TT na tela, e o sorriso que se desenha ─────────────────────── */

/* Os "T" são recortados do PNG do designer (ver _aparelho_tecnico.html). Ficam
 * mais presentes que o traço do desenho — é a marca, não textura de fundo. */
.tt-marca-tts { color: rgba(255, 255, 255, .62); }
.tt-tema-claro .tt-marca-tts { color: rgba(7, 26, 51, .62); }

/* ⚠️ O sorriso se desenha UMA VEZ POR VISITA, e nunca mais. Isto é deliberado:
 * a régua é que animação de encanto só se paga onde é rara. Como o carrossel
 * mantém TODOS os banners no HTML o tempo todo (só troca a opacidade), uma
 * animação de uma repetição só dispara no carregamento da página — e não a
 * cada volta do carrossel. Logotipo que se redesenha a cada 18 segundos deixa
 * de ser encanto e vira cutucão.
 *
 * ⚠️ Pelo mesmo motivo, a marca SÓ pode morar no 1º banner: é o único visível
 * quando a página abre. Nos outros, ela se desenharia escondida e ninguém
 * veria.
 *
 * ⚠️ Anima `stroke-dashoffset`, que repinta o traço a cada quadro em vez de
 * rodar na placa de vídeo como `transform` e `opacity`. É uma exceção
 * consciente: um recorte (`clip-path`) atravessando o arco deixaria a ponta da
 * linha CHANFRADA, e esta linha tem ponta redonda — o corte reto apareceria.
 * O custo é um caminho pequeno animando por 1,1s, uma vez. */
.tt-marca-sorriso {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: tt-desenha-sorriso 1.1s cubic-bezier(0.77, 0, 0.175, 1) .6s forwards;
}

@keyframes tt-desenha-sorriso {
  to { stroke-dashoffset: 0; }
}

/* No celular o desenho sai de cena: a tela é estreita e ele passaria por trás
 * do texto. Na faixa do meio ele recua para a borda e perde força, em vez de
 * sumir — some só quando não há mesmo espaço. */
@media (max-width: 640px) {
  .tt-aparelho { display: none; }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .tt-aparelho { right: -18%; opacity: .55; }
}

/* ── Quem pediu menos movimento, recebe menos movimento ────────────────── */
/* ⚠️ "Menos", e não "nenhum": o sorriso continua lá, inteiro e parado. Desligar
 * a animação sem desfazer o tracejado deixaria o sorriso INVISÍVEL — o desenho
 * ficaria sem a parte azul e ninguém entenderia que faltou algo. */
@media (prefers-reduced-motion: reduce) {
  .tt-varredura {
    animation: none !important;
  }
  .tt-marca-sorriso {
    animation: none !important;
    stroke-dashoffset: 0;
  }
}