/* ═══════════════════════════════════════════════════════════════════════ Movimento. Cinco efeitos, teto da casa e nem um a mais. Quatro sao infraestrutura (guiam leitura, confirmam clicavel, dao peso a numero real). O quinto e a assinatura, e existe em UM elemento do site. Regra estrutural: nenhum opacity:0 no CSS base esperando o JS revelar. Tudo aqui esta atras de html.js, marcado por um script inline de uma linha no . JS desligado, ou JS que quebrou: o conteudo aparece. ═══════════════════════════════════════════════════════════════════════ */ /* ── 1. reveal on scroll com stagger ───────────────────────────────────── O basico. Guia a leitura de cima pra baixo. Conta como UM efeito, nao importa em quantas secoes apareca. */ .js [data-surge]{ opacity:0; transform:translateY(18px); transition:opacity var(--dur-3) ease, transform var(--dur-3) var(--ease-saida); } .js [data-surge].is-visivel{ opacity:1; transform:none; /* --i reinicia a cada 6 pra lista longa nao acumular 2s de atraso */ transition-delay:calc(var(--i,0) * 80ms); } /* ── 2. profundidade no hover de card ──────────────────────────────────── Confirma que o card e clicavel. O @media (hover:hover) evita o estado grudado depois do toque no celular, que e o bug classico aqui. */ .card,.servico,.post,.tema{ transition:transform var(--dur-2) var(--ease-saida), box-shadow var(--dur-2) ease, border-color var(--dur-2) ease; } @media (hover:hover){ .card:hover,.servico:hover,.post:hover,.tema:hover{ transform:translateY(-4px); box-shadow:var(--el-2); border-color:var(--borda-forte); } } /* ── 3. header reagindo ao scroll ──────────────────────────────────────── ATENCAO: nada de backdrop-filter, filter, transform ou will-change aqui. Qualquer um deles num ancestral cria containing block novo e faz a gaveta position:fixed grudar na altura do header em vez de cobrir a tela. Ja quebrou em producao duas vezes. Fundo solido resolve. */ .topo{ transition:padding var(--dur-2) ease, box-shadow var(--dur-2) ease, background-color var(--dur-2) ease; } .topo.is-densa{ padding-block:10px; background:var(--superficie); box-shadow:0 1px 0 var(--borda); } /* ── 4. contagem de numero ─────────────────────────────────────────────── Da peso a numero real. O JS vive em js/main.js. Aqui so a reserva de espaco: sem largura tabular o layout pula durante a contagem e vira CLS. A fonte mono ja resolve, isto e o cinto de seguranca. */ [data-num],.calc__valor{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; } /* ── 5. ASSINATURA: feixe na borda do resultado da calculadora ─────────── Origem: border-beam (MagicUI). Aproveitado o mecanismo, descartado o resto. O componente original e React + motion, e vem com colorFrom #ffaa40 / colorTo #9c40ff, laranja pra roxo, que e exatamente a familia de gradiente banida no anti-ia.md. As cores aqui sao a areia e a ameixa do kit dela. Duas decisoes deliberadas de design: a) NAO fica em loop. Dispara quando o resultado aparece, roda duas voltas e para numa borda estatica. Feixe eterno e decoracao, e o catalogo diz que border beam em loop e o efeito que mais grita template. Feixe que roda no instante em que o numero chega marca o momento da resposta, que e o unico motivo pra ele existir. b) Existe em UM elemento do site inteiro. Se aparecer num segundo, virou template. */ @property --feixe-ang{ syntax:""; initial-value:0deg; inherits:false; } .calc__painel{ position:relative; border-radius:var(--r-painel); isolation:isolate; } .calc__painel::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; background:var(--borda-inversa); /* recorta so o anel: preenche a caixa toda, subtrai o miolo */ -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; } .calc__painel.tem-resultado::before{ background:conic-gradient( from var(--feixe-ang), transparent 0%, transparent 62%, var(--destaque-inverso) 84%, var(--pl-200) 93%, transparent 100% ); animation:feixe 1.4s linear 2; } @keyframes feixe{ to{ --feixe-ang:360deg; } } /* ── fallback de movimento reduzido ────────────────────────────────────── Fallback REAL, nao "animation:none" deixando o elemento invisivel porque o estado inicial era opacity:0. Cada regra abaixo devolve o elemento ao estado final. */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .js [data-surge], .js [data-surge].is-visivel{ opacity:1; transform:none; transition:none; transition-delay:0s; } .card,.servico,.post,.tema{transition:none} @media (hover:hover){ .card:hover,.servico:hover,.post:hover,.tema:hover{ transform:none; box-shadow:var(--el-1); } } .topo{transition:none} .calc__painel.tem-resultado::before{ animation:none; background:var(--destaque-inverso); } } /* ═══════════════════════════════════════════════════════════════════════ ESTRELAS NO HERO Pedido explicito, fora do catalogo padrao de 5 efeitos. Portado do mecanismo REAL do @animate-ui/components-backgrounds-stars (github.com/imskyleen/animate-ui, registry/components/backgrounds/stars), nao reinterpretado. La dentro, o "StarLayer" nao anima estrela por estrela: e uma unica camada com centenas de pontos desenhados via box-shadow (zero custo de DOM por ponto), com DUAS copias empilhadas (uma em top:0, outra em top:2000px) dentro de uma altura fixa de 2000px. A camada inteira anima de translateY(0) ate translateY(-2000px) em velocidade linear e loop infinito: quando a primeira copia sai por cima, a segunda ja esta exatamente na posicao dela, e o loop reinicia sem costura visivel. Nao existe opacidade individual por estrela, nem ponto nascendo ou sumindo: e a camada inteira derivando pra cima pra sempre, devagar. Tres camadas com tamanho/densidade/velocidade diferentes dao a sensacao de profundidade (a de pontos maiores anda mais devagar). A unica coisa que fica de fora, de proposito e por pedido explicito: o parallax de mouse do componente original (springX/springY seguindo o cursor). Aqui nao existe listener de mouse nenhum. Densidade reduzida em relacao ao original (que e pensado pra fundo de pagina inteira, 1000+400+200 pontos): aqui e um hero, nao uma tela cheia, entao ficou mais esparso por proposito de design, mantendo o mecanismo identico. */ .hero__estrelas{ position:absolute;inset:0;overflow:hidden; pointer-events:none;z-index:0; } .hero__camada{ position:absolute;top:0;left:0;width:100%;height:2000px; animation-name:deriva-estrelas; animation-timing-function:linear; animation-iteration-count:infinite; } .hero__camada__pt{ position:absolute;top:0;left:0;width:1px;height:1px; background:transparent;border-radius:50%; } .hero__camada__pt--2{top:2000px} @keyframes deriva-estrelas{ from{transform:translateY(0)} to{transform:translateY(-2000px)} } @media (prefers-reduced-motion:reduce){ .hero__camada{animation:none} }