/* ============================================================================ IDENTIDADE TPDPLAY - fundos de IA e tecnologia Depende de tokens.css. Tudo em CSS puro: nenhuma imagem, nenhuma requisicao externa. Foto-real (laboratorio, retrato tratado) e outro departamento - isso e ComfyUI, skill `operar-comfyui`. A REGRA QUE MANDA AQUI: fundo NUNCA come texto. Todo fundo sob texto leva `.veu` junto - e o veu que devolve o contraste medido dos tokens. Publico 45+: um fundo bonito que baixa a legibilidade e um fundo REPROVADO. ========================================================================= */ /* Base: todo fundo vive num container marcado. O conteudo sobe pra z-index 1. */ .fundo { position: relative; overflow: hidden; background: var(--fundo); } /* ARMADILHA PROVADA, TRES VEZES (21/08/2026): a versao antiga desta regra era `.fundo > *` — ela subia TODO filho pra position:relative e ANULAVA o posicionamento de quem ja se posicionava sozinho. Mordeu tres vezes: 1) a secao .rede apareceu VAZIA (nos e arestas perderam o absolute); 2) o selo da marca foi parar no meio da lateral em vez do topo; 3) enfeites soltos (.particula, .meteoro) ficaram fora de lugar. Sempre em SILENCIO — nenhum erro, so o elemento no lugar errado. A cura nao e caçar excecao com :not(): e parar de mirar em `*`. O conteudo sobe por NOME. Quem nao e conteudo, a regra nem toca. */ .fundo > .trilho, .fundo > .conteudo { position: relative; z-index: 2; } .camada { position: absolute; inset: 0; z-index: 0; pointer-events: none; } /* O VEU - obrigatorio sob qualquer texto. Protege o contraste medido dos tokens. ARMADILHA PROVADA (21/08/2026): a primeira versao deste veu era um radial CLARO no centro e ESCURO nas bordas - exatamente ao contrario do que serve. Resultado: apagava o fundo inteiro (aurora e circuito sumiram) e ainda por cima protegia o texto de menos. O veu tem que ser FORTE ONDE O TEXTO ESTA (centro) e FRACO NA BORDA, que e onde o fundo tem licenca pra aparecer. */ .veu { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 76% 62% at center, rgba(5,18,28,.84) 0%, rgba(5,18,28,.70) 44%, rgba(5,18,28,.32) 74%, rgba(5,18,28,0) 100%); } .veu.forte { background: radial-gradient(ellipse 84% 70% at center, rgba(5,18,28,.93) 0%, rgba(5,18,28,.84) 46%, rgba(5,18,28,.46) 76%, rgba(5,18,28,.08) 100%); } /* ARMADILHA PROVADA (21/08): hero de DUAS COLUNAS com veu centrado deixa o texto (que fica na lateral) desprotegido - o glow do .horizonte subiu atras do subtitulo e derrubou o corpo de 22px pra 4,25:1, REPROVANDO. O veu tem que cobrir ONDE O TEXTO ESTA, e nem sempre isso e o centro. */ /* .veu.alto - pro hero em que o FUNDO tem um foco EMBAIXO (o campo de filamentos). Aqui o veu centrado e o veu forte fazem a coisa errada: eles apagam justamente a convergencia, que e o assunto do fundo. Provado na tela: com `.veu.forte` os fios sumiram do centro e sobrou canto vazio. Este veu e pesado EM CIMA (onde o titulo e o subtitulo estao) e abre embaixo, deixando o foco brilhar atras do botao - que tem fundo solido proprio e nao depende do veu pra ter contraste. */ /* Nao e faixa, e ELIPSE em cima do BLOCO DE TEXTO. Foi a terceira tentativa e a unica que serve as duas coisas ao mesmo tempo: . faixa forte no topo -> texto salvo (4,82:1), fios de cima apagados . faixa fraca no topo -> fios lindos, texto em 3,36:1 (reprova a meta) . elipse sobre o texto -> texto salvo E cantos livres pros fios O veu tem que cobrir ONDE O TEXTO ESTA - aqui isso e uma mancha no meio de cima, nao a metade superior inteira. */ .veu.alto { background: radial-gradient(ellipse 62% 50% at 50% 34%, rgba(5,18,28,.94) 0%, rgba(5,18,28,.90) 46%, rgba(5,18,28,.52) 76%, rgba(5,18,28,0) 100%); } .veu.esquerda { background: linear-gradient(100deg, rgba(5,18,28,.92) 0%, rgba(5,18,28,.86) 42%, rgba(5,18,28,.44) 66%, rgba(5,18,28,0) 88%); } .veu.direita { background: linear-gradient(260deg, rgba(5,18,28,.92) 0%, rgba(5,18,28,.86) 42%, rgba(5,18,28,.44) 66%, rgba(5,18,28,0) 88%); } /* ---- POR QUE OS PADROES SO EXISTEM DENTRO DE .camada ------------------ ARMADILHA PROVADA (21/08/2026): .malha, .grade, .pontos, .circuito e .grao usam `mask-image`. Mascara aplicada no CONTAINER mascara o CONTEUDO junto — o texto da secao literalmente se apaga numa diagonal, sem erro nenhum. Aconteceu na primeira renderizacao desta skill (secao do metodo). Por isso eles sao `.camada.x` e nao `.x`: aplicar no
nao faz nada, em vez de comer a sua copy. Padrao vai SEMPRE numa
. Os que podem ir no container (nao usam mask): .aurora .horizonte .varredura ------------------------------------------------------------------- */ /* ---- 1. MALHA EM PERSPECTIVA (o "chao de dados") --------------------- O fundo tech mais legivel de todos: linhas finas fugindo pro horizonte. Use na base da secao, nunca atras de paragrafo. */ .camada.malha { background-image: linear-gradient(rgba(44,196,255,.30) 1px, transparent 1px), linear-gradient(90deg, rgba(44,196,255,.30) 1px, transparent 1px); background-size: 64px 64px; transform: perspective(340px) rotateX(62deg) scale(2.4); transform-origin: center 100%; mask-image: linear-gradient(to top, #000 0%, transparent 72%); -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 72%); } /* ---- 2. GRADE CHAPADA (blueprint) ------------------------------------ A mesma malha sem perspectiva: le como papel tecnico. Boa atras de card. */ .camada.grade { background-image: linear-gradient(rgba(159,196,218,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(159,196,218,.16) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at center, #000 20%, transparent 78%); -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 78%); } /* ---- 3. MATRIZ DE PONTOS ---------------------------------------------- Mais discreta que a grade. Boa como textura geral da pagina inteira. */ .camada.pontos { background-image: radial-gradient(rgba(44,196,255,.34) 1px, transparent 1px); background-size: 26px 26px; mask-image: radial-gradient(ellipse at 50% 40%, #000 10%, transparent 72%); -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 10%, transparent 72%); } /* ---- 4. AURORA / MESH GRADIENT (a "nuvem de IA") --------------------- Tres manchas de cor difusas. E o fundo que mais parece IA sem ser clichê de circuito. Usa a familia da marca ate o roxo Exocad. */ .aurora::before, .aurora::after, .aurora > .brilho { content: ""; position: absolute; border-radius: 50%; filter: blur(120px); } .aurora::before { width: 620px; height: 460px; top: -140px; left: 8%; background: rgba(0,138,212,.55); } .aurora::after { width: 520px; height: 420px; top: 10%; right: 4%; background: rgba(107,67,239,.42); } .aurora > .brilho { width: 460px; height: 380px; bottom: -160px; left: 38%; background: rgba(71,58,109,.55); } /* ---- 5. CIRCUITO (traco de placa) ------------------------------------ Cantos retos e nos nas juncoes. Le como hardware/maquina - combina com o discurso de fresadora e impressora. */ .camada.circuito { background-image: linear-gradient(90deg, rgba(44,196,255,.26) 2px, transparent 2px), linear-gradient(rgba(107,67,239,.22) 2px, transparent 2px), linear-gradient(90deg, rgba(44,196,255,.13) 1px, transparent 1px); background-size: 180px 180px, 180px 180px, 60px 60px; background-position: 0 0, 0 0, 30px 30px; mask-image: linear-gradient(120deg, #000 0%, transparent 68%); -webkit-mask-image: linear-gradient(120deg, #000 0%, transparent 68%); } /* ---- 6. REDE NEURAL (nos + arestas) ----------------------------------- Marque a vontade; as arestas sao os ::before. */ .rede .no-rede { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--ciano); box-shadow: 0 0 12px rgba(44,196,255,.55); animation: tpd-no-rede 4.2s ease-in-out infinite; } .rede .aresta { position: absolute; height: 1px; transform-origin: left center; background: linear-gradient(90deg, rgba(44,196,255,.34), rgba(107,67,239,.10)); } @keyframes tpd-no-rede { 0%, 100% { transform: scale(1); opacity: .45 } 50% { transform: scale(1.7); opacity: .95 } } /* ---- 7. VARREDURA (scan lento) --------------------------------------- Uma faixa de luz que desce devagar. Sugere leitura/processamento. 12s: qualquer coisa mais rapida vira estrobo e incomoda. */ .varredura::after { content: ""; position: absolute; left: 0; right: 0; height: 220px; background: linear-gradient(to bottom, transparent, rgba(44,196,255,.10), transparent); animation: tpd-varre 12s linear infinite; } @keyframes tpd-varre { from { top: -220px } to { top: 100% } } /* ---- 8. GRAO (tira o "chapado" do fundo escuro) ----------------------- SVG inline em data-uri: continua sendo zero requisicao externa. Aplique na pagina inteira, opacidade baixa. Faz muita diferenca em tela grande, onde o preto liso cria banding. */ .camada.grao { opacity: .85; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml;utf8,\ \ \ "); } /* ---- 10. POLIGONOS: A PONTE ENTRE AS DUAS ESPECIES -------------------- O simbolo-mestre da identidade. Poligono e como a MAQUINA enxerga forma (malha de triangulos) e e exatamente o que o EXOCAD mostra na tela do protetico todo dia. Nao e enfeite tech: e o oficio dele escrito na minha gramatica. "A tecnologia nao veio tomar o emprego, veio estender a mao." LEVE DE PROPOSITO: publico 55+, geracao pre-computador. Malha densa vira sala de servidor e INTIMIDA quem a gente quer acolher. Poucos vertices, traco fino, muito respiro. Gerado por `fundos/_gerar-poligonos.py`. */ .camada.poligonos { background-image: url("./fundos/poligonos-campo.svg"); background-size: 900px 600px; opacity: 1; mask-image: radial-gradient(ellipse at 50% 45%, #000 8%, transparent 74%); -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 8%, transparent 74%); } /* ============================================================================ 🔴 LINHA VERMELHA (HB, 21/08/2026) - NADA DE DENTE COM RAIZ. O `.dente-malha` (molar com raizes) foi CONSTRUIDO E DESCARTADO no mesmo dia. Raiz, implante e parafuso sao o mundo do DENTISTA. O TPDPlay fala com PROTESE - e protese e sorriso, anatomia de ANTERIORES, superficie. E o ponto que decide tudo: a peca vive FORA DA BOCA. O cliente do protetico nao e quem usa a protese; e o DENTISTA que contrata a construcao da peca que ele vai instalar. Toda imagem nossa mostra a PECA, na bancada. O conceito de POLIGONO continua valendo - o que estava errado era o objeto. Direcao certa: `referencias/03-imagem-arcada.png` - arcada de anteriores, metade malha (o CAD) e metade peca real, dissolvendo em particulas. O arquivo velho esta em `referencias/descartado/`, com o motivo ao lado. A classe abaixo existe so pra GRITAR se alguem tentar usar de novo. ========================================================================= */ .dente-malha { display: block; min-width: 180px; min-height: 90px; border: 2px dashed #FF8A8A; border-radius: 12px; background: rgba(255,138,138,.08); } .dente-malha::after { content: "SIMBOLO DESCARTADO - dente com raiz e odontologia, nao protese. Ver referencias/descartado/"; display: block; padding: 12px 16px; color: #FF8A8A; font: 700 14px/1.4 var(--f-texto); text-align: center; } /* ---- 11. REDE VIVA (canvas) — nos QUE SE CONECTAM --------------------- O fundo so de pontinhos ficou estranho (HB 21/08): rede sem aresta nao e rede, e confete. A ligacao nasce da DISTANCIA entre os nos e e recalculada a cada quadro — no que se aproxima acende a linha, no que se afasta apaga. Motor em `rede-neural.js` (canvas; em SVG seriam milhares de nos de DOM). Use como camada, com o veu por cima quando houver texto. */ canvas.rede-viva { display: block; width: 100%; height: 100%; } /* ---- 11. CAMPO DE FILAMENTOS (o hero que tem uma ORIGEM) -------------- Irmao da rede viva, e nao substituto: a rede fala de malha (coisas que se encontram), o filamento fala de origem (uma coisa que se espalha dali). Duas conversas diferentes - a fabrica precisa das duas. O foco vai ATRAS DO CTA (data-foco em % da caixa: '50 84' = meio embaixo, que e onde o botao costuma ficar). Nao e enfeite: e o desenho apontando pro botao sem precisar de seta. 🔴 ESTE FUNDO EXIGE `.veu.forte` - NAO o veu normal. MEDIDO: com `.veu` comum, a palavra em destaque do titulo caiu pra 4,08:1 (o fundo atras dela subiu pra rgb(16,52,71), porque filamento e brilho somam ali). Com `.veu.forte`: 5,62:1, fundo rgb(7,24,36). Faz sentido que seja assim - o foco clareia exatamente onde o texto e o botao estao. Trocou a densidade (data-fios) ou moveu o foco? Mede de novo: a tabela nao vale quando um brilho entra por baixo do texto. */ canvas.filamentos { display: block; width: 100%; height: 100%; } /* 🔴 REGRA DE USO (HB, 21/08): NAO FAZER ISSO EM TUDO. A rede e ASSINATURA, e assinatura vive de escassez. Repetida em toda secao ela deixa de significar "inteligencia" e vira papel de parede — o olho para de ver em duas rolagens, e o custo de CPU fica de graca pra ninguem. . UMA rede viva por pagina. No hero, ou na secao-dobradica. Nao nas duas. . NUNCA atras de texto longo: ali e `.grao` sozinho. . Se a secao ja tem figura forte (a peca, o retrato do professor), a rede nao entra: duas coisas disputando o olho e o mesmo que nenhuma. . Nas outras secoes: `.grao`, `.horizonte`, ou nada. Eu mesmo quebrei esta regra na primeira prova - tres redes na mesma pagina. Ficou bonito no print e cansativo na rolagem. */ /* ---- 9. HORIZONTE (halo largo no topo da secao) ----------------------- O mais barato e o mais usado: e ele que faz a secao parecer iluminada. */ .horizonte::before { content: ""; position: absolute; top: -300px; left: 50%; transform: translateX(-50%); width: 1100px; height: 700px; background: radial-gradient(ellipse, rgba(0,138,212,.48), rgba(107,67,239,.20) 45%, transparent 68%); filter: blur(130px); } /* ============================================================================ COMBINACOES QUE FUNCIONAM (nao inventar na hora) hero .............. .rede-viva + .veu (a assinatura, UMA vez na pagina) hero alternativo .. .horizonte + .pontos + .grao secao de metodo ... .grade + .veu secao de prova .... .aurora + .veu.forte rodape/CTA final .. .malha + .veu secao de texto .... SO .grao. Texto longo nao divide espaco com fundo. ========================================================================= */ @media (prefers-reduced-motion: reduce) { .varredura::after, .rede .no-rede { animation: none !important; } .varredura::after { display: none; } } /* ---- 10. PIXELS VIVOS (a trama que acende) --------------------------- Nasceu 24/08/2026, para o hero da Vic (atendimento no WhatsApp). Motor: `pixels-vivos.js` + . 🔑 QUANDO USAR ESTA E NAO A IRMA `.pontos`: . `.pontos` matriz ESTATICA. Textura calada, pode ficar atras de qualquer coisa, nao disputa atencao. . `.pixels-vivos` a mesma matriz VIVA. So quando o ASSUNTO for sinal, mensagem, conversa, tempo real. E assinatura, entao vale a escassez: UMA por pagina, nunca atras de texto longo. Recurso novo SOMA, nao substitui - a regra da fabrica (o HB, 21/08). 🔴 A TRAMA NAO NASCE NA BORDA DO TEXTO. `--px-abertura` e a fracao da largura que fica LIMPA antes de o primeiro quadrado aparecer, e o peso entra ao quadrado (nao em degrau), senao a trama comeca com uma linha reta visivel. Isso e o que deixa a coluna de texto fora da briga - o veu continua sendo quem PROTEGE, isto so evita o conflito na origem. 🔴 FUNDO ANIMADO E NAO-DETERMINISTICO (armadilha 12): nunca julgue o contraste de um texto que tenha ISTO atras num quadro so. */ /* 🔴 SUTIL E COM BRILHO, NAO CHAPADO (HB, 24/08): *"preciso do quadriculado mais sutil, com efeito de brilho, nao branco chapado"*. A 1a versao acendia a `0.95` de alfa: ciano tao claro sobre fundo escuro que o olho le BRANCO, e um quadrado branco cheio nao brilha - ele TAMPA. A cura tem duas metades, e as duas ja estavam escritas na doutrina do neon (LEIA-ME, "as tres leis"): **nucleo menor e mais fraco, alcance maior**. O que faz uma luz parecer luz e o halo em volta dela, nao a saturacao do miolo. Entao o pico caiu quase pela metade e o que sobrou de brilho virou `--px-brilho`, um halo desenhado pelo motor (`shadowBlur`) so em quem esta aceso - as paradas continuam sem sombra nenhuma, senao seriam 2.400 halos por quadro. Medido no fim deste arquivo, na nota do BL-15. */ /* 🔴 MAIS JUNTOS E MAIS ACESOS (HB, 25/08): *"quero menos distancia entre os quadrados, com mais unidades acendendo ao mesmo tempo"*, com uma referencia de aplicacao na mao. Eu nao chutei os numeros: MEDI a referencia (autocorrelacao no eixo x e no eixo y da imagem que ele mandou). . passo da grade na referencia .. ~15,5px, com quadrado de ~8px . razao lado/passo .............. 0,50 (o cheio e o vazio do mesmo tamanho) . a NOSSA era .................... 6/16 = 0,375 - buraco maior que o quadrado, e e isso que faz a trama ler "esparsa" Entao o parafuso certo era o PASSO, nao o lado: encolher a distancia mantendo o quadrado de 6px chega na razao 0,50 sem engrossar a peca (o quadrado maior e o que faz voltar a parecer "branco chapado" - a cicatriz de ontem). 16 -> 12 tambem quase DOBRA a contagem de celulas (16²/12² = 1,78x): a trama fica mais fina e mais presente ao mesmo tempo. 🔴 E "mais unidades acendendo AO MESMO TEMPO" nao e o mesmo que "acender mais rapido". Quantas ficam acesas de uma vez e o produto de DOIS parafusos: acesas ~ (por-segundo x decaimento) x 0,84 (o 0,84 e a taxa real de acerto do sorteio: o motor tenta 8 vezes achar lugar com peso, e a abertura de 38% derruba parte das tentativas). Antes: 22 x 1,8 = ~33 celulas. Agora: 260 x 2,6 = ~570. Subir so o `por-segundo` dava piscada nervosa; subir junto o decaimento e o que da CAMPO aceso em vez de pisca-pisca. Medido na nota do BL-15, no fim. */ .camada.pixels-vivos { --px-passo: 12px; /* distancia entre centros (era 16) */ --px-lado: 6px; /* lado do quadrado */ --px-base: 0.09; /* brilho de repouso (era .16) */ --px-pico: 0.52; /* brilho de quem acende (era .95) */ --px-brilho: 7px; /* halo do que esta aceso - 0 desliga */ --px-por-segundo: 260; /* quantos acendem por segundo (era 22) */ --px-decaimento: 2.6; /* segundos ate apagar (era 1.8) */ --px-abertura: 0.38; /* fracao inicial SEM trama */ --px-cor-acesa: #6FD9FF; /* ciano CLARO, nao branco: a luz tem cor */ --px-cor-parada: #2CC4FF; width: 100%; height: 100%; display: block; } /* Sem movimento: a trama continua existindo (ela e desenho, nao so animacao), so para de acender. Quem decide e o `prefers-reduced-motion` no JS. */ /* ---- 11. O RASTRO DO PLAY (traco de marca no fundo) ------------------- O aro do PLAY do HB (`referencias/Play neon tpdplay.svg`) usado como TRACO grande atras da arte - nao como logo, como gesto. 🔴 ELE VAI INVERTIDO (HB, 24/08): "pra caber nessa arte, ele tem que ser invertido, a seta apontar pra tras, sem nenhum problema nisso." E ganhamos composicao com isso: com a figura na direita, a seta apontando pra ESQUERDA empurra o olho de volta pro titulo e pro botao, em vez de jogar pra fora da peca. 🔴 O `stroke` MORA NO ``, NUNCA NO `` - atributo proprio do clone vence valor herdado, e foi assim que o aro do hero dos professores saiu da cor errada. Mesma cicatriz de `use-svg-ignora-cor-e-o-computedstyle-mente`. */ .camada.rastro-play { display: grid; place-items: center; opacity: var(--rastro-forca, .26); } .camada.rastro-play svg { width: var(--rastro-larg, 58%); height: auto; overflow: visible; transform: scaleX(-1); /* <- a seta apontando pra tras */ transform-origin: center; } .camada.rastro-play .traco { fill: none; stroke: var(--rastro-cor, #2CC4FF); stroke-width: var(--rastro-fio, 210); } /* ---- 12. O PLAY SOLIDO (luz somada, nao contorno) --------------------- Nasceu 24/08/2026, no hero da Vic. O HB, olhando o rastro neon ali: *"a versao atual tentou usar o efeito neon, mas acho que nao combina nessa cena; temos que pegar o play solido e colocar como uma camada extra de adicao suave no background, pro quadriculado cintilar com um efeito diferente"*. 🔑 A DIFERENCA ENTRE ESTA E A §11, e ela importa na hora de escolher: . `.rastro-play` o CONTORNO do play, em traco neon. E um GESTO desenhado - lê como marca riscada no fundo. . `.play-solido` a MANCHA do play, sem contorno, somando luz ao que esta embaixo. Nao le como logo: le como um facho com a forma da marca. E o que da a diagonal da referencia. Recurso novo SOMA, nao substitui (a regra da fabrica): as duas ficam. 🔴 ELA E LUZ, ENTAO SE COMPOE COMO LUZ. `mix-blend-mode: screen` soma sem estourar - onde o fundo ja e claro ela quase nao muda, onde e escuro ela levanta. Pintar por cima com `opacity` daria um triangulo AZUL CHAPADO por cima da trama; somando, os quadradinhos que estao dentro dele acendem mais forte e os de fora ficam como estavam. Era isso o pedido: o quadriculado cintilando diferente DENTRO da forma. 🔴 E ELA VAI DEPOIS DA TRAMA NO HTML. Camada de luz precisa ter o que iluminar: antes da trama ela vira so uma mancha no fundo do cartao. 🔴 NADA DE FILL CHAPADO. Um `fill` liso vira placa; o degrade ao longo da diagonal e o que faz a forma nascer forte de um lado e morrer do outro. Ele é declarado no proprio SVG (``) porque `fill` de path nao aceita degrade de CSS. */ .camada.play-solido { display: grid; place-items: center; mix-blend-mode: screen; /* 🔴 ELA SOBE ACIMA DO VEU. Toda `.camada` nasce em z-index 0 e o `.veu` mora no 1: com o veu por cima, a aresta da forma existia na geometria (medida ponto a ponto pela API: +0,48) e nao existia no olho (a regua da diferenca dava transicao de 53px onde a referencia tem 5px). Nao era borrao meu, era o veu - que vai de .92 na esquerda a 0 em 88% da largura - apagando a forma justo onde ela nasce, aos 39%. O veu continua protegendo o texto do que esta EMBAIXO dele (a trama, o degrade do cartao); quem manda no lado direito passa a ser a forma. O preco disso e o contraste do texto, e ele e MEDIDO no mesmo passe da regua (`medir-play.js`) - forma bonita que come paragrafo esta reprovada, o publico e 45+. 🔑 E o que sobe nao e a ordem no HTML: em pilha com z-index declarado, a ordem no documento nao decide. Eu troquei os dois de lugar no HTML antes de descobrir isso e a medida voltou identica, digito por digito. */ z-index: 2; /* 🔴 ELA E FORMA, NAO NEVOA (HB, 25/08, com a referencia de aplicacao na mao). A .16 com borrao de 26px o ganho de luz medido era de +7,8 numa escala de 255 - existia na sonda e nao existia no olho. Medido NA REFERENCIA: dentro da forma L=107, fora L=31, com transicao de 5px de aresta. Resolvendo o `screen` pra chegar la sobre o nosso cartao (result = fundo + alfa x cor x (1 - fundo/255)) sai alfa ~ .5 - e e onde a peca ficou. */ opacity: var(--play-forca, .57); } /* 🔴 O SVG PREENCHE A CAMADA E QUEM CRESCE E O DESENHO - e isso custou duas medicoes pra descobrir. Eu tentei dimensiona-lo pela ALTURA (`height: 132%; width: auto`), que era o raciocinio certo (o play e mais alto que largo, entao quem tem de caber e a altura). Nao funciona: em SVG inline o `width: auto` NAO deriva da altura declarada - ele pega o tamanho do conteudo, e af a largura e que manda e recalcula a altura por cima da minha. Provado com o mesmo elemento, no mesmo quadro: `height:132%; width:auto` .... 1881 x 2102 (a minha altura sumiu) `height:132%; width:0` ....... 0 x 803 (803 = 132% de 608: resolvia) O numero certo estava la, e o `width:auto` passava por cima dele. A cura nao foi achar a combinacao magica de largura: foi PARAR de dimensionar o elemento e passar a dimensionar o DESENHO. O svg ocupa a camada inteira, o `preserveAspectRatio` centra o play dentro dela, e uma escala unica diz o quanto ele sangra. Medido, e proporcional como se espera de escala: escala 1,00 -> desenho 529x593, folga de 7,9px (cabe inteiro) escala 1,32 -> desenho 698x782, sangrando 86,9px em cima e embaixo escala 1,60 -> desenho 846x948, sangrando 169,9px Um numero, um efeito, e o mesmo em qualquer largura de tela. 🔴 O ARQUIVO CERTO CHEGOU EM 25/08, e ele muda o desenho. Ate aqui a mancha era o path do `Play neon tpdplay.svg` PREENCHIDO - um arame usado como massa. O HB mandou o solido de verdade (`referencias/play solido-1.svg`), que e um triangulo de cantos arredondados apontando pra CIMA. Girado -90 ele fica exatamente na posicao ja aprovada: **a seta apontando pra tras**. 🔑 E O GIRO MORA DENTRO DO SVG, nao aqui no CSS. Girar o ELEMENTO gira a caixa junto: numa faixa de 1320x432 o `rotate(-90deg)` deixa a caixa com 432 de largura e 1320 de altura, e o `meet` passa a caber o desenho na medida errada - a peca muda de tamanho junto com o giro. Girando o CONTEUDO (um `` e a viewBox trocada de eixo) a caixa continua sendo a camada inteira e a escala continua querendo dizer a mesma coisa. Mesma familia de armadilha do `use-svg-ignora-cor`: em SVG, ONDE se declara muda o que a declaracao quer dizer. 🔴 E O `scaleX(-1)` SAIU. Ele existia pra virar a seta do neon (que aponta pra direita); com o giro ja feito no conteudo, ele passaria a apontar a seta pra FRENTE de novo - o parafuso que desfaz o outro. O `translateX` ficou, e agora sem espelho ele empurra pro lado que o sinal diz. */ .camada.play-solido svg { position: absolute; inset: 0; width: 100%; height: 100%; /* 🔴 A ESCALA NASCE EM 1 DESDE 25/08, e isso e correcao de um defeito que nao dava erro nenhum. O 1,32 vinha da epoca em que o tamanho da peca era decidido por `scale` sobre um desenho centrado por `meet`. Agora quem enquadra e a viewBox - e o 1,32 continuava por cima, ENCOLHENDO o recorte em 32% e comendo justo o pe da janela, que e onde mora a ponta curva que o HB pediu. A regua mediu desvio de 0,06% onde o desenho previa 1,95%. Parafuso velho de um mecanismo aposentado nao fica em 1,32 "por compatibilidade": fica em 1, ou some. */ transform: translateX(var(--play-desloca, 0%)) scale(var(--play-escala, 1)); transform-origin: center; /* o borrao tira a dureza da aresta sem dissolver a forma. 26px dissolvia: a referencia do HB tem transicao de 5px (medida 10-90% no print, num cartao de 1546 - da ~4px no nosso de 1320). Com 4px de borrao a regua media 17px; com 2px ela media 11px; 1px e onde ela encosta na referencia. O que impede de "parecer logo colado" nao e o borrao, e o `screen`: a forma nao tampa o que esta embaixo, ela SOMA (os quadradinhos continuam aparecendo dentro dela, mais acesos). */ filter: blur(var(--play-borrao, 1px)); } .camada.play-solido .massa { stroke: none; }