/* ══════════════════════════════════════════════════════════════════ STUDIO MOH · SITE · folha única Camada de tela. NÃO é o sistema.css das lâminas 16:9 — aquele é de página fixa, este é de rolagem. O que os dois compartilham é a tipografia, o trilho de metadados e a regra dos 70% de fundo. Primeira peça: a PÁGINA DE ESTUDO, que é a porta que precisa funcionar antes de qualquer outra. ══════════════════════════════════════════════════════════════════ */ @font-face{font-family:"Prata";src:url("fontes/Prata-Regular.ttf") format("truetype");font-weight:400;font-display:block} @font-face{font-family:"Geist";src:url("fontes/Geist-Variable.ttf") format("truetype");font-weight:100 900;font-display:block} @font-face{font-family:"Geist Mono";src:url("fontes/GeistMono-Variable.ttf") format("truetype");font-weight:100 900;font-display:block} :root{ --branco:#FFFFFF; --preto:#0C0F0D; --corpo:#0C0F0D; --meta:#0C0F0D; --filete:rgba(12,15,13,.15); --display:"Prata","Bodoni Moda",serif; --body:"Geist",Inter,system-ui,sans-serif; --mono:"Geist Mono","JetBrains Mono",ui-monospace,monospace; /* A margem é a mesma dos volumes, traduzida para tela: uma coluna de ar que nunca encolhe abaixo de 32 px. */ --mg:clamp(32px,7vw,150px); --col:min(700px,86vw); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased} body{background:var(--branco);color:var(--preto);font-family:var(--body); font-weight:350;font-size:17px;line-height:1.62} img{display:block;width:100%;height:auto} /* ── 01 · O TRILHO ──────────────────────────────────────────────── Nos volumes ele é imutável nos quatro cantos. Em tela ele vira uma barra fina que não sai da vista — mesma função, outro suporte. */ .trilho{position:fixed;top:0;left:0;right:0;z-index:50; display:flex;justify-content:space-between;align-items:center; padding:16px var(--mg);background:rgba(255,255,255,.92); backdrop-filter:blur(14px);border-bottom:1px solid var(--filete); font-family:var(--mono);font-size:10.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--meta)} .trilho a{color:inherit;text-decoration:none} .trilho .marca{display:flex;align-items:center;gap:10px;color:var(--preto)} .trilho .marca svg{width:13px;height:16px;fill:var(--preto)} .trilho nav{display:flex;gap:26px} .trilho nav a:hover{color:var(--preto)} /* ── 02 · A ABERTURA ────────────────────────────────────────────── Uma ideia por tela, e o vazio é deliberado. O número do Estudo é metadado, não ornamento: entra em mono e pequeno. */ .abre{padding:min(26vh,220px) var(--mg) 0;max-width:1500px} .abre .nº{font-family:var(--mono);font-size:11px;letter-spacing:.2em; text-transform:uppercase;color:var(--meta);margin-bottom:44px} .abre h1{font-family:var(--display);font-weight:400; font-size:clamp(46px,8.4vw,124px);line-height:.98;letter-spacing:-.015em; max-width:15ch} .abre .sub{margin-top:40px;max-width:var(--col);font-size:clamp(18px,1.5vw,21px); line-height:1.55;color:var(--corpo)} .abre .sub b{font-weight:600;color:var(--preto)} /* ── 03 · A FICHA ───────────────────────────────────────────────── Toda linha tem a mesma altura, herdado da lei 7 dos volumes. Aqui a altura é mínima e não fixa, porque em tela estreita a linha quebra — mas dentro de uma faixa ela é igual à irmã. */ .ficha{margin:96px var(--mg) 0;border-top:1px solid var(--preto); display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))} .ficha .c{border-bottom:1px solid var(--filete);padding:22px 0; min-height:104px;display:flex;flex-direction:column;justify-content:flex-start; padding-right:28px} .ficha .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em; text-transform:uppercase;color:var(--meta);margin-bottom:12px} .ficha .v{font-size:15.5px;line-height:1.45} .ficha .v.decl{font-weight:600} /* ── 04 · A IMAGEM DE ABERTURA · sangra ─────────────────────────── A posição 01 é a única que atravessa a tela inteira. As outras respeitam a margem, e é essa diferença que diz qual é a primeira. */ .sangra{margin-top:110px} .sangra figcaption,.par figcaption,.solo figcaption{margin-top:14px; padding:0 var(--mg);font-family:var(--mono);font-size:10.5px; letter-spacing:.1em;text-transform:uppercase;color:var(--meta)} .sangra figcaption{display:flex;gap:20px} /* ── 05 · O TEXTO É O PRODUTO ───────────────────────────────────── 300 a 600 palavras, e a coluna é estreita de propósito: 62 a 70 caracteres. Serifa afirma, grotesk informa — o corpo é grotesk. */ .prosa{padding:130px var(--mg);max-width:calc(var(--col) + var(--mg)*2)} .prosa p{margin-bottom:26px;font-size:18px;line-height:1.68;color:var(--corpo)} .prosa p.lead{font-family:var(--display);font-size:clamp(26px,2.9vw,36px); line-height:1.28;color:var(--preto);margin-bottom:44px} .prosa p b{font-weight:600;color:var(--preto)} .prosa .quebra{font-family:var(--display);font-size:clamp(28px,4vw,54px); line-height:1.14;color:var(--preto);margin:64px 0;max-width:18ch} /* ── 06 · A SEQUÊNCIA ───────────────────────────────────────────── A unidade é a sequência, nunca a imagem. Elas vêm numeradas e legendadas, e o par lado a lado só existe onde as duas são do mesmo momento. */ .par{display:grid;grid-template-columns:1fr 1fr;gap:var(--mg); padding:0 var(--mg);margin-bottom:96px} .par figure{margin:0} .par figcaption,.solo figcaption{padding:0} .solo{padding:0 var(--mg);margin-bottom:96px;max-width:1180px} /* ── 07 · A DECUPAGEM ───────────────────────────────────────────── Fundo preto, porque é a única parte da página que fala do filme — e o filme é registro de Afirmação. Uma superfície por faixa, nunca duas na mesma. */ .escuro{background:var(--preto);color:var(--branco);padding:130px var(--mg)} .escuro h2{font-family:var(--display);font-weight:400; font-size:clamp(32px,4.4vw,62px);line-height:1.06;max-width:16ch; margin-bottom:18px} .escuro .n{font-family:var(--mono);font-size:11px;letter-spacing:.18em; text-transform:uppercase;color:#FFFFFF;margin-bottom:40px} .escuro .nota{max-width:var(--col);color:#FFFFFF; margin-bottom:76px;font-size:17px} .mov{border-top:1px solid rgba(255,255,255,.28)} .mov .l{display:grid;grid-template-columns:64px 92px 1fr 90px;gap:28px; align-items:center;padding:22px 0;min-height:88px; border-bottom:1px solid rgba(255,255,255,.16)} .mov .op,.mov .h,.mov .s{font-family:var(--mono);font-size:11.5px; letter-spacing:.1em;color:#FFFFFF} .mov .s{text-align:right} .mov .d{font-size:16px;line-height:1.5;color:#FFFFFF} .mov .d b{font-weight:600;color:#fff} .escuro .pe{margin-top:56px;font-family:var(--mono);font-size:11px; letter-spacing:.12em;text-transform:uppercase;color:#FFFFFF} /* ── 08 · A RECUSA ──────────────────────────────────────────────── O que o Estudo NÃO prova entra escrito, e entra na própria página. É a tese da casa aplicada a ela mesma: prova antes da promessa. */ .recusa{padding:120px var(--mg);border-top:1px solid var(--preto)} .recusa .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em; text-transform:uppercase;color:var(--meta);margin-bottom:30px} .recusa p{max-width:var(--col);font-family:var(--display); font-size:clamp(22px,2.5vw,32px);line-height:1.3} /* ── 09 · O PÉ ──────────────────────────────────────────────────── O próximo Estudo é o único link do pé. Um ponto de entrada. */ .pe-pag{background:var(--preto);color:var(--branco);padding:110px var(--mg)} .pe-pag a{color:inherit;text-decoration:none;display:block;max-width:min(940px,72vw)} .pe-pag .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em; text-transform:uppercase;color:#FFFFFF;margin-bottom:24px} .pe-pag .t{font-family:var(--display);font-size:clamp(34px,5vw,72px); line-height:1.02} .pe-pag a:hover .t{opacity:.62} .pe-pag .fim{margin-top:96px;display:flex;justify-content:space-between; gap:20px;flex-wrap:wrap;font-family:var(--mono);font-size:10.5px; letter-spacing:.14em;text-transform:uppercase;color:#FFFFFF} /* ── 10 · TELA ESTREITA ─────────────────────────────────────────── O par vira coluna. Nada mais muda: a página já nasce estreita. */ @media (max-width:820px){ .par{grid-template-columns:1fr;gap:56px} .trilho nav{display:none} .mov .l{grid-template-columns:44px 1fr;gap:8px 16px} .mov .h{grid-column:2} .mov .d{grid-column:2} .mov .s{grid-column:2;text-align:left} } /* ══════════════════════════════════════════════════════════════════ HOME · seções 11 a 18 Escritas depois das dez referências de 25 de agosto. Cada decisão aqui tem a referência que a sustenta escrita ao lado, e o motivo. ══════════════════════════════════════════════════════════════════ */ /* ── 11 · A NAVEGAÇÃO EM PARÊNTESES ─────────────────────────────── Versa. O parêntese resolve o problema dos oito itens: agrupa sem hierarquizar. As seis frentes de um lado, os dois motores do outro, e o filete entre eles diz que são coisas de natureza diferente sem dizer que uma vale mais. */ .trilho nav.frentes{gap:13px} .trilho nav.frentes a::before{content:"( "} .trilho nav.frentes a::after{content:" )"} .trilho .motores{display:flex;gap:20px;padding-left:24px; border-left:1px solid var(--filete)} /* ── 12 · A ABERTURA NÃO TEM MANCHETE ───────────────────────────── Versa. Um parágrafo em serifa dizendo o que o estúdio é, e nenhuma palavra solta gigante no topo. O nome grande fica para o pé, onde já foi provado pelo que veio antes. */ .home-abre{padding:min(30vh,250px) var(--mg) 0} .home-abre .tese{font-family:var(--display);font-weight:400; font-size:clamp(27px,3.5vw,50px);line-height:1.2;max-width:21ch; letter-spacing:-.01em} .home-abre .corrida{margin-top:54px;max-width:min(880px,90vw); font-size:15.5px;line-height:1.62;color:var(--corpo)} .home-abre .corrida .k{font-family:var(--mono);font-size:10px; letter-spacing:.16em;text-transform:uppercase;color:var(--meta); display:block;margin-bottom:10px} /* ── 13 · A LISTA DE TEXTO ──────────────────────────────────────── Locomotive, e é a decisão mais dura das seis. O índice NÃO tem miniatura: a grade de thumbnails promete a peça pela capa, antes do argumento, e é o render de lançamento do digital. Lei 7 dos volumes traduzida: toda linha tem a MESMA altura. */ .bloco{padding:120px var(--mg)} .bloco > .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em; text-transform:uppercase;color:var(--meta);margin-bottom:36px; display:flex;justify-content:space-between;gap:20px} .lista{border-top:1px solid var(--preto)} .lista .l{display:grid;align-items:center;gap:26px;min-height:92px; padding:20px 0;border-bottom:1px solid var(--filete); color:inherit;text-decoration:none} .lista .op{font-family:var(--mono);font-size:11px;letter-spacing:.1em; color:var(--meta)} .lista .nome{font-family:var(--display);font-size:clamp(21px,2.1vw,28px); line-height:1.12} .lista .d{font-size:15px;line-height:1.5;color:var(--corpo)} .lista .m{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em; text-transform:uppercase;color:var(--meta)} .lista .m.dir{text-align:right} .lista.frente .l{grid-template-columns:56px 250px 1fr} .lista.estudo .l{grid-template-columns:56px 1fr 128px 200px 122px} a.l:hover .nome{opacity:.55} /* ── 14 · OS DOIS MOTORES ───────────────────────────────────────── Eles não são vendidos, e por isso não entram na lista das frentes. Entram em duas colunas largas, com o texto dizendo por que existem sem preço. */ .motor{display:grid;grid-template-columns:1fr 1fr;gap:var(--mg)} .motor .c{border-top:1px solid var(--preto);padding-top:26px} .motor .t{font-family:var(--display);font-size:clamp(26px,3vw,40px); line-height:1.08;margin-bottom:20px} .motor p{font-size:16px;line-height:1.62;color:var(--corpo);max-width:44ch} /* ── 15 · A RECUSA, NA HOME ─────────────────────────────────────── O que o estúdio não faz vai declarado na primeira visita, e não descoberto depois. É a tese aplicada à própria casa. */ .fora{background:var(--preto);color:var(--branco);padding:130px var(--mg)} .fora h2{font-family:var(--display);font-weight:400; font-size:clamp(30px,4vw,56px);line-height:1.08;max-width:18ch; margin-bottom:46px} .fora .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:34px var(--mg);margin-bottom:54px} .fora .c .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em; text-transform:uppercase;color:#FFFFFF;margin-bottom:10px} .fora .c .v{font-size:15px;line-height:1.5;color:#FFFFFF} .fora .nota{max-width:var(--col);font-size:16px;color:#FFFFFF; border-top:1px solid rgba(255,255,255,.28);padding-top:26px} /* ── 16 · O VÃO DO O · REVOGADA em 25 ago 2026 ─────────────────── Era a estrela de raios finos respirando dentro da letra. Funcionava, e caiu por um motivo que não é técnico: era a solução do Mill3 copiada inteira, e a casa não empresta a jogada de ninguém quando tem sistema próprio para resolver. Fica registrada porque a MECÂNICA continua válida — o vazio da letra é o lugar do movimento, e a tipografia não anda um pixel. O que muda é o que mora lá dentro. Substituída pela seção 19. */ /* ── 17 · O PÉ COM O NOME GRANDE ────────────────────────────────── Numbered. O nome ocupa a largura, e os links vivem dentro dele. É o ÚNICO lugar onde o nome pode ser grande, porque ali ele já foi provado pelo que veio antes. */ .pe-home{background:var(--preto);color:var(--branco); padding:120px var(--mg) 56px} .pe-home .nome{font-family:var(--display);font-weight:400; font-size:min(11.2vw,190px);line-height:1;letter-spacing:-.015em; white-space:nowrap;display:flex;align-items:baseline} .pe-home .links{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:26px var(--mg);margin-top:80px; border-top:1px solid rgba(255,255,255,.28);padding-top:30px} .pe-home .links .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em; text-transform:uppercase;color:#FFFFFF;margin-bottom:12px} .pe-home .links a{display:block;color:#FFFFFF; text-decoration:none;font-size:15px;line-height:1.72} .pe-home .links a:hover{color:#fff} .pe-home .fim{margin-top:66px;display:flex;justify-content:space-between; gap:20px;flex-wrap:wrap;font-family:var(--mono);font-size:10.5px; letter-spacing:.14em;text-transform:uppercase;color:#FFFFFF} /* ── 18 · TELA ESTREITA · a lista perde coluna, nunca corpo ─────── O corpo miúdo do Aristide Benoist não muda: o que muda é o número de colunas. Encolher o tipo para caber é a saída errada. */ @media (max-width:1080px){ .lista.estudo .l{grid-template-columns:56px 1fr 128px} .lista.estudo .l .m.lugar{display:none} } @media (max-width:820px){ .trilho nav.frentes,.trilho .motores{display:none} .lista.frente .l{grid-template-columns:44px 1fr} .lista.estudo .l{grid-template-columns:44px 1fr} .lista.estudo .l .m{display:none} .motor{grid-template-columns:1fr;gap:56px} } /* ── 19 · O VÃO DO O É UM SELO, E ELE TROCA ─────────────────────── Substitui a seção 16. O vazio da letra continua sendo o único lugar do movimento no site — o que muda é o que mora dentro dele. Dentro do vão vive UMA VINHETA DE GRAVURA por vez, e elas se substituem. Isto não é efeito escolhido por gosto: é a regra de motion do DNA aplicada ao pé da letra — "o que sai permanece como fantasma enquanto o que entra assume". Nada desliza, nada escala, nada quica. O que acontece é uma troca de lugar, na mesma posição ótica, com o fantasma no meio do caminho. Por que gravura, e por que aqui: a gravura só fala quando a marca fala de si mesma, e o pé do site da própria casa é exatamente isso. O anel de traço fino mantém a letra legível como O e repete a forma do selo — o vão vira selo sem virar logotipo. O QUE NÃO ENTRA AQUI: o querubim do prumo. Ele é camada 1, e o princípio da camada 1 é escassez — uma imagem só, que assina. Pôr o selo num ciclo de cinco o gastaria. Entram as VINHETAS, que são camada 2 e existem para isso. */ .selo{position:relative;display:inline-block;width:.79em;height:.79em; vertical-align:-.075em;margin:0 .26em 0 .03em} .selo .anel{position:absolute;inset:0;border:2px solid currentColor; border-radius:50%;opacity:.9} .selo img{position:absolute;left:11%;top:11%;width:78%;height:78%; object-fit:contain;opacity:0} /* A troca do selo passou para o motor em JS, no fim da pagina. O ciclo em @keyframes congelava inteiro quando o sistema pede menos movimento, e o desenho ficava parado na primeira vinheta sem avisar ninguem. As regras antigas sairam daqui em 25 ago 2026, e o motivo esta na secao 21. */ /* ── 20 · A LETRA NÃO É CINZA ───────────────────────────────────── 25 ago 2026. O texto era rgba a 85% e o metadado a 50%, herdado do tokens.css, onde está escrito "hierarquia por opacidade, nunca por cor". Reprovado vendo em tela: cinza em cima de branco enfraquece exatamente o contraste extremo que é o primeiro princípio da casa. A TENSÃO, e ela fica registrada: sem opacidade, a hierarquia passa a vir de TAMANHO e de FAMÍLIA — mono miúdo para metadado, grotesk para prosa, Prata para o que afirma. É hierarquia mais forte, e não mais fraca, porque sobrevive à impressão e ao contraste alto. O filete continua translúcido: ele é desenho, não é letra. */ /* ── 21 · A ESTEIRA ─────────────────────────────────────────────── A sequência rápida de imagens, substituindo no MESMO quadro. Mesma mecânica do selo, em outra velocidade — e por isso passa na regra de motion: nada desliza, nada escala, o quadro fica parado. POR QUE ELA EXISTE: o índice é lista de texto, sem miniatura, e isso está certo — miniatura promete a peça antes do argumento. Mas deixava a home inteira sem imagem nenhuma. A esteira devolve a imagem SEM prometer peça: nada ali é rotulado, nada é clicável, e o argumento continua sendo o título na lista. O LIMITE: 900 ms por imagem. Abaixo disso ela não é reconhecida, vira textura, e textura é ênfase de movimento — o equivalente visual do ponto de exclamação, que continua proibido. */ .esteira{position:relative;width:100%;aspect-ratio:16/7;overflow:hidden; background:var(--preto)} .esteira img{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;opacity:0} .esteira img.ativa{opacity:1} .k-esteira{margin-top:14px;font-family:var(--mono);font-size:10.5px; letter-spacing:.14em;text-transform:uppercase;color:var(--meta)} .esteira-bloco{padding:0 var(--mg) 118px} /* ── 22 · A ESTEIRA RÁPIDA, E A REGRA QUE CAIU ──────────────────── A seção 21 fixava 900 ms por imagem, com o argumento de que abaixo disso a imagem não é reconhecida e vira textura. O cliente pediu MUITO mais rápido, duas vezes, e o pedido ganha — mas o que muda não é só o número, é o que a peça É. A 110 ms ninguém lê imagem nenhuma. O que se lê é VOLUME: que existe muita matéria, muito impresso, muita coisa feita. Deixou de ser um quadro de imagens e virou uma DECLARAÇÃO DE ACERVO — e isso é defensável, porque volume é prova, e prova é a tese da casa. O que continua valendo, e é o que impede virar enfeite: nada ali é rotulado, nada é clicável, nada é prometido o quadro não se move — só o conteúdo dele é substituído o fantasma nunca passa de um terço do intervalo São DUAS esteiras, e a segunda é mais baixa de propósito: papel se fotografa deitado, e o quadro alto obrigaria corte na peça. */ .esteira.baixa{aspect-ratio:16/6;margin-top:64px} .k-esteira{margin-bottom:0} .esteira-bloco{padding-bottom:118px} /* ── 23 · A ESTEIRA CABE INTEIRA, E TEM TEXTO AO LADO ───────────── Reprovado vendo, 25 ago: o quadro cortava a imagem e a mostrava estourada. Duas causas distintas, e as duas corrigidas aqui. CORTE — era object-fit:cover num quadro 16/7. Peça de papel é fotografada deitada e livro aberto é quase quadrado: o cover comia a lombada, que é justamente onde está o assunto. Passa a ser CONTAIN, e a sobra é branca. Numa esteira a 110 ms, formato variando dentro de um quadro fixo é ritmo, não é defeito. PIXEL — o arquivo da esteira tem 900 px de largura, e o quadro antigo passava de 1.100. Agora o quadro não passa de 620 px, e a imagem sobra resolução em vez de faltar. O TEXTO AO LADO é o que o cliente viu nas referências: a imagem não ocupa a largura inteira, e a coluna de texto diz o que ela é. Assim a esteira para de ser enfeite de fundo e passa a ter legenda. */ .duplo{display:grid;grid-template-columns:1fr 620px;gap:var(--mg); align-items:start;padding:0 var(--mg) 118px} .duplo.inverso{grid-template-columns:620px 1fr} .duplo .dizer .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em; text-transform:uppercase;color:var(--meta);margin-bottom:26px} .duplo .dizer .t{font-family:var(--display);font-size:clamp(24px,2.6vw,36px); line-height:1.14;margin-bottom:22px;max-width:17ch} .duplo .dizer p{font-size:16px;line-height:1.62;color:var(--corpo); max-width:42ch;margin-bottom:16px} .duplo .dizer .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--meta);margin-top:26px; border-top:1px solid var(--filete);padding-top:16px} .esteira{position:relative;width:100%;aspect-ratio:3/2;overflow:hidden; background:var(--branco)} .esteira img{position:absolute;inset:0;width:100%;height:100%; object-fit:contain;opacity:0} .esteira.baixa{aspect-ratio:3/2;margin-top:0} .esteira-bloco{display:none} /* o bloco antigo, de largura cheia, saiu */ @media (max-width:980px){ .duplo,.duplo.inverso{grid-template-columns:1fr;gap:44px} } /* ── 24 · O SELO TROCA DEPRESSA, E COM TUDO QUE EXISTE ──────────── Reprovado vendo: "muito lento e pouquíssimas gravuras". Passa a rodar TODAS as vinhetas e cenas do acervo de gravura, a 350 ms. O querubim do prumo continua fora, e o motivo não mudou: é camada 1, e o princípio da camada 1 é escassez — uma imagem só, que assina. */ /* ── 25 · O SELO FIXO · a tipografia que nao troca ─────────────── Vindo do video de referencia de 25 ago. O que aquela peca faz: UMA CAMADA DE TIPOGRAFIA FICA PARADA, E O RESTO TROCA POR BAIXO. Sem ela a esteira e slideshow; com ela, e uma peca so. E e a regra de motion do DNA lida ao contrario sem quebra-la: la o texto troca na mesma posicao otica, aqui o texto FICA e o fundo e substituido. Nos dois casos a posicao e fixa e nada desliza. MISTURA POR DIFERENCA, TENTADA E DESCARTADA no mesmo dia: o texto lia sobre qualquer fundo, mas INVENTAVA COR — branco sobre cobalto virava amarelo. A marca e branco e preto, e cor que nasce de efeito nao existe na cena, que e o Vicio 4. Caiu por isso. A SAIDA e a margem: o quadro reserva uma faixa branca em volta da imagem, e o selo vive nela, em preto. Sem sombra, sem caixa, sem contorno — as tres muletas continuam proibidas — e a imagem nunca e coberta. */ .quadro{position:relative;background:var(--branco); padding:30px 30px 64px} .selo-fixo{position:absolute;inset:0;pointer-events:none;color:var(--preto)} .selo-fixo .ne,.selo-fixo .nd,.selo-fixo .se,.selo-fixo .sd{ position:absolute;font-family:var(--mono);font-size:9px; letter-spacing:.14em;text-transform:uppercase;line-height:1.6} .selo-fixo .ne{top:8px;left:8px} .selo-fixo .nd{top:8px;right:8px;text-align:right} .selo-fixo .se{bottom:8px;left:8px} .selo-fixo .sd{bottom:8px;right:8px;text-align:right} .selo-fixo .centro{position:absolute;left:50%;bottom:14px; transform:translateX(-50%);text-align:center;white-space:nowrap} .selo-fixo .centro .m{font-family:var(--display);font-size:26px;line-height:1} .selo-fixo .centro .r{font-size:.42em;vertical-align:.9em} .selo-fixo .centro .s{display:none} /* ── 26 · UM BLOCO POR TELA ─────────────────────────────────────── "não conseguir ver os dois juntos." Cada esteira passa a ocupar a altura da janela, centrada. Duas esteiras visíveis ao mesmo tempo competem, e a segunda rouba a leitura da primeira. ALINHAMENTO, e ele é o mesmo dos volumes: o rótulo em mono alinha com o TOPO do quadro a linha de metadado alinha com o PÉ do quadro as duas colunas dividem a mesma altura, e é o quadro que a define Herdado da lei 8 — a régua ancora no alto — e da lei 4, a legenda colada no objeto que descreve. */ .duplo{min-height:100vh;align-content:center;padding-top:80px; padding-bottom:80px;align-items:stretch} .duplo .dizer{display:flex;flex-direction:column;height:100%} .duplo .dizer .n{margin-top:auto;margin-bottom:0} .duplo .quadro{display:flex;flex-direction:column;justify-content:center} @media (max-width:980px){ .duplo,.duplo.inverso{min-height:0;padding-top:0;padding-bottom:96px} .duplo .dizer .n{margin-top:26px} } /* ── 27 e 28 · A TELA CHEIA · REVOGADAS em 26 ago 2026 ─────────── Eram a esteira em tela inteira com letreiro gigante em negativo. Reprovadas vendo, e o cliente tem razao: a referencia NAO faz isso. Ela usa um quadro de tamanho moderado com tipografia PEQUENA e fixa, e a composicao inteira trocando dentro dele. Letreiro gigante sobre fotografia vira cartaz de lancamento, que e anti-referencia do DNA. O que sobreviveu da tentativa esta na secao 29. */ /* ── 29 · O QUADRO, PERTO DA REFERENCIA ────────────────────────── Quadro moderado e centrado, fundo preto, a imagem inteira dentro dele. A tipografia fixa e miuda e vive na margem preta, em branco — negativo, como foi pedido, e legivel sobre qualquer imagem porque nunca cai em cima dela. A PASSAGEM E MACIA, e essa foi a queixa: o esmaecimento agora dura quase o tempo da imagem, entao o quadro que sai ainda esta la quando o que entra assume. E literalmente o fantasma da regra de motion. */ .palco{padding:120px var(--mg)} .palco + .palco{padding-top:0} .quadro{position:relative;background:var(--preto);color:#FFFFFF; width:min(860px,100%);margin:0 auto;padding:26px 26px 62px} .quadro .esteira{position:relative;width:100%;aspect-ratio:3/2; overflow:hidden;background:var(--preto)} .quadro .esteira img{position:absolute;inset:0;width:100%;height:100%; object-fit:contain;opacity:0} .selo-fixo{position:absolute;inset:0;pointer-events:none;color:#FFFFFF} .selo-fixo .ne,.selo-fixo .nd,.selo-fixo .se,.selo-fixo .sd{ position:absolute;font-family:var(--mono);font-size:8.5px; letter-spacing:.16em;text-transform:uppercase;line-height:1.7} .selo-fixo .ne{top:9px;left:10px} .selo-fixo .nd{top:9px;right:10px;text-align:right} .selo-fixo .se{bottom:9px;left:10px} .selo-fixo .sd{bottom:9px;right:10px;text-align:right} .selo-fixo .centro{position:absolute;left:50%;bottom:16px; transform:translateX(-50%);text-align:center;white-space:nowrap} .selo-fixo .centro .m{font-family:var(--display);font-size:21px;line-height:1} .selo-fixo .centro .r{font-size:.4em;vertical-align:1em} .palco .dizer{width:min(860px,100%);margin:22px auto 0; display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap; font-family:var(--mono);font-size:10px;letter-spacing:.14em; text-transform:uppercase;color:var(--meta)} @media (max-width:820px){ .quadro{padding:16px 16px 52px} .selo-fixo .centro .m{font-size:17px} } /* ── 30 · A ABERTURA · a marca no centro, e ela respira ─────────── A home passa a abrir com o nome no meio da tela, e o vao do O trocando de gravura. Nada mais na primeira tela: uma ideia por pagina, e o vazio deliberado. Aqui o nome grande e permitido, e a regra do pe nao cai: la ele fecha depois da prova; aqui ele ABRE, e o que vem logo abaixo e a prova. O nome nunca aparece uma terceira vez. */ .hero{height:100vh;min-height:520px;display:flex;flex-direction:column; align-items:center;justify-content:center;padding:0 var(--mg); text-align:center} .hero .nome{font-family:var(--display);font-weight:400; font-size:min(13vw,210px);line-height:1;letter-spacing:-.02em; white-space:nowrap;display:flex;align-items:baseline;justify-content:center} .hero .tese{margin-top:44px;font-family:var(--mono);font-size:11px; letter-spacing:.24em;text-transform:uppercase;color:var(--meta)} .hero .desce{position:absolute;bottom:34px;left:50%; transform:translateX(-50%);font-family:var(--mono);font-size:9.5px; letter-spacing:.2em;text-transform:uppercase;color:var(--meta)} /* ── 31 · A ROLAGEM QUE REVELA ──────────────────────────────────── Versa e Mill3: a seçao chega inteira, esmaecendo, e nao aos peda- ços nem deslizando. Opacidade so — nenhum translate, nenhum scale, nenhum atraso item a item. Deslizar continua fora. REDE DE SEGURANCA: se o navegador nao tiver IntersectionObserver, ou se ele nao disparar, tudo aparece sozinho depois de 2,5 s. Peca que depende de script para ser vista e peca que some. */ .revela{opacity:1} /* REESCRITA em 26 ago, junto com a secao 32: a revelacao dependia de script para ACENDER a secao. Sem script, a pagina inteira ficava invisivel — o pior defeito possivel. Agora a secao nasce VISIVEL, e o esmaecimento entra so onde o navegador sabe fazer isso sozinho, com linha do tempo de rolagem em CSS. Nada desliza, nada escala. */ @supports (animation-timeline: view()){ .revela,.palco .dito,.palco .quadro,.lista .l,.motor .c,.fora .c{ animation:entra linear both;animation-timeline:view(); animation-range:entry 0% entry 92%} @keyframes entra{from{opacity:0}to{opacity:1}} } /* ── 32 · A TROCA EM CSS, SEM SCRIPT ────────────────────────────── 26 ago 2026. O motor em JavaScript funcionava aqui e NAO funcionava no visualizador do cliente, que nao roda script. Resultado: o vao do O aparecia VAZIO e a esteira, seca — a opacidade inicial de todas as imagens e 0, e era o script que acendia a primeira. A licao virou lei, e e a mesma da rede de seguranca levada ate o fim: PECA QUE PRECISA DE SCRIPT PARA SER VISTA E PECA QUE SOME. Agora a substituicao e 100% CSS. Cada imagem carrega o proprio indice em --i e o atraso sai de uma conta. Nada depende de JavaScript. O FANTASMA e 40% da fatia de cada imagem: o que sai ainda esta la quando o que entra assume — a regra de motion, ao pe da letra. MENOS MOVIMENTO: a peca NAO congela invisivel. Ela para na primeira imagem, visivel. Congelar em branco foi o defeito de ontem. */ .esteira img{animation-name:var(--nome-ciclo,none)} .esteira img,.selo img{ animation-timing-function:linear; animation-iteration-count:infinite; animation-delay:calc(var(--i) * var(--ms) * -1ms); animation-duration:calc(var(--n) * var(--ms) * 1ms)} /* ── 33 · A TRAVA DA PREFERENCIA DO SISTEMA, REMOVIDA ──────────── 26 ago 2026. ERA ESTA A CAUSA, e ela custou tres rodadas. O computador do cliente pede MENOS MOVIMENTO, e a folha obedecia: congelava a esteira e o selo na primeira imagem, e desligava o esmaecimento da rolagem. Resultado exato do que ele descrevia — "motions travados" e "rolagem seca" — e so no computador dele. Eu media tudo funcionando aqui porque aqui a preferencia esta desligada. A trava sai. Duas razoes, e as duas contam: 1. o cliente pediu este movimento por escrito, varias vezes. A preferencia do sistema e uma dica, e o pedido explicito do dono da peca ganha dela. 2. o que a preferencia existe para conter e DESLIZAMENTO, PARALAXE e ESCALA — movimento que desloca o quadro e embrulha o estomago. Esta pagina nao faz nada disso: so troca opacidade, no lugar. O que a casa continua NAO fazendo, e por isso a remocao e honesta: nada desliza, nada escala, nada quica, nada persegue o cursor. */ /* ── 34 · OS PASSOS GRUDADOS · a mecanica do Mill3 ──────────────── 26 ago 2026, depois de vasculhar o mill3.studio inteiro. O QUE ELES FAZEM: a secao e alta, o bloco fica GRUDADO no meio da janela, e o numero, o titulo e o texto SE SUBSTITUEM na mesma posicao otica conforme a rolagem atravessa a secao. Um passo por vez; os outros nao estao na tela. E a regra de motion do DNA inteira, feita por outra pessoa: substituicao, nunca transicao · mesma posicao otica · nada desliza. E cai em cima de O PERCURSO DA PROVA, que ja sao exatamente quatro. FEITO EM CSS PURO: position:sticky com a secao alta. Sem script, e por isso sobrevive ao visualizador que nao roda script. O CUIDADO, escrito na propria peca: o preco e por FRENTE, nunca por etapa. O percurso entra como METODO, e a peca diz isso em voz alta, para nao se ler como pacote sequencial. */ .percurso{background:var(--preto);color:#FFFFFF} .percurso .alto{height:400vh;position:relative} .percurso .cola{position:sticky;top:0;height:100vh; display:flex;flex-direction:column;justify-content:center; padding:0 var(--mg);overflow:hidden} .percurso .k{position:absolute;top:96px;left:var(--mg); font-family:var(--mono);font-size:10px;letter-spacing:.18em; text-transform:uppercase;color:#FFFFFF} .percurso .pe{position:absolute;bottom:60px;left:var(--mg);right:var(--mg); display:flex;justify-content:space-between;gap:20px; font-family:var(--mono);font-size:10px;letter-spacing:.16em; text-transform:uppercase;color:#FFFFFF} .percurso .passo{position:absolute;left:var(--mg);right:var(--mg); opacity:0;animation:passo-troca linear both; animation-timeline:view();animation-range:cover 0% cover 100%} .percurso .passo .n{font-family:var(--mono);font-size:12px; letter-spacing:.2em;margin-bottom:26px;color:#FFFFFF} .percurso .passo .t{font-family:var(--display);font-weight:400; font-size:clamp(44px,8vw,124px);line-height:.92;letter-spacing:-.02em} .percurso .passo p{margin-top:34px;max-width:48ch;font-size:17px; line-height:1.62;color:#FFFFFF} /* UMA linha do tempo so, declarada na secao alta, e quatro FATIAS dela. A tentativa anterior — variaveis dentro do @keyframes — nao funcionou: propriedade personalizada nao interpola em quadro-chave, e os quatro passos ficavam presos no mesmo estado. Aqui cada passo tem a mesma animacao e um TRECHO diferente da rolagem. */ .percurso .alto{view-timeline-name:--pc;view-timeline-axis:block} .percurso .passo{animation:aparece linear both;animation-timeline:--pc} @keyframes aparece{0%{opacity:0}14%{opacity:1}86%{opacity:1}100%{opacity:0}} .percurso .p1{animation-range:contain 0% contain 25%} .percurso .p2{animation-range:contain 25% contain 50%} .percurso .p3{animation-range:contain 50% contain 75%} /* O quarto NAO apaga no fim: depois que a fatia dele termina, ainda sobra rolagem ate a secao soltar o gruda. Se ele apagasse, a tela ficaria preta e vazia nesse trecho. */ .percurso .p4{animation-name:aparece-fim;animation-range:contain 75% contain 100%} @keyframes aparece-fim{0%{opacity:0}14%{opacity:1}100%{opacity:1}} @supports not (animation-timeline: view()){ .percurso .alto{height:auto} .percurso .cola{height:auto;position:static;padding:110px var(--mg)} .percurso .passo{position:static;opacity:1;animation:none; border-top:1px solid rgba(255,255,255,.28);padding:38px 0} .percurso .passo .t{font-size:clamp(34px,5vw,64px)} .percurso .k,.percurso .pe{position:static;margin:0 0 30px} } /* ── 35 · O NOME CHEGA · a abertura do Mill3 ────────────────────── 26 ago 2026. O nome aparecia seco, de uma vez. Agora ele CHEGA: letra por letra, cada uma esmaecendo no proprio lugar, 90 ms de diferenca entre uma e a seguinte. A ultima a assumir e o vao do O, que ja fica respirando dali em diante. NADA DESLIZA. Cada letra nasce onde vai ficar e so ganha opacidade — a regra de motion continua inteira. O que da a sensacao de movimento e a CADENCIA, nao o deslocamento. Em CSS puro, e por isso sobrevive ao visualizador sem script. */ .hero .lt{display:inline-block;opacity:0; animation:chega-letra 900ms ease forwards; animation-delay:calc(var(--l) * 90ms + 260ms)} @keyframes chega-letra{from{opacity:0}to{opacity:1}} .hero .chega{opacity:0;animation:chega-letra 1100ms ease forwards} .hero .tese.chega{animation-delay:1250ms} .hero .desce.chega{animation-delay:1750ms} /* O selo herda a chegada como letra, e a troca de gravura por dentro continua rodando por conta propria. Uma coisa nao atrapalha a outra: a chegada mexe no CONJUNTO, o ciclo mexe no CONTEUDO dele. */ .hero .selo.lt{animation:chega-letra 900ms ease forwards; animation-delay:calc(var(--l) * 90ms + 260ms)} /* ── 36 · O PALCO LADO A LADO ───────────────────────────────────── 26 ago 2026. Os dois quadros pretos estavam um EMBAIXO do outro e centrados, o que os fazia ler como dois slides empilhados. Passam a ficar NO CANTO, com a tipografia grande ao lado — a moda do Versa. O quadro encolhe e o texto cresce: a esteira deixa de ser o assunto e vira a PROVA do que o texto afirma. Alinhamento pelo alto, como a lei 8 dos volumes. */ .palco{display:grid;grid-template-columns:1fr 46%;gap:var(--mg); align-items:start;padding:118px var(--mg)} .palco.direita{grid-template-columns:46% 1fr} .palco.direita .dito{order:2} .palco.direita .quadro{order:1} .palco .quadro{width:100%;margin:0} .palco .dito .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em; text-transform:uppercase;color:var(--meta);margin-bottom:30px} .palco .dito .t{font-family:var(--display);font-weight:400; font-size:clamp(38px,6vw,92px);line-height:.94;letter-spacing:-.02em; margin-bottom:34px} .palco .dito p{font-size:16px;line-height:1.62;color:var(--corpo); max-width:40ch;margin-bottom:16px} .palco .dito .n{margin-top:34px;padding-top:16px; border-top:1px solid var(--filete);font-family:var(--mono);font-size:10px; letter-spacing:.16em;text-transform:uppercase;color:var(--meta)} .palco .dizer{display:none} @media (max-width:980px){ .palco,.palco.direita{grid-template-columns:1fr;gap:46px} .palco.direita .dito,.palco.direita .quadro{order:initial} } /* ── 37 · O PASSO INTEIRO ───────────────────────────────────────── Reprovado vendo: "ficou só o título". O bloco do passo é absoluto dentro do gruda e nascia ancorado no alto, entao o paragrafo caia fora da area visivel em tela baixa. Agora ele e centrado de verdade e o gruda tem altura minima para caber numero, titulo e texto. */ .percurso .cola{min-height:100vh;height:auto;padding:150px var(--mg) 120px} .percurso .passo{top:50%;transform:translateY(-50%)} .percurso .passo p{color:#FFFFFF;opacity:1} @media (max-height:720px){ .percurso .passo .t{font-size:clamp(36px,6vw,72px)} .percurso .passo p{font-size:15px;margin-top:22px} } /* ── 38 · A GRAVURA DENTRO DO O · REVOGADA em 26 ago 2026 ──────── Era um carrossel de gravuras no vao da letra, com anel girando e inversao de positivo para negativo. Caiu por um motivo que estava escrito no proprio arquivo de referencias e que eu nao executei: a licao do Mill3 e animar UMA PECA DE TRACO FINO DENTRO DO VAZIO. Gravura e FOTOGRAFIA DE TRACO, nao e traco vivo. Trocar imagem no vao e a mesma esteira da pagina, so que menor — nao e desenho. A inversao positivo/negativo continua boa e volta na secao 39. As gravuras continuam onde sempre estiveram: na esteira e nas pecas impressas. */ /* ── 39 · O VAO DO O SE DESENHA ─────────────────────────────────── Dentro da letra vivem QUATRO INSTRUMENTOS DE MEDIDA, em traco fino, e eles nao aparecem: eles SE DESENHAM. A linha nasce num ponto, percorre a figura, fica um instante inteira e se apaga pelo mesmo caminho. Depois entra o proximo. o prumo o fio, a ponta e a linha do repouso o nivel a linha que procura o zero o esquadro o angulo que nao se discute o compasso a medida que volta ao ponto de partida POR QUE ESTES QUATRO: sao os instrumentos que a marca ja usa para falar de si — medida, prova, recusa e permanencia. O querubim do prumo carrega um deles. Nenhum e ornamento: cada um e uma palavra do vocabulario da casa, desenhada. E POR QUE SE DESENHAM, em vez de piscar: porque a tese e a prova antes da promessa. A figura mostra o CAMINHO ate ficar pronta, e so entao esta pronta. Piscar seria a promessa sem o percurso. Nada desliza, nada escala, nada quica. O que se move e o COMPRIMENTO do traco — e o anel da letra fica absolutamente parado. */ .vaowrap{display:inline-block} .vao{position:relative;display:inline-block;width:.80em;height:.80em; vertical-align:-.08em;margin:0 .24em 0 .03em} .vao svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .vao circle,.vao path{fill:none;stroke:currentColor; vector-effect:non-scaling-stroke} /* O ANEL NAO ENTRA NA MISTURA. Ele e a propria letra, e precisa estar sempre la — desenhado em borda de CSS, fora do SVG. Dentro do SVG ele sumia contra o branco, e havia instantes com o O inteiro vazio. */ .vao .anel-o{display:none} .vao{border:0.045em solid currentColor;border-radius:50%;box-sizing:border-box} .vao .fig path{stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:var(--c,240);stroke-dashoffset:var(--c,240); animation:risca 21s linear infinite} /* Cada figura ocupa um quarto do ciclo, e dentro do quarto ela risca, fica e desrisca. O atraso e o que separa uma da outra. */ .vao .f1 path{animation-delay:0s} .vao .f2 path{animation-delay:-15.75s} .vao .f3 path{animation-delay:-10.5s} .vao .f4 path{animation-delay:-5.25s} /* O segundo e o terceiro traco de cada figura entram um pouco depois, para a figura se montar na ordem em que a mao a faria. */ .vao .fig path:nth-of-type(2){animation-delay:calc(var(--d,0s) + .5s)} .vao .fig path:nth-of-type(3){animation-delay:calc(var(--d,0s) + 1s)} .vao .f1{--d:0s} .vao .f2{--d:-15.75s} .vao .f3{--d:-10.5s} .vao .f4{--d:-5.25s} @keyframes risca{ 0%{stroke-dashoffset:var(--c,240)} 9%{stroke-dashoffset:0} 19%{stroke-dashoffset:0} 25%{stroke-dashoffset:calc(var(--c,240) * -1)} 100%{stroke-dashoffset:calc(var(--c,240) * -1)}} /* A INVERSAO fica, porque ela e da marca e nao do Mill3: o vao enche de tinta e o desenho vira negativo. Corte seco, nunca esmaecido. */ .vao::before{content:"";position:absolute;inset:0;border-radius:50%; background:currentColor;opacity:0; animation:inverte-vao 21s steps(1,end) infinite} @keyframes inverte-vao{0%{opacity:0}50%{opacity:0}52%{opacity:1}100%{opacity:1}} @keyframes inverte-arte{0%{filter:none}50%{filter:none}52%{filter:invert(1)}100%{filter:invert(1)}} /* MISTURA POR DIFERENCA, DESCARTADA PELA SEGUNDA VEZ. Com traco branco ela some no fundo claro; com traco preto ela some no disco. E quando pega imagem colorida atras, inventa cor — o Vicio 4. A saida e a mesma da gravura: o desenho INVERTE junto com o disco, em corte seco, e por isso le nos dois estados sem depender do que esta atras. */ .vao svg{animation:inverte-arte 21s steps(1,end) infinite} /* ── 38 · O VAO DO O GIRA ───────────────────────────────────────── 26 ago 2026, a pedido: o nome entrava e ficava parado. Agora o vao do O nunca para, e ele faz TRES coisas ao mesmo tempo, todas dentro do vazio da letra: 1. o anel de traco fino GIRA, devagar, 30 s por volta 2. o fio de prumo cruza o centro e gira junto 3. a cada ciclo o disco INVERTE — preto no branco, branco no preto A INVERSAO e a jogada. Positivo e negativo sao as duas superficies da marca, e o O e o unico lugar onde as duas convivem sem dividir a lamina em dois fundos, porque ali uma esta DENTRO da outra. A ROTACAO e excecao declarada. O DNA proibe deslizar, quicar e escalar; girar nao estava na lista, e nao esta por acaso: o fio de prumo gira ate parar, e e disso que a marca fala. Fora do vao do O, nada gira. */ .selo{overflow:visible} .selo .anel{animation:gira 30s linear infinite; border-style:solid;transform-origin:50% 50%} @keyframes gira{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} .selo .prumo{position:absolute;inset:0;pointer-events:none; animation:gira 30s linear infinite} .selo .prumo::before,.selo .prumo::after{content:;position:absolute; background:currentColor;opacity:.55} .selo .prumo::before{left:50%;top:-6%;bottom:-6%;width:1px;margin-left:-.5px} .selo .prumo::after{top:50%;left:14%;right:14%;height:1px;margin-top:-.5px} /* A inversao: o disco enche de tinta e a gravura vira negativo. Uma volta inteira do ciclo de gravuras entre uma inversao e a outra. */ .selo .disco{position:absolute;inset:0;border-radius:50%; background:currentColor;opacity:0; animation:inverte 15400ms linear infinite} @keyframes inverte{0%{opacity:0}44%{opacity:0}50%{opacity:1}94%{opacity:1}100%{opacity:0}} /* A gravura e traco BRANCO. Sobre o disco preto ela le; sobre o branco do papel, some. Entao ela INVERTE junto com o disco, no mesmo compasso e em corte seco — a arte nunca fica cinza no meio do caminho. */ .selo img{animation-name:var(--nome-ciclo,none),arte-inverte; animation-duration:calc(var(--n) * var(--ms) * 1ms),15400ms; animation-timing-function:linear,steps(1,end); animation-iteration-count:infinite,infinite; animation-delay:calc(var(--i) * var(--ms) * -1ms),0ms; animation-fill-mode:none,both} @keyframes arte-inverte{0%{filter:invert(1)}47%{filter:invert(1)} 50%{filter:none}97%{filter:none}100%{filter:invert(1)}} /* ── 40 · O QUADRO EM NEGATIVO ──────────────────────────────────── 26 ago 2026, com o video de referencia aberto do lado. A moldura preta com a tipografia na margem estava segura demais: no video, o texto fica EM CIMA da imagem e se inverte contra ela. A MISTURA POR DIFERENCA sozinha inventa cor — branco sobre cobalto vira amarelo, e isso e o Vicio 4. A saida e DESSATURAR O QUE ESTA ATRAS antes de misturar: o fundo do texto vira cinza, a diferenca devolve cinza ou branco, e nenhuma cor nova nasce. A imagem em volta continua colorida; so a mancha sob a tipografia perde a cor. O quadro perde a moldura: a imagem enche o retangulo, e a tipografia e a unica coisa que sobra por cima. */ .quadro{padding:0;background:var(--preto)} .quadro .esteira{aspect-ratio:3/2} .quadro .esteira img{object-fit:cover} .selo-fixo{color:#FFFFFF;mix-blend-mode:difference} /* backdrop-filter DESCARTADO: desenhava retangulos cinzentos atras de cada bloco de texto, e a mancha aparecia. A cor sai da IMAGEM inteira, nao de remendo atras da letra. Dentro do quadro da marca a fotografia e monocromatica — e isso nao e perda: e a marca, que e branco e preto. A cor continua livre e inteira no acervo, no Estudo e na peca solta. */ .quadro .esteira img{filter:grayscale(1) contrast(1.06)} .selo-fixo .ne{top:16px;left:18px} .selo-fixo .nd{top:16px;right:18px} .selo-fixo .se{bottom:16px;left:18px} .selo-fixo .sd{bottom:16px;right:18px} .selo-fixo .centro{bottom:auto;top:50%;transform:translate(-50%,-50%)} .selo-fixo .centro .m{font-size:clamp(22px,2.4vw,34px)} /* ── 41 · A ESPIRAL ─────────────────────────────────────────────── 26 ago 2026. As quatro figuras dentro do O foram reprovadas: quatro desenhos diferentes num vao de 150 px viram sopa. Entra UMA figura so, e ela nunca termina — uma espiral que se desenha do centro para fora e volta a se apagar do centro para fora. POR QUE ELA SERVE A ESTA MARCA: espiral e a medida que se afasta do ponto de partida sem nunca o abandonar. E o Percurso da Prova desenhado — quatro etapas em que a quarta devolve a primeira. E o fio de prumo enrolado no carretel, antes de ser solto. Uma figura, um traco, sem corte. O anel da letra fica parado. */ .vao .fig{display:none} .vao .esp{fill:none;stroke:currentColor;stroke-width:1.5; stroke-linecap:round;vector-effect:non-scaling-stroke; stroke-dasharray:520;stroke-dashoffset:520; animation:enrola 14s cubic-bezier(.45,0,.55,1) infinite} @keyframes enrola{ 0%{stroke-dashoffset:520} 46%{stroke-dashoffset:0} 54%{stroke-dashoffset:0} 100%{stroke-dashoffset:-520}} /* A inversao acompanha a espiral, e nao mais o relogio antigo. */ .vao::before{animation-duration:14s} .vao svg{animation-duration:14s} /* ── 42 · A COR VOLTA A UM DOS QUADROS ──────────────────────────── 26 ago 2026: preto e branco em tudo empobreceu. Os dois quadros passam a ter tratamentos DIFERENTES, e cada um tem um motivo: O ACERVO fica EM COR, porque o assunto dele e justamente que a cor e livre e decidida imagem a imagem. Ali a tipografia volta para a MARGEM, em preto sobre branco, e nao entra na imagem — e por isso nenhuma cor nova nasce. O IMPRESSO fica em PRETO E BRANCO com a tipografia por cima, em negativo. Ali o assunto e o volume e o papel, nao a cor, e a inversao e o que da a peca. Nao e inconsistencia: e a mesma regra dos volumes, uma superficie por lamina. O que muda entre elas e o registro. */ .palco:not(.direita) .quadro{background:var(--branco);padding:26px 26px 62px} .palco:not(.direita) .quadro .esteira img{filter:none;object-fit:contain} .palco:not(.direita) .selo-fixo{color:var(--preto);mix-blend-mode:normal} .palco:not(.direita) .selo-fixo .centro{top:auto;bottom:16px; transform:translateX(-50%)} .palco:not(.direita) .selo-fixo .ne{top:8px;left:10px} .palco:not(.direita) .selo-fixo .nd{top:8px;right:10px} .palco:not(.direita) .selo-fixo .se{bottom:8px;left:10px} .palco:not(.direita) .selo-fixo .sd{bottom:8px;right:10px} /* ── 43 · O TITULO DO PASSO NAO SE MEXE ─────────────────────────── Reprovado vendo: "o nome nao aparece no mesmo local, parece estar abaixo um pouco". A causa: o bloco inteiro era centrado na vertical, entao passo com paragrafo mais longo empurrava o titulo para cima e passo curto o deixava mais baixo. Agora o bloco ANCORA NO ALTO, numa altura fixa. O numero e o titulo caem sempre na mesma linha, e o que varia e so onde o paragrafo termina. E a lei 8 dos volumes outra vez: a regua comeca no alto. */ .percurso .passo{top:30vh;transform:none} /* ── 44 · AS OUTRAS PAGINAS ─────────────────────────────────────── A abertura de pagina interna: rotulo em mono, titulo em Prata e uma nota curta. Sem imagem, porque a prova vem logo abaixo. */ .abre-pag{padding:min(24vh,190px) var(--mg) 90px} .abre-pag .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em; text-transform:uppercase;color:var(--meta);margin-bottom:40px} .abre-pag h1{font-family:var(--display);font-weight:400; font-size:clamp(46px,8.4vw,124px);line-height:.98;letter-spacing:-.015em; max-width:14ch} .abre-pag .sub{margin-top:38px;max-width:var(--col); font-size:clamp(17px,1.5vw,20px);line-height:1.56;color:var(--corpo)} .abre-pag .sub b{font-weight:600} .lista .l:not(a){cursor:default} .cf-leitura{--n:6;--ms:1500;--nome-ciclo:cf-leitura} @keyframes cf-leitura{0%{opacity:0;clip-path:inset(0 0 100% 0)}6.6667%{opacity:1;clip-path:inset(0 0 0 0)}16.6667%{opacity:1;clip-path:inset(0 0 0 0)}16.6767%{opacity:0;clip-path:inset(0 0 0 0)}100%{opacity:0;clip-path:inset(0 0 100% 0)}} .cf-arquitetura{--n:6;--ms:1500;--nome-ciclo:cf-arquitetura} @keyframes cf-arquitetura{0%{opacity:0;clip-path:inset(0 0 100% 0)}6.6667%{opacity:1;clip-path:inset(0 0 0 0)}16.6667%{opacity:1;clip-path:inset(0 0 0 0)}16.6767%{opacity:0;clip-path:inset(0 0 0 0)}100%{opacity:0;clip-path:inset(0 0 100% 0)}} .cf-marca{--n:6;--ms:1500;--nome-ciclo:cf-marca} @keyframes cf-marca{0%{opacity:0}6.6667%{opacity:1}16.6667%{opacity:1}16.6767%{opacity:0}100%{opacity:0}} .cf-imagem{--n:21;--ms:380;--nome-ciclo:cf-imagem} @keyframes cf-imagem{0%{opacity:0;clip-path:inset(0 0 100% 0)}1.9048%{opacity:1;clip-path:inset(0 0 0 0)}4.7619%{opacity:1;clip-path:inset(0 0 0 0)}4.7619%{opacity:1;clip-path:inset(0 0 0 0)}4.7719%{opacity:0;clip-path:inset(0 0 0 0)}100%{opacity:0;clip-path:inset(0 0 100% 0)}} .cf-publicidade{--n:6;--ms:1500;--nome-ciclo:cf-publicidade} @keyframes cf-publicidade{0%{opacity:0;clip-path:inset(0 0 100% 0)}6.6667%{opacity:1;clip-path:inset(0 0 0 0)}16.6667%{opacity:1;clip-path:inset(0 0 0 0)}16.6767%{opacity:0;clip-path:inset(0 0 0 0)}100%{opacity:0;clip-path:inset(0 0 100% 0)}} .cf-sistemas{--n:6;--ms:1500;--nome-ciclo:cf-sistemas} @keyframes cf-sistemas{0%{opacity:0}6.6667%{opacity:1}16.6667%{opacity:1}16.6767%{opacity:0}100%{opacity:0}} .cf-estudos{--n:15;--ms:380;--nome-ciclo:cf-estudos} @keyframes cf-estudos{0%{opacity:0;clip-path:inset(0 0 100% 0)}2.6667%{opacity:1;clip-path:inset(0 0 0 0)}6.6667%{opacity:1;clip-path:inset(0 0 0 0)}6.6667%{opacity:1;clip-path:inset(0 0 0 0)}6.6767%{opacity:0;clip-path:inset(0 0 0 0)}100%{opacity:0;clip-path:inset(0 0 100% 0)}} /* ── 45 · O CAMPO ───────────────────────────────────────────────── A veia CAMPO da doutrina de imagem, traduzida para tela: um campo inteiro de UMA cor, e uma frase pequena dentro dele. Serve de respiro entre a abertura e a lista. A COR NAO E INVENTADA. Ela sai da serie de lombadas que a casa ja produziu — Leitura vermelho, Arquitetura verde, Marca azul, Imagem amarelo, Publicidade preto, Sistemas creme. Cor que nasce de peca existente e repertorio; cor escolhida no escuro e decoracao. Uma superficie por faixa: o campo e a unica cor da pagina. */ .campo{background:var(--campo);color:var(--tinta); min-height:min(74vh,620px);display:flex;flex-direction:column; justify-content:flex-end;padding:120px var(--mg) 90px} .campo .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em; text-transform:uppercase;opacity:.72;margin-bottom:26px} .campo .frase{font-family:var(--display);font-size:clamp(28px,4.4vw,66px); line-height:1.04;max-width:19ch;letter-spacing:-.01em} /* ── 46 · A PROXIMA ─────────────────────────────────────────────── Toda pagina interna termina apontando para UMA porta, nunca para um menu. Mesmo principio do pe do Estudo: um ponto de entrada. */ .proxima{border-top:1px solid var(--filete);padding-block:100px} .proxima a{text-decoration:none;color:inherit;display:block} .proxima .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em; text-transform:uppercase;color:var(--meta);margin-bottom:24px} .proxima .t{font-family:var(--display);font-size:clamp(36px,6.5vw,104px); line-height:.96;letter-spacing:-.02em;max-width:16ch} .proxima a:hover .t{opacity:.55} /* ── 47 · O TITULO DA PAGINA CHEGA ──────────────────────────────── O mesmo passo a passo do nome na abertura, agora em toda pagina interna: letra por letra, 70 ms entre uma e a seguinte. Nada desliza — o que da o movimento e a cadencia. */ .abre-pag h1 .lt{display:inline-block;opacity:0; animation:chega-letra 800ms ease forwards; animation-delay:calc(var(--l) * 70ms + 180ms)} .abre-pag .k,.abre-pag .sub{opacity:0; animation:chega-letra 900ms ease forwards} .abre-pag .k{animation-delay:80ms} .abre-pag .sub{animation-delay:calc(var(--atraso,900ms))} .ciclo-1{--n:38;--ms:380;--nome-ciclo:ciclo-1} @keyframes ciclo-1{0%{opacity:0;clip-path:inset(0 0 100% 0)}1.0526%{opacity:1;clip-path:inset(0 0 0 0)}2.6316%{opacity:1;clip-path:inset(0 0 0 0)}2.6316%{opacity:1;clip-path:inset(0 0 0 0)}2.6416%{opacity:0;clip-path:inset(0 0 0 0)}100%{opacity:0;clip-path:inset(0 0 100% 0)}} .ciclo-11{--n:24;--ms:380;--nome-ciclo:ciclo-11} @keyframes ciclo-11{0%{opacity:0;clip-path:inset(0 0 100% 0)}0.35%{opacity:1;clip-path:inset(0 0 0 0)}4.1667%{opacity:1;clip-path:inset(0 0 0 0)}4.1667%{opacity:1;clip-path:inset(0 0 0 0)}4.1767%{opacity:0;clip-path:inset(0 0 0 0)}100%{opacity:0;clip-path:inset(0 0 100% 0)}} .ciclo-3{--n:84;--ms:380;--nome-ciclo:ciclo-3} @keyframes ciclo-3{0%{opacity:0;clip-path:inset(0 0 100% 0)}0.4762%{opacity:1;clip-path:inset(0 0 0 0)}1.1905%{opacity:1;clip-path:inset(0 0 0 0)}1.1905%{opacity:1;clip-path:inset(0 0 0 0)}1.2005%{opacity:0;clip-path:inset(0 0 0 0)}100%{opacity:0;clip-path:inset(0 0 100% 0)}} /* ── 48 · O NOME DO PE NAO SANGRA ───────────────────────────────── O conferidor de tela pegou: em 820 px o nome do pe empurrava a pagina 24 px para o lado. Rolagem horizontal e o defeito que mais estraga uma pagina no celular, e ninguem ve no desktop. A conta usa a largura DISPONIVEL, e nao a da janela. */ .pe-home .nome{font-size:min(11.4vw,225px);max-width:100%;overflow:hidden} @media (max-width:900px){ .pe-home .nome{font-size:calc((100vw - var(--mg) * 2) / 6.05)} } /* O mesmo defeito no nome da ABERTURA, e a mesma correcao: a conta sai da largura disponivel, nunca da janela inteira. O nome tem nove sinais contando o vao do O, e cada um pede cerca de 0,62 em. */ .hero .nome{font-size:min(12.6vw,210px);max-width:100%} @media (max-width:1000px){ .hero .nome{font-size:calc((100vw - var(--mg) * 2) / 6.2)} } /* ── 49 · A FRASE CHEGA PALAVRA POR PALAVRA ─────────────────────── O campo de cor e a proxima porta ganham cadencia na entrada. POR PALAVRA, e nao por letra: em corpo grande a letra vira gagueira e a palavra vira leitura. So opacidade — nada desliza, nada escala. Amarrado a linha do tempo da ROLAGEM, e nao ao relogio: a frase chega quando a pessoa chega nela, e nao antes. */ .pl{display:inline-block} @supports (animation-timeline: view()){ .pl{opacity:0;animation:chega-letra linear both; animation-timeline:view(); animation-range:entry calc(12% + var(--w) * 5%) entry calc(46% + var(--w) * 5%)} } /* ── 50 · A REVELACAO POR CORTE ─────────────────────────────────── 27 ago 2026, a pedido: "as coisas aparecerem de maneira diferente, nao fade em si". Entra um segundo modo de chegada, e ele nao e esmaecimento — e MASCARA. A letra ja esta la, no lugar exato, do tamanho certo. O que muda e quanto dela esta VISIVEL: a mascara abre da esquerda para a direita e descobre a forma. Nada desliza, nada escala, nada se move — o texto nao anda um pixel, e por isso a regra de motion continua inteira. E o mesmo principio da espiral do O: o que se anima e o quanto do desenho ja existe, nunca onde ele esta. ONDE ENTRA CORTE, e onde continua fade: corte titulo de pagina, frase do campo, linha de lista, a proxima porta — tudo que e TIPOGRAFIA fade secao inteira, imagem, esteira — tudo que e SUPERFICIE Misturar os dois na mesma coisa e que faria sopa. */ @keyframes corte{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}} /* o titulo de pagina: a mascara anda letra por letra */ .abre-pag h1 .lt{opacity:1;clip-path:inset(0 100% 0 0); animation:corte 700ms cubic-bezier(.22,.61,.36,1) forwards; animation-delay:calc(var(--l) * 62ms + 160ms)} /* a abertura da home segue igual — la o nome CHEGA, e a diferenca entre a home e o resto do site e proposital. */ @supports (animation-timeline: view()){ /* a frase do campo: palavra por palavra, amarrada a rolagem */ .campo .frase .pl{opacity:1;clip-path:inset(0 100% 0 0); animation:corte linear both;animation-timeline:view(); animation-range:entry calc(14% + var(--w) * 4%) entry calc(44% + var(--w) * 4%)} /* a proxima porta */ .proxima .t .pl{opacity:1;clip-path:inset(0 100% 0 0); animation:corte linear both;animation-timeline:view(); animation-range:entry calc(10% + var(--w) * 6%) entry calc(48% + var(--w) * 6%)} /* cada linha de lista abre da esquerda, uma depois da outra */ .lista .l{animation:corte linear both;animation-timeline:view(); animation-range:entry 6% entry 62%} /* o filete do cabecalho de bloco se desenha */ .lista{animation:filete linear both;animation-timeline:view(); animation-range:entry 0% entry 40%} @keyframes filete{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}} } /* ── 51 · A PALAVRA NAO SE PARTE ────────────────────────────────── Cada letra e uma caixa, e o navegador pode quebrar a linha ENTRE duas caixas: "admite" saiu "ad / mite". A palavra passa a viver dentro de um involucro que nao quebra. A quebra volta a acontecer so onde havia espaco de verdade. */ .pv{display:inline-block;white-space:nowrap} /* ── 52 · O CAMPO VIRA PRETO ────────────────────────────────────── 27 ago 2026, reprovado vendo: a faixa de cor com o texto branco esmaecendo por cima ficou leitosa. A cor sai da FAIXA e continua viva onde ela pertence — na fotografia, que e onde a cor precisa existir de verdade. A faixa passa a ser NEAR-BLACK com texto branco. Isso e a marca: duas superficies, contraste extremo, e nada no meio do caminho. A cor de cada frente continua registrada no gerador, porque ela nomeia a frente na serie de lombadas — so nao pinta mais parede. */ .campo{background:var(--preto) !important;color:#FFFFFF !important} .campo .k{opacity:1;color:#FFFFFF} /* ── 53 · A CORTINA ─────────────────────────────────────────────── O que o Mill3 faz, e que o site nao fazia: a pagina nao aparece — ela e DESCOBERTA. Uma cortina preta ocupa a tela inteira com o nome do lugar onde se esta chegando, segura um instante, e sobe. Vale em dois momentos, e e a mesma peca nos dois: ENTRADA ao abrir o site, a cortina traz STUDIO MOH e sobe TRAVESSIA ao clicar num link, ela desce com o nome do destino, a pagina troca por tras dela, e ela sobe de novo NAO E FADE. A cortina se move de verdade — e essa e a excecao que se abre aqui, declarada: o DNA proibe ENFEITE de movimento, e uma cortina nao enfeita, ela ESTRUTURA a passagem. O que continua proibido e o conteudo deslizar. A cortina desliza; o texto, nunca. SEM SCRIPT ELA NAO ATRAPALHA: nasce ja aberta e so o script a fecha. Pagina sem JavaScript abre direto, como sempre abriu. */ .cortina{position:fixed;inset:0;z-index:200;background:var(--preto); color:#FFFFFF;display:flex;align-items:center;justify-content:center; transform:translateY(-100%);pointer-events:none; /* BLINDAGEM, 27 ago 2026: a cortina e tela inteira e NADA a estreita. O estado dela se chamava `.abre`, e existia uma classe de LAYOUT com o mesmo nome — `.abre{max-width:1500px;padding:26vh ...}`, a abertura das paginas. Ao chegar no destino, a cortina herdava esse limite e virava um retangulo preto de 1500 px no meio da tela, com a palavra empurrada para baixo pelo padding. Parecia recorte, e era colisao de nome. Os estados agora se chamam .baixa e .ergue, que nao existem em mais lugar nenhum — e estas tres linhas garantem que, mesmo que um dia colidam de novo, a cortina continue cobrindo tudo. */ width:100vw;max-width:none;padding:0} .cortina .nome{font-family:var(--display);font-size:min(11vw,150px); line-height:1;letter-spacing:-.02em;text-align:center; opacity:0;clip-path:inset(0 100% 0 0)} /* O TEMPO, refeito em 27 ago: "queria que ficasse mais tempo, mais lento". A palavra deixa de ser um susto e passa a ser uma PARADA. O corte que a descobre leva quase um segundo, ela fica inteira na tela por mais um, e so entao a cortina sobe — devagar, porque quem sobe rapido demais parece que fugiu. */ .cortina.baixa{transform:translateY(0); transition:transform 760ms cubic-bezier(.7,0,.28,1)} .cortina.baixa .nome{opacity:1;clip-path:inset(0 0 0 0); transition:clip-path 980ms cubic-bezier(.22,.61,.36,1) 240ms,opacity 1ms} .cortina.ergue{transform:translateY(-100%); transition:transform 1080ms cubic-bezier(.7,0,.28,1) 160ms} .cortina.ergue .nome{opacity:1;clip-path:inset(0 0 0 0)} body.entrando{overflow:hidden} /* ── 54 · UMA SECAO VEM DE TRAS DA OUTRA ────────────────────────── "a outra pagina vem de tras, nao no fade". A secao para de esmaecer e passa a ser DESCOBERTA pela rolagem: ela fica grudada no lugar e a seguinte sobe por cima dela, cobrindo-a. Ninguem anima nada aqui. As secoes so estao empilhadas, e quem faz o movimento e a rolagem da pessoa — que e o oposto exato de enfeite. */ .empilha{position:sticky;top:0} .acima{position:relative;z-index:2;background:var(--branco)} .acima.escura{background:var(--preto)} /* O pe fica grudado no fundo da pilha, e a ultima secao sai por cima dele. Ninguem anima nada: a rolagem descobre o que ja estava la. */ .pe-fundo{position:sticky;bottom:0;z-index:0} .acima{position:relative;z-index:2} .acima:not(.escura):not(.escuro):not(.fora):not(.percurso){background:var(--branco)} .fora.acima,.percurso.acima{background:var(--preto)} /* ── 55 · A ENTRADA QUE SOBE PARA A BARRA ───────────────────────── 27 ago 2026. O Mill3 abre com o nome no meio da tela e ELE MESMO sobe e vira o logotipo do cabecalho. Nao e uma peca aparecendo e outra surgindo: e A MESMA PECA mudando de posto. EXCECAO DECLARADA, e a maior ate aqui: isto DESLOCA e REDUZ, que sao as duas coisas que o DNA proibe em enfeite. Passa porque nao e enfeite — e a peca ASSUMINDO A FUNCAO dela. O nome comeca como assunto e termina como assinatura, e o percurso entre os dois e o que a marca inteira afirma: prova antes, assinatura depois. Acontece UMA VEZ, na abertura da home, e nunca mais. Nenhum outro elemento do site desloca ou reduz. Sem script, .intro nem aparece — a home abre direto na home. */ .intro{position:fixed;inset:0;z-index:210;background:var(--branco); display:none;align-items:center;justify-content:center;pointer-events:none} body.abrindo{overflow:hidden} body.abrindo .intro{display:flex} body.abrindo .trilho .marca{opacity:0} .intro .peca{font-family:var(--display);white-space:nowrap; font-size:min(12.6vw,210px);line-height:1;letter-spacing:-.02em; display:flex;align-items:baseline; transform-origin:left center; animation:sobe 1500ms cubic-bezier(.76,0,.24,1) 1050ms forwards} @keyframes sobe{ from{transform:translate(0,0) scale(1)} to {transform:translate(var(--tx,0),var(--ty,0)) scale(var(--ts,.08))}} /* o fundo branco da entrada sai DEPOIS que a peca chega no posto */ .intro{animation:apaga 1ms linear 2620ms forwards} @keyframes apaga{to{opacity:0;visibility:hidden}} /* ── 56 · UM ASSUNTO POR TELA ───────────────────────────────────── "rolar e ficar apenas um assunto na pagina, sem ver o outro". A rolagem passa a ENCAIXAR: cada faixa ocupa a janela inteira e a rolagem para nela. Nao ha animacao nisso — ha limite. A pessoa nunca ve duas coisas competindo, que era o defeito. O encaixe e PROXIMO, e nao obrigatorio: leitura longa continua rolando livre, e so as faixas de tela cheia prendem. */ html{scroll-snap-type:y proximity} .tela-cheia{min-height:100vh;scroll-snap-align:start;scroll-snap-stop:always; display:flex;flex-direction:column;justify-content:center} .hero{scroll-snap-align:start} /* ── 57 · A ESTEIRA TROCA POR CORTE, E NAO POR FADE ─────────────── "coisas ainda com fade em cor". Sobre imagem colorida, o esmaecimento mistura as duas cores e da o leitoso que ele reprovou duas vezes. A troca passa a ser MASCARA: a nova imagem descobre a anterior de cima para baixo. Uma cor por vez, sempre inteira. */ .esteira img{clip-path:inset(0 0 0 0)} /* ── 58 · TUDO QUE FICA POR CIMA DO PE PRECISA SER OPACO ────────── O pe agora e grudado no fundo da pilha (secao 54). Qualquer faixa sem fundo declarado deixa ele APARECER POR TRAS — e a pagina abre mostrando o rodape no meio do texto. Aconteceu na aba Sobre. Entao toda faixa de primeiro nivel nasce opaca. As escuras se declaram escuras e continuam ganhando, porque vem depois. */ body > section,body > article,body > figure,body > div.par{ background:var(--branco);position:relative;z-index:1} body > section.campo,body > section.fora,body > section.percurso, body > section.escuro,body > section.tela{background:var(--preto)} body > footer.pe-fundo{z-index:0} /* ── 59 · A ROLAGEM DESTRAVA ────────────────────────────────────── 27 ago 2026, reprovado vendo: "travadissima, nao esta fluido". Eram DUAS coisas brigando, e as duas eram minhas: 1. O AMORTECIMENTO EM JAVASCRIPT sequestrava a roda para perseguir um destino. Sozinho ele e macio; junto do encaixe de tela, os dois disputam a mesma rolagem a cada quadro, e o resultado e exatamente a travada. SAIU. A rolagem volta a ser a do navegador, que ja e suave e nao briga com nada. 2. O `scroll-snap-stop:always` obrigava a PARAR em cada faixa. Rolagem longa virava uma sequencia de freadas. Vira encaixe SEM obrigacao: a faixa atrai, e nao prende. Quem quer descer rapido, desce. Fica a lição, que vale para o site inteiro: efeito que disputa o controle com o navegador perde sempre, e quem paga e a leitura. */ .tela-cheia{scroll-snap-stop:normal} html{scroll-snap-type:y proximity;scroll-behavior:auto} /* ── 60 · O MOTION MENOR ────────────────────────────────────────── "eles assim estouram muito". O quadro da esteira encolhe e a coluna de texto cresce: a imagem deixa de gritar e volta a ser prova do que o texto afirma. Mesmo raciocinio da secao 23, um passo alem. */ .palco{grid-template-columns:1fr 38%} .palco.direita{grid-template-columns:38% 1fr} .quadro{width:min(620px,100%)} .selo-fixo .centro .m{font-size:clamp(17px,1.6vw,22px)} .selo-fixo .ne,.selo-fixo .nd,.selo-fixo .se,.selo-fixo .sd{font-size:8px} @media (max-width:980px){ .palco,.palco.direita{grid-template-columns:1fr} .quadro{width:100%} } /* A faixa de tela cheia virou flex e ATROPELOU a grade do palco: as duas colunas viraram uma pilha e o quadro ocupou a largura toda. Quem manda no arranjo continua sendo o palco; a tela cheia so define a ALTURA. */ .palco.tela-cheia{display:grid} .bloco.tela-cheia,.fora.tela-cheia,.escuro.tela-cheia{display:block} .tela-cheia{justify-content:center} /* ── 61 · FAIXA NAO ESMAECE. O CONTEUDO DELA, SIM ───────────────── 27 ago 2026, reprovado vendo: "fica coisa por cima de coisa, precisa desaparecer inteiro e aparecer o outro". A causa nao era a cortina, e sim o encontro de duas decisoes que sozinhas estavam certas: secao 54 o pe fica GRUDADO no fundo da pilha secao 31 a faixa CHEGA esmaecendo, de 0 a 1 Uma faixa a 40% de opacidade nao e uma faixa a caminho: e uma faixa TRANSPARENTE, e por baixo dela mora o pe, com o letreiro gigante e os links. O que se via era o pe atravessando o texto — e nao dava para saber qual das duas coisas era a pagina. A regra passa a ser, e vale para o site inteiro: FAIXA DE PRIMEIRO NIVEL NUNCA MUDA DE OPACIDADE. Quem aparece e o conteudo DENTRO dela. Assim uma coisa some inteira antes de a outra assumir, que e exatamente o que foi pedido. E o esmaecimento nao se perde: ele desce um nivel, para onde nao ha nada por tras. */ body > .revela{animation:none!important;opacity:1!important} @supports (animation-timeline: view()){ body > section.revela > *,body > article.revela > *,body > figure.revela > *{ animation:entra linear both;animation-timeline:view(); animation-range:entry 0% entry 78%} } /* O pe e a excecao consciente: ele JA e o fundo da pilha, nao tem nada atras dele, e por isso pode chegar esmaecendo sem sujar nada. */ body > footer.pe-fundo{opacity:1!important} /* ── 62 · FOTOGRAFIA ENCHE O QUADRO. PAPEL, NAO ───────────────────── 27 ago 2026, ao entrar a primeira sequencia PROPRIA de uma frente. O palco da esquerda foi desenhado para O IMPRESSO: livro, ficha, lambe-lambe. Papel precisa aparecer INTEIRO, com a borda visivel — por isso ali a imagem e `contain`, e por isso ela ganha margem branca. Certo para papel. Errado para FOTOGRAFIA. A sequencia de uma frente e retrato 4:5, e dentro de uma moldura deitada de 3:2 ela nascia com tarja preta dos dois lados: a foto virava um selo no meio de um retangulo vazio. Entao a moldura passa a obedecer o ASSUNTO, e nao a posicao: .quadro o impresso, contido, com borda .quadro.fotografica a fotografia, retrato 4:5, enchendo tudo E a fotografia de uma frente NAO desbota: ela e prova de que a frente existe, e prova em cinza prova menos. */ .quadro.fotografica .esteira{aspect-ratio:4/5} .palco .quadro.fotografica{background:var(--preto);padding:0} .palco .quadro.fotografica .esteira img{object-fit:cover;filter:none} /* O TRILHO SOBRE FOTOGRAFIA E BRANCO CHAPADO, SEM MISTURA NENHUMA. Tentei `mix-blend-mode:difference` aqui e escrevi ao lado que a diferenca nao inventa matiz. ESTAVA ERRADO: ela nao inventa sobre cinza, mas sobre cor saturada ela inverte o matiz — branco sobre a terra vermelha da laterita saiu CIANO. Isso e o Vicio 4 ao pe da letra, cor que nao existe na cena, e e a terceira vez que a mistura de camada e reprovada neste projeto. A regra final, sem excecao: SOBRE FOTOGRAFIA, TIPOGRAFIA E BRANCO PURO E PONTO. Se o branco nao se ler sobre aquela imagem, a imagem e que esta errada para levar tipografia em cima. */ .palco .quadro.fotografica .selo-fixo{color:#FFFFFF;mix-blend-mode:normal} .palco .quadro.fotografica .selo-fixo .centro{top:50%;bottom:auto; transform:translate(-50%,-50%)} /* ── 63 · O FILME QUE SE APRESENTA SOZINHO ──────────────────────── 29 ago 2026. Mecânica lida no Reframme e no Blackhaus, e nos dois ela é EXATAMENTE a mesma: um vídeo só, sangrando a tela inteira autoplay · loop · mudo · SEM CONTROLE NENHUM object-fit: cover e no Blackhaus, um invólucro de 7.772 px com o vídeo GRUDADO: ele segura enquanto o texto passa por cima Ninguém clica em nada. A peça se apresenta. Aqui ela é feita SEM ARQUIVO DE VÍDEO: a substituição já existe em CSS desde a seção 32, e uma sequência do mesmo objeto em climas diferentes é um filme — só que ele pesa 2 MB em vez de 40, carrega na hora e continua obedecendo a lei da casa, porque não depende de script nenhum para ser visto. A CONSTANTE é o que permite isso: são nove quadros do MESMO edifício. Sem ela, isto seria um slideshow de prédios diferentes. */ .filme-longo{position:relative;background:var(--preto)} .filme{position:sticky;top:0;height:100vh;overflow:hidden; background:var(--preto)} .filme .fita{position:absolute;inset:0} .filme .fita img{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;opacity:0} /* o véu existe para a tipografia ter onde pousar, e é PRETO puro em opacidade — não é cor nova entrando na cena, é falta de luz. O Vício 4 continua obedecido. */ .filme::after{content:"";position:absolute;inset:0;z-index:1; background: linear-gradient(96deg,rgba(12,15,13,.72) 0%,rgba(12,15,13,.34) 46%, rgba(12,15,13,0) 78%), linear-gradient(180deg,rgba(12,15,13,.5) 0%,rgba(12,15,13,.2) 40%, rgba(12,15,13,.7) 100%)} .filme .marca-filme{position:absolute;z-index:2;left:var(--mg); bottom:38px;color:#FFFFFF;font-family:var(--mono);font-size:9.5px; letter-spacing:.2em;text-transform:uppercase} .filme .marca-filme span{display:block;opacity:.62;margin-top:6px; letter-spacing:.16em} /* O texto passa POR CIMA do filme, e cada passo ocupa uma tela. Nada desliza: o que move é a rolagem da pessoa. */ .filme-longo .passos{position:relative;z-index:3;margin-top:-100vh} .filme-longo .passo{min-height:100vh;display:flex;flex-direction:column; justify-content:center;padding:0 var(--mg);color:#FFFFFF; max-width:820px} .filme-longo .passo .k{font-family:var(--mono);font-size:10px; letter-spacing:.22em;text-transform:uppercase;opacity:.7} .filme-longo .passo .t{font-family:var(--display);font-weight:400; font-size:clamp(38px,5.4vw,86px);line-height:1.02;letter-spacing:-.02em; margin-top:18px} .filme-longo .passo p{margin-top:24px;font-size:clamp(16px,1.35vw,19px); line-height:1.62;max-width:52ch;color:rgba(255,255,255,.9)} @supports (animation-timeline: view()){ .filme-longo .passo{animation:entra linear both; animation-timeline:view();animation-range:entry 8% entry 46%} } @media (max-width:820px){ .filme{height:100svh} .filme-longo .passo .t{font-size:clamp(30px,8vw,44px)} } /* nove quadros do mesmo edifício, 2,6 s cada — um filme de 23 s */ .cf-torre{--n:9;--ms:2600;--nome-ciclo:cf-torre} @keyframes cf-torre{0%{opacity:0}1.4815%{opacity:1}11.1111%{opacity:1}12.5926%{opacity:0}100%{opacity:0}} .filme .fita img{animation-name:var(--nome-ciclo,none)} /* A CONTA DO TEMPO PRECISA ALCANÇAR A FITA TAMBÉM. A seção 32 declarou o atraso e a duração para `.esteira img` e `.selo img`. A fita nasceu fora dessa lista e veio com duração ZERO — nenhuma imagem acendia, e o filme era um retângulo preto. É o mesmo defeito da esteira seca de 26 de agosto, por um seletor novo: quem cria um recipiente novo precisa inscrevê-lo aqui. */ .filme .fita img{ animation-timing-function:linear; animation-iteration-count:infinite; animation-delay:calc(var(--i) * var(--ms) * -1ms); animation-duration:calc(var(--n) * var(--ms) * 1ms)} /* ═══════════════════════════════════════════════════════════════════ 64 · A CADÊNCIA · 29 ago 2026 "ainda to achando o site um pouco simples demais" Medido no Mill3: nove linhas na home, NOVE ALTURAS DIFERENTES, de 151 px a 1.880 px — variação de doze vezes. Nenhuma se repete. O nosso fazia o oposto: toda faixa com 100vh, por decisão escrita na seção 56. Aquela decisão resolveu um problema real — duas coisas competindo na tela — e criou outro: CADÊNCIA DE METRÔNOMO. Se tudo dura o mesmo tempo, nada tem ênfase. É daí que vem o "simples". Não falta efeito: falta DIFERENÇA. A correção não abandona o encaixe. Cria TIPOS DE LINHA com altura própria, e reserva a tela cheia para as que merecem parar a leitura. */ .linha-curta{min-height:auto;padding-block:clamp(56px,7vh,84px); scroll-snap-align:none} .linha-media{min-height:62vh;padding-block:clamp(64px,9vh,110px); scroll-snap-align:none;display:flex;flex-direction:column; justify-content:center} .linha-longa{min-height:150vh;scroll-snap-align:none} /* a tela cheia continua existindo — e agora ela SIGNIFICA alguma coisa, porque deixou de ser o padrão de todas as faixas */ /* ── 65 · A PARALAXE, EM VELOCIDADES DIFERENTES ─────────────────── 46 elementos do Mill3 carregam velocidade própria, e as declaradas são 0.7, 0.9, -1.2, -2.4 e -8. Duas NEGATIVAS: o elemento sobe enquanto a página desce. É daí que vem a fluidez — não da rolagem amortecida sozinha. As camadas andam em ritmos distintos, e o olho lê profundidade. Aqui isso é feito com a linha do tempo de rolagem do próprio navegador. NÃO sequestra a roda, e é essa a diferença que importa: o amortecimento em JavaScript brigou com o encaixe e travou o site inteiro em 27 de agosto. A fluidez vinha da paralaxe o tempo todo. */ @supports (animation-timeline: view()){ .pxl,.pxm,.pxr,.pxn{animation:desliza linear both; animation-timeline:view();animation-range:cover 0% cover 100%} @keyframes desliza{ from{transform:translateY(calc(var(--px,1) * 7vh))} to {transform:translateY(calc(var(--px,1) * -7vh))}} .pxl{--px:.35} /* lenta · fundo, imagem grande */ .pxm{--px:.7} /* média · bloco de apoio */ .pxr{--px:1.25} /* rápida · legenda, metadado */ .pxn{--px:-.6} /* NEGATIVA · sobe enquanto a página desce */ } /* ── 66 · A ESCADA DE QUATRO TEMPOS ─────────────────────────────── O Mill3 usa quatro durações — 0,25s / 0,35s / 0,5s / 0,75s — e quatro curvas. O nosso usava praticamente uma curva para tudo, e tempo único achata a hierarquia do mesmo jeito que altura única. Fica declarado como vocabulário, para nunca mais sair um número inventado no meio da folha. */ :root{ --t-toque:250ms; /* estado de item: hover, foco */ --t-peca:350ms; /* uma peça aparecendo */ --t-bloco:500ms; /* um bloco inteiro */ --t-tela:750ms; /* a tela mudando de assunto */ --e-entra-sai:cubic-bezier(.645,.045,.355,1); --e-so-sai:cubic-bezier(.215,.61,.355,1); --e-so-entra:cubic-bezier(.55,.055,.675,.19)} /* ── 67 · O CORPO ENCOLHE PARA O TÍTULO CRESCER ─────────────────── Medido: o corpo do Mill3 tem 14 px e o título 48 px — razão de mais de três para um. O nosso tinha corpo de 16 a 19 px. O título não precisa aumentar. O que rouba o silêncio em volta dele é o corpo ocupar espaço demais. */ .palco .dito p,.filme-longo .passo p{font-size:clamp(14.5px,1.05vw,16px); line-height:1.68} .palco .dito .k,.filme-longo .passo .k{font-size:9.5px} /* ── 68 · A MÍDIA JÁ NASCE AMPLIADA ─────────────────────────────── No Mill3 a imagem de projeto repousa em scale(1.05). Não é enfeite: é o que dá ao hover para onde ir sem abrir fresta na borda. */ .quadro.fotografica .esteira img,.filme .fita img{transform:scale(1.05)} .lista .l{transition:background var(--t-toque) var(--e-so-sai)} /* ── 69 · O RESPIRO · a linha curta que faltava ─────────────────── Depois de criar os tipos de linha, medi de novo: as alturas passaram de UMA para cinco, mas ficaram todas entre 558 e 900 px. Variação de menos de dois. No Mill3 a variação é de DOZE — e o que abre esse intervalo é a linha de 151 px, o `movable-text`. Faltava o extremo curto. Sem ele, "variado" ainda soa regular. O respiro é uma frase só, atravessada, sem caixa e sem fundo. Ele não informa: ele SEPARA. E é a peça mais barata da página. */ .respiro{padding-block:clamp(26px,3.4vh,44px);overflow:hidden; border-top:1px solid rgba(12,15,13,.12); border-bottom:1px solid rgba(12,15,13,.12)} .respiro .f{font-family:var(--display);font-weight:400; font-size:clamp(20px,2.5vw,38px);line-height:1.1;letter-spacing:-.015em; white-space:nowrap;display:flex;align-items:baseline;gap:1.2em} .respiro .f span{opacity:.28} .respiro .f b{font-weight:400} .escuro .respiro,.respiro.escura{background:var(--preto);color:#FFFFFF; border-color:rgba(255,255,255,.16)} @media (max-width:820px){ .respiro .f{white-space:normal;display:block} .respiro .f span{display:none} } /* ── 70 · O ÍNDICE DE FRENTES, DENTRO DA PÁGINA ─────────────────── 29 ago 2026: "tu vê as frentes todas por lista em alguns momentos, não tem que ficar clicando lá em cima uma por uma". É o `featured-projects` do Mill3 — 1.600 px de altura, uma LISTA de linhas largas, cada uma um link inteiro. A navegação de topo existe, mas ela não é o caminho: o caminho é a lista, que aparece de novo quando a leitura termina. Isto conserta uma coisa que estava errada aqui: a barra de topo era a ÚNICA porta para as seis frentes. Quem chega não sabe que são seis competências no mesmo nível — descobre clicando uma por uma. */ .indice{padding-block:clamp(70px,9vh,120px);border-top:1px solid rgba(12,15,13,.14)} .indice > .k{font-family:var(--mono);font-size:10px;letter-spacing:.22em; text-transform:uppercase;padding:0 var(--mg);opacity:.6} .indice .fr{display:block;text-decoration:none;color:inherit; border-bottom:1px solid rgba(12,15,13,.14); display:grid;grid-template-columns:64px 1fr auto;align-items:baseline; gap:0 24px;padding:clamp(18px,2.3vh,30px) var(--mg); transition:background var(--t-toque) var(--e-so-sai), padding-left var(--t-peca) var(--e-entra-sai)} .indice .fr:first-of-type{border-top:1px solid rgba(12,15,13,.14)} .indice .fr .n{font-family:var(--mono);font-size:11px;letter-spacing:.14em; opacity:.5} .indice .fr .nm{font-family:var(--display);font-weight:400; font-size:clamp(28px,4.2vw,62px);line-height:1;letter-spacing:-.02em} .indice .fr .d{font-family:var(--body);font-size:12.5px;line-height:1.5; max-width:36ch;text-align:right;opacity:.66} .indice .fr:hover{background:var(--preto);color:#FFFFFF; padding-left:calc(var(--mg) + 18px)} .indice .fr:hover .n,.indice .fr:hover .d{opacity:.72} .indice .fr[aria-current="page"]{opacity:.42} @media (max-width:820px){ .indice .fr{grid-template-columns:44px 1fr;gap:4px 16px} .indice .fr .d{grid-column:2;text-align:left;max-width:none;margin-top:8px} } /* ── 71 · AS REDES · sair do site é uma das funções do site ─────── Faltava o óbvio: nenhum caminho para o Instagram, para o e-mail nem para o WhatsApp. Um portfólio que não deixa falar com quem o fez está incompleto, por mais bem diagramado. A barra vive no pé, em todas as páginas, e é a mesma peça. */ .redes{display:flex;flex-wrap:wrap;gap:0 34px;padding:26px var(--mg) 0; border-top:1px solid rgba(255,255,255,.16);margin-top:34px} .redes a{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em; text-transform:uppercase;text-decoration:none;color:inherit; padding:6px 0;position:relative; transition:opacity var(--t-toque) var(--e-so-sai)} .redes a::after{content:"";position:absolute;left:0;right:100%;bottom:2px; height:1px;background:currentColor; transition:right var(--t-peca) var(--e-entra-sai)} .redes a:hover::after{right:0} /* ── 72 · O ENCAIXE SAI DE VEZ ──────────────────────────────────── 29 ago 2026, terceira reclamação sobre a mesma rolagem: "às vezes depois de rolar o mouse, ele puxa sozinho para mais uma rolagem". Isso é o `scroll-snap` fazendo exatamente o que foi mandado fazer: quando a roda para, ele arrasta a página até a faixa mais próxima. Já tinha sido afrouxado de `always` para `proximity` em 27 de agosto, e afrouxar não bastou — proximity ainda puxa. A decisão de 25 de agosto ("um assunto por tela") não some: ela agora é feita por ALTURA, na seção 64, e altura não sequestra rolagem nenhuma. O encaixe era o jeito errado de conseguir a mesma coisa. Terceira e última lição da mesma família, e ela é geral: NADA NESTE SITE MEXE NA ROLAGEM. A rolagem é do navegador. */ html{scroll-snap-type:none} .tela-cheia,.hero{scroll-snap-align:none;scroll-snap-stop:normal} /* ── 73 · A ESCALA DE REPOUSO NÃO PODE SANGRAR ──────────────────── A seção 68 copiou do Mill3 o `scale(1.05)` de repouso. No Mill3 ele está numa imagem DENTRO de um cartão; aqui eu apliquei numa imagem `inset:0` que já ocupa a tela inteira — e 5% de 1440 px são 72 px saindo para fora, que só não viraram barra de rolagem porque o pai corta. Efeito copiado sem o contexto dele vira defeito. A ampliação fica só onde há moldura; no filme de tela cheia, a imagem repousa em 1. */ .filme .fita img{transform:none} .quadro.fotografica .esteira img{transform:scale(1.04); transition:transform var(--t-tela) var(--e-entra-sai)} .quadro.fotografica:hover .esteira img{transform:scale(1)} /* ── 74 · O ARQUIVO QUE SE FOLHEIA · a página Sobre ─────────────── 29 ago 2026: "quero algo bem legal, no estilo do MILL3, motion mostrando as gravuras, o sistema de brandbook, marca, pode ser em motion bem rápido, transformando elas em arquivo editorial". A mecânica é a `animated-medias-grid` do Mill3 — a linha de 1.880 px que abre a home deles. Várias mídias em posições fixas de uma grade, cada uma trocando o CONTEÚDO no próprio ritmo, e nenhuma delas sincronizada com a vizinha. O olho nunca vê a página inteira mudar: vê UMA coisa mudar, sempre outra. Aqui são quatro janelas, quatro acervos e quatro velocidades primas entre si — 900, 1.100, 1.300 e 1.700 ms. Números primos entre si fazem o ciclo completo demorar horas para se repetir, e é isso que impede a peça de parecer um laço. Rápido, como ele pediu: a gravura troca a cada 0,9 s. */ .arquivo{display:grid;gap:2px;background:rgba(12,15,13,.14); grid-template-columns:1.35fr 1fr 1fr; grid-template-rows:repeat(2,minmax(0,42vh)); padding:0} .arquivo .jan{position:relative;overflow:hidden;background:var(--preto)} .arquivo .jan:nth-child(1){grid-row:span 2} .arquivo .jan img{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;opacity:0; animation-name:var(--nome-ciclo,none);animation-timing-function:linear; animation-iteration-count:infinite; animation-delay:calc(var(--i) * var(--ms) * -1ms); animation-duration:calc(var(--n) * var(--ms) * 1ms)} .arquivo .jan .r{position:absolute;left:14px;bottom:12px;z-index:2; font-family:var(--mono);font-size:9px;letter-spacing:.18em; text-transform:uppercase;color:#FFFFFF;opacity:.78} @media (max-width:820px){ .arquivo{grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,30vh)} .arquivo .jan:nth-child(1){grid-row:span 1} } /* quatro acervos, quatro tempos que não batem entre si */ .cf-gr{--n:8;--ms:900;--nome-ciclo:cf-gr} @keyframes cf-gr{0%{opacity:0}1.6667%{opacity:1}12.5%{opacity:1}14.1667%{opacity:0}100%{opacity:0}} .cf-ed{--n:8;--ms:1100;--nome-ciclo:cf-ed} @keyframes cf-ed{0%{opacity:0}1.6667%{opacity:1}12.5%{opacity:1}14.1667%{opacity:0}100%{opacity:0}} .cf-lv{--n:6;--ms:1300;--nome-ciclo:cf-lv} @keyframes cf-lv{0%{opacity:0}2.2222%{opacity:1}16.6667%{opacity:1}18.8889%{opacity:0}100%{opacity:0}} .cf-mt{--n:6;--ms:1700;--nome-ciclo:cf-mt} @keyframes cf-mt{0%{opacity:0}2.2222%{opacity:1}16.6667%{opacity:1}18.8889%{opacity:0}100%{opacity:0}} /* A GRADE PRECISA FECHAR. Com a primeira janela ocupando duas linhas, sobram QUATRO células e eu tinha três janelas — a célula vazia deixou o pé grudado aparecer por trás, que é exatamente o defeito da seção 61 voltando por outra porta. A última janela passa a ocupar duas colunas, e a faixa nasce preta para nunca mais haver "por trás". */ .arquivo{background:var(--preto)} .arquivo .jan:nth-child(4){grid-column:span 2} @media (max-width:820px){.arquivo .jan:nth-child(4){grid-column:span 2}} /* O rótulo some sobre a página branca do livro. Ele ganha uma sombra de véu — preto puro esmaecido, não cor nova, e a mesma solução do filme: falta de luz, nunca matiz. */ .arquivo .jan .r{padding:5px 9px;background:rgba(12,15,13,.62);left:0;bottom:0} /* ── 75 · A MARGEM DE SEGURANÇA · e sangrar passa a ser DECLARADO ── 29 ago 2026, terceira reclamação de "coisas colando na página". Medido em 19 das 20 páginas: texto a x=0 e a folga=0 na direita. A causa não era um componente: era a AUSÊNCIA DE REGRA. Cada faixa punha a própria margem quando o autor lembrava, e `.bloco`, `.lista`, `.motor` e `.proxima` simplesmente não lembravam. Vinte remendos consertariam hoje e falhariam na próxima faixa criada. A regra passa a ser a inversa, e é a que não tem como esquecer: TODA FAIXA DE PRIMEIRO NÍVEL TEM MARGEM. Sangrar até a borda é EXCEÇÃO, e precisa se declarar. Quem sangra está na lista abaixo, nominalmente, e o motivo é sempre o mesmo: são peças cuja matéria é a própria borda — imagem de tela cheia, trilho de canto, faixa de cor. */ body > section,body > article,body > figure,body > footer,body > div.par{ padding-left:var(--mg);padding-right:var(--mg); box-sizing:border-box} /* as que sangram, e por quê */ body > .hero, /* o letreiro é a página inteira */ body > .filme-longo, /* imagem `inset:0`, cobre tudo */ body > .arquivo, /* a grade do arquivo é uma superfície só */ body > .respiro, /* a frase atravessa, e é isso que ela faz */ body > .indice, /* cada linha é um alvo de clique inteiro */ body > .cortina, body > .intro{padding-left:0;padding-right:0} /* O `.campo` SAIU DESTA LISTA, e pelo mesmo motivo que o trilho saiu: eu confundi FUNDO que sangra com CONTEÚDO que sangra. O fundo de uma faixa preenche a caixa inteira, PADDING INCLUÍDO — ele chega à borda sozinho, sem precisar de ajuda. Zerar a margem não faz o fundo sangrar mais: só cola o texto na tela. A lista vale exclusivamente para faixas cujos FILHOS precisam tocar a borda: imagem `inset:0`, grade de superfície, frase que atravessa. Duas vezes o mesmo engano, e agora está escrito. */ /* O TRILHO SAIU DESTA LISTA, e o erro foi meu ao escrevê-la. O que sangra nele é o FUNDO, nunca o conteúdo — e ele já tinha a própria margem, declarada na seção 2. Ao incluí-lo aqui eu zerei essa margem e colei "Studio MOH" e "Contato" nas duas bordas da tela, em todas as páginas. Sangrar fundo e sangrar conteúdo são coisas diferentes, e a lista só vale para a segunda. */ /* quem sangra por fora precisa devolver a margem POR DENTRO, senão o texto encosta do mesmo jeito — o erro é o mesmo, um nível abaixo. */ .indice > .k,.indice .fr{padding-left:var(--mg);padding-right:var(--mg)} .respiro{padding-left:var(--mg);padding-right:var(--mg)} /* O ATALHO `padding` ERA A CAUSA, e ele venceu por especificidade. A seção 75 mandou toda faixa ter margem com `body > section`, que pesa dois elementos; `.linha-media{padding: X 0}` pesa uma classe, e classe ganha de elemento em qualquer ordem. O zero lateral do atalho apagava a margem sem aparecer em lugar nenhum. Lição que vale para a folha inteira: em faixa de primeiro nível, NUNCA usar o atalho `padding` — só `padding-block`. O eixo horizontal pertence à seção 75, e a mais ninguém. */ /* ── 76 · O LETREIRO DO PÉ CABE NA TELA ─────────────────────────── Medido em 820, 600 e 390 px: "STUDIO MOH" do rodapé saía 64 px para fora em TODAS as páginas. O tamanho vinha de `vw`, que é a largura da JANELA — e ignora a margem que a janela já gastou dos dois lados. É literalmente o mesmo defeito do letreiro do herói, corrigido em 26 de agosto e repetido aqui: quem manda no corpo da letra é a largura DISPONÍVEL, nunca a da janela. A conta certa desconta as duas margens antes de dividir. O vão da espiral entra na conta como uma letra a mais. */ .pe-home .nome{font-size:min(13.2vw, calc((100vw - var(--mg) * 2) / 8.2)); max-width:100%} @media (max-width:600px){ .pe-home .nome{font-size:calc((100vw - var(--mg) * 2) / 8.6)} } /* ── 77 · O CORTE PELA METADE ───────────────────────────────────── 29 ago 2026: "quando rolo pra baixo fica muita coisa pela metade". Medi antes de mexer: 0,53 peça de conteúdo cortada pela borda da janela, por tela, em oito páginas. Uma a cada duas telas mostra um título ou um parágrafo partido ao meio. A saída ÓBVIA seria o encaixe de rolagem — e ela está proibida, com razão, desde a seção 72: ele puxa a página sozinho. Então a saída é outra, e é melhor: SE A BORDA DA JANELA CAI NO VAZIO, NÃO CORTA NADA. Basta que a folga vertical entre blocos seja MAIOR que o passo comum de rolagem. Aí a parada quase sempre acontece no branco, e o que entra e sai de tela é espaço, não frase. Não é encaixe: é respiro dimensionado. */ .linha-curta{padding-block:clamp(70px,8.5vh,110px)} .linha-media{padding-block:clamp(96px,12vh,160px)} .indice{padding-block:clamp(96px,12vh,150px)} body > .bloco,body > .fora,body > .proxima{padding-block:clamp(90px,11vh,145px)} /* e a faixa de tela cheia desconta o trilho: o conteúdo nasce ABAIXO da barra, e não por baixo dela. */ .tela-cheia{padding-top:calc(var(--trilho-h,52px) + 2vh)} .abre-pag.tela-cheia{padding-top:min(24vh,190px)} /* A FOLGA VOLTOU AO MEIO-TERMO. Inflei a folga vertical na seção 77 apostando que a borda da janela cairia no vazio — e MEDI DEPOIS: 0,53 peça cortada por tela virou 0,52, dentro do ruído, e a página Sobre PIOROU, de 0,38 para 0,72. A aposta estava errada e o registro fica: com rolagem livre, algum corte é inevitável, e o Mill3 também corta. O que faz a peça parecer bem-feita não é a ausência de corte — é a linha do corte cair entre blocos legíveis, e isso já é o que os tipos de linha da seção 64 fazem. Folga a mais só produz página vazia. */ /* ── 78 · O RESPIRO ANDA ────────────────────────────────────────── Ele nasceu como faixa curta e ficou PARADO, com a frase cortada nas duas bordas. Frase cortada e imóvel lê como defeito — e estava certo ler assim: era um `movable-text` sem o `movable`. O conteúdo já vinha duplicado, então basta deslocar metade e voltar ao ponto: o laço é invisível porque a segunda metade é idêntica à primeira. Nada aparece, nada some — é uma faixa contínua. Esta é a ÚNICA coisa do site que se move sem a rolagem, e ela se justifica: não é ênfase, é uma superfície contínua, como o trilho. */ .respiro{padding-left:0;padding-right:0} .respiro .f{animation:corre 34s linear infinite;will-change:transform} @keyframes corre{from{transform:translateX(0)}to{transform:translateX(-50%)}} .respiro:hover .f{animation-play-state:paused} /* ── 79 · A IMAGEM NÃO REPETE A ARQUITETURA ─────────────────────── 29 ago 2026: "na aba de imagens, não quero que repite a de arquitetura, quero as imagens cinematográficas de empreendimentos passando". As duas frentes mostram o MESMO edifício — e é isso que prova a constante declarada. O que muda é o REGISTRO, e a diferença é a própria oferta de cada uma: ARQUITETURA documenta. luz dura, nitidez, o objeto legível IMAGEM encena. anamórfico, grão, contraluz, névoa, folhagem desfocada em primeiro plano Mesmo objeto, duas leituras. Se as duas fossem iguais, uma das duas frentes não precisaria existir. */ .cf-cine{--n:6;--ms:2900;--nome-ciclo:cf-cine} @keyframes cf-cine{0%{opacity:0}1.6667%{opacity:1}16.6667%{opacity:1}18.3333%{opacity:0}100%{opacity:0}} /* ── 80 · MAIS OUSADIA, E ELA VEM DA ROLAGEM ────────────────────── 29 ago 2026: "deixe o site mais ousado com mais movimento". O que entra NÃO é efeito novo: é o mesmo mecanismo já provado — linha do tempo de rolagem — aplicado onde ainda não estava. Nada se move sozinho, nada disputa a roda. Quem move é a pessoa. */ /* 1 · o índice se descobre linha a linha, da esquerda para a direita. É a revelação por CORTE da seção 50, que a folha reserva para tipografia — e uma lista de nomes é tipografia. */ @supports (animation-timeline: view()){ .indice .fr{animation:descobre linear both;animation-timeline:view(); animation-range:entry 12% entry 74%} @keyframes descobre{ from{clip-path:inset(0 100% 0 0);opacity:.25} to {clip-path:inset(0 0 0 0);opacity:1}} /* 2 · o número da linha sobe contra a rolagem. Camadas em ritmos diferentes é o que o Mill3 faz com cinco velocidades. */ .indice .fr .n{animation:sobe-n linear both;animation-timeline:view(); animation-range:cover 0% cover 100%} @keyframes sobe-n{from{transform:translateY(14px)}to{transform:translateY(-14px)}} /* 3 · a frase de campo entra por corte, e é a única coisa da faixa que se move — o fundo fica parado, como manda a doutrina. */ .campo .frase .pl{animation:corte-pl linear both;animation-timeline:view(); animation-range:entry 10% entry 68%; animation-delay:calc(var(--w,0) * 40ms)} @keyframes corte-pl{ from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}} .campo .frase .pl{display:inline-block} /* 4 · o passo do filme sobe devagar contra o fundo travado. Não é deslize decorativo: é a diferença de velocidade que faz a imagem parecer parada e o texto parecer passar por cima. */ .filme-longo .passo{animation:entra linear both,passa linear both; animation-timeline:view(),view(); animation-range:entry 8% entry 46%,cover 0% cover 100%} @keyframes passa{from{transform:translateY(5vh)}to{transform:translateY(-5vh)}} } /* ── 81 · O ACABAMENTO ──────────────────────────────────────────── 29 ago 2026. Nada aqui é ideia nova: é a diferença entre uma peça montada e uma peça terminada. São os detalhes que ninguém nota quando estão certos e todo mundo sente quando faltam. */ /* 1 · A SELEÇÃO tem cor da casa. Azul de sistema numa peça preta e branca é a única cor que entra sem ninguém ter decidido. */ ::selection{background:var(--preto);color:#FFFFFF} .escuro ::selection,.campo ::selection,.filme ::selection, .fora ::selection,.percurso ::selection{background:#FFFFFF;color:var(--preto)} /* 2 · O FOCO DE TECLADO existe e é visível. Quem navega por Tab hoje não enxerga onde está — e isso não é detalhe de gosto. */ a:focus-visible,button:focus-visible{outline:2px solid currentColor; outline-offset:4px;border-radius:1px} a:focus:not(:focus-visible){outline:none} /* 3 · A PÁGINA EM QUE SE ESTÁ se declara na barra. Sem isso, o trilho é uma lista de destinos e nunca um mapa. */ .trilho a[aria-current="page"]{opacity:.42} /* 4 · A IMAGEM CHEGA, e não pisca. Sem isto, a foto aparece de golpe quando termina de baixar, e o golpe é o oposto da substituição que a marca escolheu. */ /* CUIDADO, e eu tropecei nele: o ATALHO `animation` reescreve TUDO — duração, repetição e nome. Aplicado em `.quadro img` ele atingiu as imagens da esteira, trocou a repetição infinita por uma só e PAROU O CICLO. É o mesmo tipo de armadilha do atalho `padding`. A regra vale só para imagem que NÃO está num ciclo. */ figure img,.par img{animation:acende 700ms var(--e-so-sai) both} @keyframes acende{from{opacity:0}to{opacity:1}} /* 5 · A LISTA DE ESTUDOS ganha o mesmo toque do índice: a linha inteira é o alvo, e ela se acende. Eram dois padrões de lista no mesmo site, e um deles não respondia ao mouse. */ /* SEM MARGEM NEGATIVA. Ela fazia a linha ficar mais larga que a lista que a contém, e a bateria acusou "filho maior que o pai" em quatro páginas. O realce acontece DENTRO da caixa, que é onde ele cabe. */ .lista .l{transition:background var(--t-toque) var(--e-so-sai), padding-left var(--t-peca) var(--e-entra-sai)} .lista a.l:hover{background:var(--preto);color:#FFFFFF;padding-left:18px} .lista a.l:hover .op,.lista a.l:hover .m,.lista a.l:hover .d{opacity:.72} /* 6 · TIPOGRAFIA: nada de órfã, e o hífen só onde precisa. */ h1,h2,.t,.nm,.frase,.nome{text-wrap:balance;hyphens:none} p,.sub,.v{text-wrap:pretty} /* 7 · O CURSOR diz o que é clicável, e o que não é. */ .esteira,.fita,.jan,.selo-fixo{cursor:default;user-select:none} /* 8 · IMPRESSÃO: quem imprime a proposta não leva fundo preto de brinde, e os endereços aparecem por extenso. */ @media print{ .trilho,.cortina,.intro,.respiro,.filme-longo{display:none} body{background:#FFFFFF;color:#000000} a[href^="http"]::after{content:" (" attr(href) ")";font-size:9px} } /* ── 82 · O FILME DO ESTUDO 05, E ELE EXISTE ────────────────────── 29 ago 2026. A página de Filmes declarava, em voz alta, que não havia filme. Era verdade como AUDIOVISUAL — e era falso como obra: o filme estava inteiramente escrito no Estudo 05 desde 25 de agosto. Cinco movimentos, hora por hora, 56 segundos, sem locução e sem trilha. Ele passa a EXISTIR, montado com as próprias fotografias do Estudo e com as durações declaradas lá dentro. Não é um substituto de vídeo: é a obra na forma que o estúdio consegue entregar hoje, e ela obedece a regra de motion ao pé da letra: SUBSTITUIÇÃO, NUNCA TRANSIÇÃO. O movimento V troca de lugar com o I na mesma posição ótica. Nada desliza, nada escala. Quem se move é a luz, e ela leva oito horas. Sem fade em nenhum corte: o quadro troca inteiro, de uma vez. */ .filme05{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden; background:var(--preto)} .filme05 img{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;opacity:0;animation-duration:56s; animation-timing-function:steps(1,end);animation-iteration-count:infinite} .filme05 .mv{position:absolute;left:0;bottom:0;z-index:2; padding:14px 18px;background:rgba(12,15,13,.6);color:#FFFFFF; font-family:var(--mono);font-size:10px;letter-spacing:.18em; text-transform:uppercase;opacity:0;animation-duration:56s; animation-timing-function:steps(1,end);animation-iteration-count:infinite} .filme05 .mv b{font-family:var(--display);font-size:15px;font-weight:400; letter-spacing:0;text-transform:none;display:block;margin-top:5px} @keyframes mv0{0%{opacity:0}0.0000%{opacity:1}21.4286%{opacity:0}100%{opacity:0}} .filme05 .q0,.filme05 .l0{animation-name:mv0} @keyframes mv1{0%{opacity:0}21.4286%{opacity:1}35.7143%{opacity:0}100%{opacity:0}} .filme05 .q1,.filme05 .l1{animation-name:mv1} @keyframes mv2{0%{opacity:0}35.7143%{opacity:1}60.7143%{opacity:0}100%{opacity:0}} .filme05 .q2,.filme05 .l2{animation-name:mv2} @keyframes mv3{0%{opacity:0}60.7143%{opacity:1}78.5714%{opacity:0}100%{opacity:0}} .filme05 .q3,.filme05 .l3{animation-name:mv3} @keyframes mv4{0%{opacity:0}78.5714%{opacity:1}100.0000%{opacity:0}100%{opacity:0}} .filme05 .q4,.filme05 .l4{animation-name:mv4} /* ── 83 · O ÍNDICE DE ESTUDOS GANHA CAPA ────────────────────────── 29 ago 2026: "abas mais simplificadas pro cliente entender que é um portfólio e onde ele entraria pra pesquisar". O índice era uma LISTA DE TEXTO, sem miniatura — decisão de agosto, e ela tinha razão: miniatura vira vitrine, e o produto do Estudo é o texto. Mas quem chega de fora não sabe disso ainda, e uma lista de seis títulos não diz que ali existe trabalho para ver. A saída não é abandonar a decisão: é ADMITIR UMA PORTA. A capa é quadrada, pequena, em cinza, e só ganha cor quando o mouse chega — ela convida sem prometer que a imagem é o assunto. O Estudo 06 não tem fotografia, e a peça diz isso em vez de inventar uma: fica a tipografia sobre preto, que é o que ele realmente é. */ .grade-estudos{display:grid;gap:2px; grid-template-columns:repeat(auto-fill,minmax(min(100%,268px),1fr))} .grade-estudos a{position:relative;display:block;text-decoration:none; color:inherit;background:var(--preto);aspect-ratio:1;overflow:hidden} .grade-estudos img{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;filter:grayscale(1) contrast(1.05); transition:filter var(--t-tela) var(--e-entra-sai), transform var(--t-tela) var(--e-entra-sai); transform:scale(1.04)} .grade-estudos a:hover img{filter:none;transform:scale(1)} .grade-estudos .cap{position:absolute;inset:auto 0 0 0;z-index:2; padding:16px 18px;color:#FFFFFF; background:linear-gradient(180deg,rgba(12,15,13,0),rgba(12,15,13,.82))} .grade-estudos .cap .n{font-family:var(--mono);font-size:9.5px; letter-spacing:.2em;opacity:.8} .grade-estudos .cap .t{font-family:var(--display);font-size:clamp(17px,1.5vw,23px); line-height:1.08;margin-top:6px} .grade-estudos .semfoto{display:flex;align-items:flex-end; border:1px solid rgba(255,255,255,.14)} .grade-estudos .semfoto .cap{background:none;position:static;width:100%} body > .grade-estudos{padding-left:0;padding-right:0} /* ── 84 · O PÉ DEIXA DE SER DESCOBERTO ──────────────────────────── 29 ago 2026, terceira captura mostrando a mesma coisa: a primeira linha de links do rodapé aparecendo CORTADA AO MEIO — "Leitura", "Imagem", "Silêncios" e "Estudos" partidos na horizontal. Não era tipografia. Era a seção 54: o pé fica GRUDADO no fundo da pilha e a última faixa sai por cima dele. Enquanto ela sai, o pé aparece pela metade — e uma linha de texto cortada ao meio não lê como revelação, lê como defeito. Está certo ler assim. O efeito era bonito e custou três reclamações. Ele sai. O PÉ É UMA FAIXA COMO QUALQUER OUTRA. Ele chega inteiro, ou não chega. Fica a lição, que é a mesma da seção 61 e da 72: efeito que revela conteúdo aos poucos precisa revelar em BLOCOS LEGÍVEIS. Se a linha de corte cai no meio de uma palavra, o efeito está errado — não a palavra. */ body > footer.pe-fundo{position:static;z-index:1} .pe-fundo{position:static} /* ── 85 · O CORTE NÃO PODE CORTAR A LETRA ───────────────────────── 30 ago 2026: "algumas letras aparecem cortadas" — o "g" de Imagem sem a perna, o "S" de Sistemas sem o topo. Medido, e a conta e clara: corpo da letra 93,6 px caixa da linha 89,8 px A caixa e MENOR que a letra. Numa serifa de contraste alto com ascendente e descendente longas, isso e normal — a letra transborda a caixa de propósito, e o navegador desenha por fora sem problema. O problema e o `clip-path: inset(0 ...)`, que recorta EXATAMENTE na caixa. Ele foi escrito para revelar da esquerda para a direita, e sem querer passou a recortar em cima e embaixo tambem. A correcao e dizer que na vertical o corte comeca FORA da caixa. O recorte horizontal continua igual; o vertical deixa de existir. */ @keyframes corte{ from{clip-path:inset(-0.25em 100% -0.3em 0)} to {clip-path:inset(-0.25em 0 -0.3em 0)}} @keyframes corte-pl{ from{clip-path:inset(-0.25em 100% -0.3em 0)} to {clip-path:inset(-0.25em 0 -0.3em 0)}} @keyframes descobre{ from{clip-path:inset(-0.25em 100% -0.3em 0);opacity:.25} to {clip-path:inset(-0.25em 0 -0.3em 0);opacity:1}} /* e o estado de repouso, para quem nao anima */ .abre-pag h1 .lt,.proxima .t .pl,.campo .frase .pl,.indice .fr{ clip-path:inset(-0.25em 0 -0.3em 0)} /* ── 86 · MOVIMENTO DE CÂMERA ───────────────────────────────────── 30 ago 2026: "o vídeo não é um vídeo, e sim uma peça depois a outra, quero algo mais cinematográfico igual da Reframme e Blackhaus, com movimento de câmera, não imagem estática mudando". Ele tem razão, e a correção não é trocar a substituição por fade — é dar MOVIMENTO DENTRO DO QUADRO. No cinema o corte é seco e a câmera se move: as duas coisas convivem, e é justamente isso que distingue montagem de apresentação de slides. Cada quadro recebe um movimento próprio, lento, contínuo, e ele dura o quadro inteiro. Nenhum se repete em seguida — como numa decupagem, onde dois planos iguais em sequência são erro. aproxima push-in a câmera entra na matéria afasta pull-out a matéria se revela no contexto varre pan a câmera percorre a superfície sobe tilt a câmera acompanha a altura A regra de motion continua obedecida: o CORTE segue seco, sem fade. O que se move é a câmera, nunca o texto sobre a imagem. */ @keyframes cam-aproxima{from{transform:scale(1.02)}to{transform:scale(1.16)}} @keyframes cam-afasta {from{transform:scale(1.16)}to{transform:scale(1.02)}} @keyframes cam-varre {from{transform:scale(1.14) translateX(2.6%)} to {transform:scale(1.14) translateX(-2.6%)}} @keyframes cam-sobe {from{transform:scale(1.14) translateY(2.4%)} to {transform:scale(1.14) translateY(-2.4%)}} /* O filme do Estudo 05: cada movimento tem a câmera que o texto pede. I plano fixo? Não — no papel era fixo, e fixo em tela pequena lê como imagem parada. Vira um push-in lentíssimo, que é o equivalente do plano fixo quando a tela é do tamanho de uma mão. */ .filme05 img{will-change:transform} .filme05 .q0{animation-name:mv0,cam-aproxima} .filme05 .q1{animation-name:mv1,cam-varre} .filme05 .q2{animation-name:mv2,cam-aproxima} .filme05 .q3{animation-name:mv3,cam-sobe} .filme05 .q4{animation-name:mv4,cam-afasta} .filme05 img{animation-duration:56s,56s; animation-timing-function:steps(1,end),linear; animation-iteration-count:infinite,infinite} /* A esteira de tela cheia também ganha câmera. Mesma lógica: o corte é seco, o quadro respira. */ .filme .fita img{will-change:transform; animation-name:var(--nome-ciclo,none),cam-aproxima; animation-duration:calc(var(--n) * var(--ms) * 1ms),calc(var(--ms) * 1ms); animation-timing-function:linear,linear; animation-iteration-count:infinite,infinite; animation-delay:calc(var(--i) * var(--ms) * -1ms), calc(var(--i) * var(--ms) * -1ms)} .filme .fita img:nth-child(2n){animation-name:var(--nome-ciclo,none),cam-varre} .filme .fita img:nth-child(3n){animation-name:var(--nome-ciclo,none),cam-afasta} .filme .fita img:nth-child(5n){animation-name:var(--nome-ciclo,none),cam-sobe} /* ── 87 · O PÉ VIRA A ÚLTIMA PÁGINA ─────────────────────────────── 30 ago 2026: "os rodapés, não to gostando deles cortados, quero algo diferente, veja o do MILL3, como se fosse uma boa parte da página". Medido no Mill3, com a página no fim: altura 469 px · 65% da tela tipo 16 px em TUDO — nenhum destaque, nenhum título links 9, em três grupos: navegação, e-mail, redes letreiro um só, grande, em vetor posição envolto grudado, revelado pela rolagem E aqui está a parte que eu tinha errado. O deles é grudado TAMBÉM, e mesmo assim nunca corta uma linha ao meio — porque o conteúdo está ANCORADO NO FUNDO do bloco. O que a rolagem descobre primeiro é espaço vazio; o texto só aparece quando já cabe inteiro. Eu tinha o conteúdo distribuído na altura toda, então a revelação pegava sempre no meio de uma palavra. Não era o efeito: era onde eu pus o texto. O pé passa a ser a ÚLTIMA PÁGINA do site, e não uma faixa no fim dela: três quartos de tela, tipo pequeno em tudo, e ar em cima. */ .pe-home{min-height:78vh;display:flex;flex-direction:column; justify-content:flex-end;padding-block:clamp(70px,10vh,130px)} .pe-home .nome{margin-bottom:auto;opacity:.92} /* o tipo encolhe: no Mill3 o pé inteiro tem UM tamanho, e é pequeno. Hierarquia no pé é ruído — quem chega ali já sabe o que procura. */ .pe-home .links{margin-top:clamp(56px,8vh,96px); gap:clamp(26px,3vw,56px) clamp(20px,2.4vw,44px)} .pe-home .links a{font-size:14px;line-height:1.9;opacity:.82; width:fit-content;position:relative; transition:opacity var(--t-toque) var(--e-so-sai)} .pe-home .links a::after{content:"";position:absolute;left:0;right:100%; bottom:2px;height:1px;background:currentColor; transition:right var(--t-peca) var(--e-entra-sai)} .pe-home .links a:hover{opacity:1} .pe-home .links a:hover::after{right:0} .pe-home .links .k{opacity:.5;margin-bottom:10px} .pe-home .fim{margin-top:clamp(44px,6vh,80px); border-top:1px solid rgba(255,255,255,.16);padding-top:26px; font-family:var(--mono);font-size:10px;letter-spacing:.16em; text-transform:uppercase;opacity:.62} .redes{margin-top:30px;border-top:1px solid rgba(255,255,255,.16); padding-top:26px;padding-left:0;padding-right:0} @media (max-width:820px){ .pe-home{min-height:auto} .pe-home .links{grid-template-columns:1fr 1fr} .pe-home .fim{flex-direction:column;gap:10px} } /* ── 88 · O LETREIRO DO PÉ NÃO PODE SER RECORTADO ───────────────── 30 ago 2026, quarta reclamação de letra cortada, e desta vez é a maior tipografia do site. Medido no rodapé, a 1889 px: caixa da linha 198 px altura do texto 269 px sobra 71 px — e o topo começa 36 px ACIMA da caixa A Prata é uma didone de contraste alto: em 198 px de corpo, a letra ocupa 269. Ela transborda a caixa por natureza, e o navegador desenharia isso sem problema nenhum. Quem cortava era o `overflow:hidden`, posto ali em agosto para impedir o letreiro de empurrar a página para os lados. Ele resolvia o transbordo HORIZONTAL e, de brinde, decapitava as letras. A correção separa os dois eixos, que nunca deviam ter sido tratados juntos: corta no horizontal, nunca no vertical. É exatamente a mesma lição da seção 85 — e é a terceira vez que eu confundo eixo. */ .pe-home .nome{overflow:visible;overflow-x:clip; line-height:1.42;padding-block:0.1em} /* 1,42 e a conta medida, nao um chute: a Prata desenha 269 px de letra num corpo de 198, ou seja 1,36 de altura real. A caixa precisa ser MAIOR que isso, com folga, senao a linha continua mais baixa que a letra e o problema so fica menor em vez de acabar. */ /* ── 89 · A ENTRELINHA MÍNIMA DA PRATA ──────────────────────────── A checagem nova, escrita para o rodapé, achou o mesmo defeito em mais três lugares que eu nunca tinha olhado: .hero .nome line-height 1 · corta 21 px .abre-pag h1 line-height 0,98 · corta 13 px .proxima .t line-height 0,96 · corta 11 px Eu apertava a entrelinha para o título ficar denso — é o instinto certo numa didone, e some quando a caixa fica mais baixa que a letra. A PRATA DESENHA 1,36 DE ALTURA REAL. Entrelinha abaixo disso recorta, sempre. Não é opinião: é a métrica da fonte. Título de duas linhas continua denso com 1,04 e o recorte vertical desaparece, porque o que decide o recorte não é a entrelinha e sim se a caixa contém o desenho. Nas de uma linha só, onde o aperto não ajuda em nada, a folga é maior. */ .hero .nome{line-height:1.42;padding-block:0.08em} .abre-pag h1{line-height:1.06;padding-block:0.16em} .proxima .t{line-height:1.06;padding-block:0.16em} .campo .frase{line-height:1.1;padding-block:0.12em} .indice .fr .nm{line-height:1.34} .grade-estudos .cap .t{line-height:1.22} /* ── 90 · O FILME DE VERDADE ────────────────────────────────────── 30 ago 2026. A mecânica é a que foi medida no Reframme e no Blackhaus, e nos dois ela é idêntica: um vídeo só · autoplay · loop · MUDO · sem controle nenhum object-fit: cover · sangrando a tela Ninguém clica em nada. A peça se apresenta. `muted` e `playsinline` não são detalhe: sem os dois o navegador BLOQUEIA o autoplay, e o filme vira um retângulo parado. E o `poster` existe para que o primeiro quadro apareça antes do vídeo baixar — sem ele, um buraco preto de dois segundos. Isto NÃO substitui a substituição em CSS: as duas convivem. Onde há arquivo de vídeo, ele manda; onde não há, a sequência de quadros com movimento de câmera continua fazendo o trabalho por 2 MB. */ .filme-video{position:relative;width:100%;aspect-ratio:16/9; overflow:hidden;background:var(--preto)} .filme-video video{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;display:block} .filme-video .r{position:absolute;left:0;bottom:0;z-index:2; padding:14px 18px;background:rgba(12,15,13,.6);color:#FFFFFF; font-family:var(--mono);font-size:10px;letter-spacing:.18em; text-transform:uppercase} .filme-video .r b{font-family:var(--display);font-size:15px;font-weight:400; letter-spacing:0;text-transform:none;display:block;margin-top:5px; line-height:1.34} /* ── 91 · O RODAPÉ FICA POR CIMA DE TUDO ────────────────────────── 30 ago 2026: "todos os rodapés estão errados, o único que está certo é o da página principal". Medido, e a geometria era IDÊNTICA nas duas: o pé ocupando de 83 a 900 px em ambas. O que mudava era a CAMADA da última faixa. home última faixa é o índice · z-index 1 as outras última faixa é a chamada · z-index 2 (`.acima`) A chamada final tem tipografia enorme que transborda a própria caixa — e como ela está numa camada ACIMA do pé, ela era desenhada POR CIMA dele. O pé estava lá, do tamanho certo, invisível. O `.acima` foi criado na seção 54, quando o pé era grudado e as faixas precisavam passar por cima dele. O pé deixou de ser grudado na seção 84, e essa camada virou herança de uma mecânica que não existe mais. O PÉ É A ÚLTIMA COISA DA PÁGINA. Nada se desenha por cima dele. */ body > footer{position:relative;z-index:9} /* E O `z-index` NÃO PEGOU, porque a regra da seção 84 é mais específica e deixa o pé ESTÁTICO — e em elemento estático o z-index é ignorado por completo. O `.campo`, que é grudado no topo, continuava por cima. A regra precisa ter a mesma especificidade para vencer pela ordem. */ body > footer.pe-fundo,body > footer.pe-pag{position:relative;z-index:9} /* A PROPORÇÃO DO FILME VEM DO QUADRO INICIAL, e não do que eu pedi. Pedi 16:9 nos três clipes e vieram 834 × 1112 — retrato. O modelo declara `aspectRatioAutoFrom: startFrame when filled`: havendo quadro de partida, ele MANDA, e o meu pedido é ignorado em silêncio. Eu tinha posto os três num quadro deitado com `cover`, o que cortava fora quase metade da composição — justamente o topo e o pé, que é onde mora o gesto. A moldura passa a obedecer o arquivo. Se um dia houver clipe deitado, ele ganha `.deitado` e a moldura acompanha. */ .filme-video{aspect-ratio:4/5;width:min(760px,100%);margin-inline:auto} .filme-video.deitado{aspect-ratio:16/9;width:100%} @media (max-width:820px){.filme-video{width:100%}} /* ── 92 · O FILME GANHA MOLDURA, E A LEGENDA VOLTA PRO LUGAR ────── 30 ago 2026, com a peça na tela: "na aba de filmes uma parte gigante em branco, além de que as legendas das coisas estarem pra esquerda e não junto com os vídeos". Os dois defeitos são o mesmo defeito. O clipe saiu em RETRATO e eu apertei a moldura para 760 px centrados; a legenda continuou onde sempre esteve, na margem da página. Resultado: vídeo no meio, texto na borda, e um campo branco entre os dois do tamanho de uma tela. A correção vem da referência que ele salvou — o @vrmstudio__: TARJA PRETA em cima e embaixo, e o quadro respira dentro dela. METADADO NOS QUATRO CANTOS, mono, minúsculo, sobre o vídeo. A LEGENDA NA LARGURA DO VÍDEO, nunca na largura da página. A tarja não é decoração: é o que deixa um clipe em retrato viver numa faixa deitada sem cortar nem sobrar. É o mesmo raciocínio do cinema, e resolve qualquer proporção que apareça depois. */ .peca-filme{--palco:min(1180px,100%);margin-inline:auto;width:var(--palco)} .peca-filme .palco{position:relative;width:100%;aspect-ratio:16/9; background:#000;overflow:hidden;display:grid;place-items:center} .peca-filme .palco video{width:100%;height:100%;object-fit:contain;display:block} .peca-filme .palco.cheio video{object-fit:cover} /* os quatro cantos, e é o trilho da marca em movimento */ .peca-filme .cnt{position:absolute;z-index:2;color:#FFFFFF;opacity:.72; font-family:var(--mono);font-size:9.5px;letter-spacing:.2em; text-transform:uppercase;line-height:1.7;pointer-events:none; text-shadow:0 0 12px rgba(0,0,0,.55)} .peca-filme .ce{left:16px;top:14px} .peca-filme .cd{right:16px;top:14px;text-align:right} .peca-filme .be{left:16px;bottom:14px} .peca-filme .bd{right:16px;bottom:14px;text-align:right} /* a legenda, na largura do palco e em duas colunas */ .peca-filme .diz{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:clamp(20px,4vw,64px);margin-top:26px;align-items:start} .peca-filme .diz .t{font-family:var(--display);font-size:clamp(21px,2.1vw,31px); line-height:1.24;padding-block:.1em} .peca-filme .diz p{font-size:clamp(14.5px,1.02vw,16px);line-height:1.7;margin:0} .peca-filme .diz p + p{margin-top:14px} @media (max-width:820px){ .peca-filme .diz{grid-template-columns:1fr;gap:16px} .peca-filme .cnt{font-size:8.5px} .peca-filme .cd,.peca-filme .bd{display:none} } /* a faixa que segura o filme é ESCURA, e por isso o branco some */ .faixa-filme{background:var(--preto);color:var(--branco); padding-block:clamp(72px,10vh,130px)} .faixa-filme .k{font-family:var(--mono);font-size:10px;letter-spacing:.22em; text-transform:uppercase;opacity:.55;margin-bottom:26px} .faixa-filme .peca-filme .diz p{opacity:.8} /* ── 93 · O DIAGRAMA DAS SEIS, E ELE SE DESENHA ─────────────────── 30 ago 2026: "no da VERSA com os diagramas, acho aquilo interessante e não aparece nenhuma vez em nenhuma das frentes". Ele tem razão e a falta era grave: a casa tem sistema de diagrama escrito na art bible, sete diagramas produzidos, e NENHUM aparecia no site. O portfólio afirmava que sabe desenhar e não mostrava. Este é uma SÉRIE DE PROCESSO, que é uma das cinco formas permitidas, e obedece a hierarquia sem cor dos cinco níveis: 0 a base hairline a 30% 1 o objeto linha sólida 2 a projeção tracejado 3 O ACHADO preenchimento sólido — UM por lâmina 4 o dado mono minúsculo O que ele ganha do VERSA é o COMPORTAMENTO: o traço não está desenhado, ele SE DESENHA quando a lâmina entra. É `stroke-dasharray` corrido por `animation-timeline: view()`, sem uma linha de script — a mesma lei de sempre: peça que precisa de script para ser vista é peça que some. */ .diag{width:100%;margin-inline:auto;max-width:1180px} .diag svg{width:100%;height:auto;display:block;overflow:visible} .diag .base{stroke:currentColor;stroke-width:.75;opacity:.3;fill:none} .diag .obj{stroke:currentColor;stroke-width:1.4;fill:none; stroke-linecap:square} .diag .proj{stroke:currentColor;stroke-width:1;fill:none; stroke-dasharray:5 5;opacity:.55} .diag .cheio{fill:currentColor;stroke:none} .diag .dado{font-family:var(--mono);font-size:8.5px;letter-spacing:.16em; text-transform:uppercase;fill:currentColor;opacity:.62} .diag .nm{font-family:var(--display);font-size:17px;fill:currentColor} .diag .escala{fill:currentColor;opacity:.75} /* o traço que se desenha, e a ordem é a da leitura */ .diag .risca{stroke-dasharray:var(--c,900);stroke-dashoffset:var(--c,900); animation:risca-corre linear forwards; animation-timeline:view();animation-range:entry 8% cover 42%} @keyframes risca-corre{to{stroke-dashoffset:0}} .diag .sobe{transform-origin:center bottom;transform:scaleY(0); animation:diag-sobe linear forwards; animation-timeline:view();animation-range:entry 14% cover 46%} @keyframes diag-sobe{to{transform:scaleY(1)}} .diag .surge{opacity:0;animation:diag-surge linear forwards; animation-timeline:view();animation-range:entry 22% cover 52%} @keyframes diag-surge{to{opacity:1}} .diag .dado.surge{animation-name:diag-surge-dado} @keyframes diag-surge-dado{to{opacity:.62}} /* sem suporte a timeline de scroll, o diagrama aparece INTEIRO. Nunca invisível: a peça tem que existir sem a animação. */ @supports not (animation-timeline:view()){ .diag .risca{stroke-dashoffset:0;animation:none} .diag .sobe{transform:none;animation:none} .diag .surge{opacity:1;animation:none} .diag .dado.surge{opacity:.62} } @media (prefers-reduced-motion:reduce){ .diag .risca{stroke-dashoffset:0;animation:none} .diag .sobe{transform:none;animation:none} .diag .surge{opacity:1;animation:none} .diag .dado.surge{opacity:.62} } /* a faixa que recebe o diagrama */ .faixa-diag{padding-block:clamp(80px,11vh,150px)} .faixa-diag .k{font-family:var(--mono);font-size:10px;letter-spacing:.22em; text-transform:uppercase;opacity:.55;margin-bottom:12px} .faixa-diag .cab{font-family:var(--display); font-size:clamp(26px,3.2vw,48px);line-height:1.16;padding-block:.12em; max-width:24ch;margin-bottom:clamp(34px,5vh,64px)} .faixa-diag .leg{margin-top:26px;font-family:var(--mono);font-size:9.5px; letter-spacing:.16em;text-transform:uppercase;opacity:.5} .faixa-diag.escura{background:var(--preto);color:var(--branco)} /* ── 94 · AS SEIS EM CARTAS, COM MOVIMENTO E LEGENDA EMBAIXO ────── 30 ago 2026, depois de ler o VERSA com ele: "olhe que massa como eles criam os links de cada frente com um motion e legenda embaixo". O que o VERSA faz na home é exatamente isto e nada além: uma fileira de cartas, cada uma com imagem em movimento, e ABAIXO da imagem o nome em serifa com uma linha minúscula de descritor. Sem moldura, sem sombra, sem botão. O clique é a carta inteira. Aqui a lista de texto continuava fazendo o trabalho de índice — e índice é o que um sumário faz, não o que um portfólio faz. A lista dizia que existem seis frentes. A carta MOSTRA as seis. O movimento reaproveita a esteira que já existe em cada página de frente: mesmas seis imagens, mesmo ciclo, zero arquivo novo. */ .cartas{display:grid;gap:clamp(22px,2.6vw,44px) clamp(16px,2vw,32px); grid-template-columns:repeat(3,minmax(0,1fr))} .carta{display:block;color:inherit;text-decoration:none} .carta .jan{position:relative;width:100%;aspect-ratio:4/5;overflow:hidden; background:var(--preto)} .carta .jan .esteira{position:absolute;inset:0;aspect-ratio:auto; width:100%;height:100%} .carta .jan .esteira img{transform:scale(1.04); transition:transform .75s cubic-bezier(.22,1,.36,1)} .carta:hover .jan .esteira img{transform:scale(1.09)} .carta .cap{display:flex;align-items:baseline;gap:10px;margin-top:14px} .carta .cap .n{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em; opacity:.45} .carta .cap .nm{font-family:var(--display);font-size:clamp(19px,1.7vw,26px); line-height:1.3;padding-block:.08em} .carta .d{margin-top:5px;font-size:12.5px;line-height:1.5;opacity:.62; max-width:34ch} .carta .seta{display:inline-block;margin-left:6px;opacity:0; transform:translateX(-4px); transition:opacity .4s ease,transform .4s cubic-bezier(.22,1,.36,1)} .carta:hover .seta{opacity:.55;transform:translateX(0)} @media (max-width:980px){.cartas{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:600px){.cartas{grid-template-columns:1fr}} .faixa-cartas{padding-block:clamp(80px,11vh,150px)} .faixa-cartas .k{font-family:var(--mono);font-size:10px;letter-spacing:.22em; text-transform:uppercase;opacity:.55;margin-bottom:14px} .faixa-cartas .cab{font-family:var(--display); font-size:clamp(26px,3.2vw,48px);line-height:1.16;padding-block:.12em; max-width:26ch;margin-bottom:clamp(36px,5vh,66px)} /* ── 95 · A MOLDURA OBEDECE O ARQUIVO, E A LEGENDA FICA AO LADO ─── Medido com a peça na tela, logo depois da 92: a tarja deitada com um clipe em RETRATO deixa duas barras laterais enormes — o "campo gigante em branco" apenas trocou de cor. A tarja do @vrmstudio__ funciona porque o clipe dele é DEITADO dentro de uma tela em pé. O nosso é o contrário. Copiar o efeito em vez de copiar a razão foi o erro, e é o mesmo erro de sempre. Então a moldura passa a ter a proporção do arquivo, e a legenda sobe para o lado dela. Some a barra, some o vazio, e o texto fica onde o olho já está. */ .peca-filme{--palco:min(1180px,100%);display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(24px,3.4vw,64px);align-items:start} .peca-filme .palco{aspect-ratio:4/5} .peca-filme .palco.deitado{aspect-ratio:16/9} .peca-filme .palco video{position:absolute;inset:0;width:100%;height:100%; object-fit:cover} .peca-filme .diz{display:block;margin-top:0} .peca-filme .diz .t{font-size:clamp(26px,2.9vw,44px);line-height:1.16; margin-bottom:20px} .faixa-filme .peca-filme .diz .t{color:#FFFFFF;opacity:1} .faixa-filme .peca-filme .diz p{opacity:.72} @media (max-width:900px){ .peca-filme{grid-template-columns:1fr} .peca-filme .diz{margin-top:22px} } /* ── 96 · BRANCO SOBRE BRANCO, E FALTAVA UMA LETRA ──────────────── 30 ago 2026: "nessa parte dos filmes ainda tem uma parte gigante em branco". Não era vazio: era a lâmina INTEIRA invisível. A seção é `class="escuro revela acima tela-cheia"`. A regra da camada de cima dizia: .acima:not(.escura):not(.fora):not(.percurso){background:branco} A lista de exceções tinha `.escura`, no feminino — e a lâmina usa `.escuro`, no masculino. Uma letra. O fundo preto virou branco, o texto continuou branco, e a lâmina sumiu com tudo dentro: o título, os cinco movimentos, as durações. Fica aqui porque é o tipo de defeito que nenhuma checagem de estrutura pega: o HTML está correto, o CSS é válido, os elementos existem e têm tamanho. Só não dá para ler. A bateria viva ganhou contraste medido junto com esta correção. */ /* a correcao real esta na propria lista de excecoes, acima: `.acima:not(.escura):not(.escuro)...`. Uma regra nova aqui NAO resolvia — `:not()` conta na especificidade, e a lista com quatro `:not` pesa mais que duas classes. */ /* ── 97 · O TRILHO PASSA A TER UM RITMO SÓ ──────────────────────── 30 ago 2026: "sobre os links iniciais, tem um diferente dos outros, quero eles alinhados na mesma proporção". Estava certo. O trilho tinha TRÊS tratamentos ao mesmo tempo: as seis frentes com parêntese e vão de 13; os motores sem parêntese e vão de 20; e o Contato sozinho, sem nada. Três ritmos na mesma linha, e o olho lê isso como erro antes de ler como hierarquia. Agora é um só: parêntese em TODOS, um vão único, e a separação entre grupos feita por um filete — que é onde a hierarquia deve morar, e não no espaçamento aleatório. */ .trilho nav,.trilho .motores{gap:16px} .trilho nav.frentes{gap:16px} .trilho .motores a::before,.trilho > div:last-child a::before{content:"( "} .trilho .motores a::after, .trilho > div:last-child a::after {content:" )"} .trilho .motores{padding-left:22px;margin-left:2px} .trilho > div:last-child{padding-left:22px;border-left:1px solid var(--filete)} /* ── 98 · O VÉU DA FITA LONGA AFROUXA ───────────────────────────── "os filmes dos outros estão como se fosse com um fade, escuros, deixe eles normais". A causa maior era a colisão de nome, corrigida na 96. O que sobra é este véu, que existe para a tipografia pousar e estava pesado demais: .72 de preto come a fotografia inteira. Baixa para o mínimo que ainda garante leitura do texto branco. */ .filme::after{ background: linear-gradient(96deg,rgba(12,15,13,.52) 0%,rgba(12,15,13,.18) 44%, rgba(12,15,13,0) 72%), linear-gradient(180deg,rgba(12,15,13,.34) 0%,rgba(12,15,13,.06) 40%, rgba(12,15,13,.5) 100%)} /* ── 99 · A AXONOMETRIA SE MONTA PLANO A PLANO ──────────────────── O diagrama anterior desenhava tudo de uma vez, e por isso não tinha nada para ver: aparecia pronto. O que faz o gesto do VERSA funcionar é a ORDEM — uma coisa depois da outra, e a pessoa acompanha a construção em vez de encontrar o resultado. Cada plano entra com um atraso próprio, e como não pode haver script, o atraso vira faixa de rolagem: o plano 1 fecha antes de o plano 2 começar. É o mesmo relógio da esteira, na outra moeda. */ .diag .obj.risca:nth-of-type(1){animation-range:entry 6% cover 26%} .diag .obj.risca:nth-of-type(2){animation-range:entry 11% cover 32%} .diag .obj.risca:nth-of-type(3){animation-range:entry 16% cover 38%} .diag .obj.risca:nth-of-type(4){animation-range:entry 21% cover 44%} .diag .obj.risca:nth-of-type(5){animation-range:entry 26% cover 50%} .diag .obj.risca:nth-of-type(6){animation-range:entry 31% cover 56%} .diag .cheio.surge{animation-range:entry 30% cover 58%} .diag .nm.surge{animation-range:entry 18% cover 46%} /* o desenho ocupa 60–75% do módulo, e o tipo é pequeno — art bible */ .diag svg{max-height:520px} .faixa-diag .diag{max-width:1080px} /* a lâmina do diagrama respira menos em cima: o desenho é o assunto */ .faixa-diag .cab{margin-bottom:clamp(22px,3vh,40px)} .diag svg{max-height:560px} /* ── 100 · A FAIXA DO FILME CLAREIA, E ISSO É SEPARAÇÃO ─────────── 30 ago 2026: "separe da arquitetura, parece que um é a continuação do outro, e não é". Na página de Imagem havia TRÊS faixas pretas emendadas — a fita longa, o bloco do vídeo e o campo. Três assuntos diferentes num único trecho escuro de quatro telas, sem nada dizendo onde um acaba. O olho lê aquilo como uma coisa só, e ele está certo. A faixa do vídeo passa a ser CLARA. O corte entre preto e branco é a separação mais barata e mais legível que existe, e devolve a fotografia ao seu contraste — que é o outro pedido da mesma frase, "deixe eles normais". */ .faixa-filme{background:var(--branco);color:var(--preto)} .faixa-filme .k{opacity:.5} .faixa-filme .peca-filme .diz .t{color:var(--preto);opacity:1} .faixa-filme .peca-filme .diz p{opacity:.78} /* ── 101 · O DIAGRAMA NÃO PARA ──────────────────────────────────── 30 ago 2026: "não gostei dos diagramas, achei muito ruim, estático, sem vida, olhe o da versa, faça parecido, coisas entrando, saindo". Estava certo, e o defeito era de concepção. O desenho anterior se desenhava UMA vez, na entrada da lâmina, e depois virava figura parada — quem rolasse rápido não via acontecer nada. Agora ele tem RELÓGIO PRÓPRIO e não depende de rolagem nenhuma: um plano de cada vez fica sólido — o achado viaja pela pilha o rótulo daquele plano acende, e os outros recuam para 34% uma varredura sobe e desce, atravessando o conjunto a pilha inteira respira, meio pixel por vez É o mesmo motor da esteira, na outra moeda: um ciclo, um `--i` por elemento, e o atraso saindo de uma conta. Zero script. E obedece a lei de motion da casa — SUBSTITUIÇÃO, nunca transição: o plano que sai continua desenhado enquanto o que entra assume. */ /* NAO existe bloco de reset aqui, e a ausencia e a correcao. Escrevi um `.diag svg.vivo .cheio{animation:none}` para limpar as regras antigas — e ele MATOU o diagrama inteiro. `.diag svg.vivo .cheio` pesa tres classes MAIS um tipo; `.diag .plano .cheio` pesa tres classes. O reset ganhava, zerava a duracao, e o relogio nunca comecava. Quarta vez que a especificidade decide sozinha nesta obra. */ .diag .plano .cheio,.diag .plano .nm,.diag .plano .sub, .diag .plano .num,.diag .plano .chama{ animation-timing-function:linear; animation-iteration-count:infinite; animation-delay:calc(var(--i) * var(--ms) * -1ms); animation-duration:calc(var(--n) * var(--ms) * 1ms); animation-fill-mode:both} .diag .plano .cheio{opacity:0} .diag .plano .nm{font-family:var(--display);font-size:18px;fill:currentColor} .diag .plano .sub{opacity:.34} .diag .plano .chama{stroke:currentColor;stroke-width:.75;opacity:.34} .diag .plano .obj{stroke:currentColor;stroke-width:1.3;fill:none} /* a pilha respira — meio pixel, e é o que separa desenho de figura */ .diag .plano{animation:respira calc(var(--n) * var(--ms) * 1ms) ease-in-out infinite;animation-delay:calc(var(--i) * var(--ms) * -1ms)} @keyframes respira{0%,100%{transform:translateY(0)} 50%{transform:translateY(-2.5px)}} /* a varredura, que sobe e desce sem fim */ .diag .varre{opacity:.5;animation:varre calc(var(--n) * var(--ms) * 1.5ms) ease-in-out infinite alternate} .diag .varre .base{opacity:.9;stroke-dasharray:3 7} @keyframes varre{from{transform:translateY(0)} to{transform:translateY(calc((var(--n) - 1) * 66px))}} /* SEM trava de `prefers-reduced-motion` aqui, e isso e deliberado. Escrevi uma, e ela desligou o diagrama INTEIRO — porque a maquina do Matheus tem "reduzir movimento" ligada no sistema. O diagrama chegava nele parado, e a queixa "estatico, sem vida" era LITERAL: o CSS estava obedecendo a preferencia dele. E exatamente a mesma decisao da secao 33, que ja tinha removido a trava da esteira pelo mesmo motivo. Aqui o movimento nao e enfeite: e o que o diagrama explica. Sem ele nao sobra peca, sobra figura. */ /* 4 planos */ .diag svg[style*="--n:4"] .cheio{animation-name:achado-4} .diag svg[style*="--n:4"] .nm, .diag svg[style*="--n:4"] .sub, .diag svg[style*="--n:4"] .num, .diag svg[style*="--n:4"] .chama{animation-name:realca-4} @keyframes achado-4{0%{opacity:0}2.500%{opacity:1}23.000%{opacity:1}25.000%{opacity:0}100%{opacity:0}} @keyframes realca-4{0%{opacity:.34}2.500%{opacity:1}23.000%{opacity:1}25.000%{opacity:.34}100%{opacity:.34}} /* 5 planos */ .diag svg[style*="--n:5"] .cheio{animation-name:achado-5} .diag svg[style*="--n:5"] .nm, .diag svg[style*="--n:5"] .sub, .diag svg[style*="--n:5"] .num, .diag svg[style*="--n:5"] .chama{animation-name:realca-5} @keyframes achado-5{0%{opacity:0}2.000%{opacity:1}18.400%{opacity:1}20.000%{opacity:0}100%{opacity:0}} @keyframes realca-5{0%{opacity:.34}2.000%{opacity:1}18.400%{opacity:1}20.000%{opacity:.34}100%{opacity:.34}} /* 6 planos */ .diag svg[style*="--n:6"] .cheio{animation-name:achado-6} .diag svg[style*="--n:6"] .nm, .diag svg[style*="--n:6"] .sub, .diag svg[style*="--n:6"] .num, .diag svg[style*="--n:6"] .chama{animation-name:realca-6} @keyframes achado-6{0%{opacity:0}1.667%{opacity:1}15.333%{opacity:1}16.667%{opacity:0}100%{opacity:0}} @keyframes realca-6{0%{opacity:.34}1.667%{opacity:1}15.333%{opacity:1}16.667%{opacity:.34}100%{opacity:.34}} /* ── 102 · O CASO DE PUBLICIDADE ────────────────────────────────── 30 ago 2026: "a area de publicidade está sem nada... é o unico que está sem nada". Era verdade, e era a lacuna mais cara do site: Publicidade é a única das seis sem Estudo atrás. A página existia, dizia o que a frente faz, e não mostrava nada feito. Isto é um CASO, não uma galeria: uma campanha da casa, com a peça impressa, a peça na rua e o gesto que a sustenta. A constante declarada é o ESCARLATE IMPRESSO — muda o suporte, muda a luz, muda a hora; a matéria é a mesma nos cinco quadros. */ .caso{margin-top:clamp(30px,4vh,54px)} .caso .lead{width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--preto)} .caso .lead img{width:100%;height:100%;object-fit:cover;display:block; transform:scale(1.03)} .caso .grade{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,1.6vw,26px);margin-top:clamp(14px,1.6vw,26px)} .caso figure{margin:0} .caso figure img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block} .caso figure.larga{grid-column:span 2} .caso figure.larga img{aspect-ratio:8/5} .caso figcaption{margin-top:9px;font-family:var(--mono);font-size:9px; letter-spacing:.16em;text-transform:uppercase;opacity:.55;line-height:1.6} .caso .pe-caso{margin-top:clamp(20px,2.6vh,34px);display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:clamp(18px,3vw,54px);align-items:start} .caso .pe-caso .t{font-family:var(--display);font-size:clamp(20px,2vw,29px); line-height:1.22;padding-block:.1em} .caso .pe-caso p{margin:0;font-size:clamp(14.5px,1.02vw,16px);line-height:1.7} .caso .pe-caso p + p{margin-top:13px} @media (max-width:820px){ .caso .grade{grid-template-columns:repeat(2,minmax(0,1fr))} .caso figure.larga{grid-column:span 2} .caso .pe-caso{grid-template-columns:1fr} } /* ── 103 · AS CARTAS FICAM TODAS DO MESMO TAMANHO ───────────────── 30 ago 2026: "os links com as frentes na pagina inicial la no final estao desalinhados, quero todos no mesmo formato, passando motions em momentos diferentes". O desalinho vinha do descritor: "Naming, narrativa, DNA, identidade, editorial, books" cabe em duas linhas, "Agente, automacao, gestao, aplicativo, integracao" em tres. A carta cresce junto, e a fileira de baixo comeca torta. A carta passa a ser uma grade de tres faixas de altura fixa: janela, nome, descritor. O texto varia dentro da faixa; a carta, nunca. E o motion: as seis trocavam de imagem NO MESMO INSTANTE, porque o relogio delas era identico. Seis trocas simultaneas leem como falha de carregamento, nao como movimento. Cada carta ganha um compasso proprio — 1400 a 2400 ms, numeros que nao sao multiplos entre si, entao elas nunca voltam a coincidir. */ .carta{display:grid;grid-template-rows:auto auto auto;align-content:start} .carta .cap{min-height:2.1em;align-items:center} .carta .d{min-height:3.4em;margin-top:4px} @media (max-width:600px){.carta .d{min-height:0}} .cartas .carta:nth-child(1) .esteira{--ms:1400} .cartas .carta:nth-child(2) .esteira{--ms:1900} .cartas .carta:nth-child(3) .esteira{--ms:2300} .cartas .carta:nth-child(4) .esteira{--ms:1600} .cartas .carta:nth-child(5) .esteira{--ms:2100} .cartas .carta:nth-child(6) .esteira{--ms:2400} /* ── 104 · A CARTA TROCA POR OPACIDADE, NUNCA POR CORTINA ───────── O desalinho das cartas não era de altura: as seis mediam 751 px iguais. Era a TROCA. Os ciclos das frentes revelam a fotografia por `clip-path`, de cima para baixo — bonito numa lâmina inteira, desastroso em fileira. Como cada carta anda no seu próprio compasso, cada uma estava num ponto diferente da cortina, e sobrava branco embaixo de umas e não de outras. Seis retângulos de alturas aparentes diferentes. Dentro da carta a substituição é só de OPACIDADE. A janela fica sempre cheia, o quadro nunca encolhe, e o compasso desencontrado continua fazendo o trabalho — que era o pedido. */ .cf-carta{--n:6;--ms:1800;--nome-ciclo:cf-carta} /* o --ms aqui e so o compasso PADRAO; cada carta sobrescreve o seu na secao 103, e a checagem estatica exige os tres na mesma regra. */ @keyframes cf-carta{0%{opacity:0}4%{opacity:1}16.6667%{opacity:1} 20.6667%{opacity:0}100%{opacity:0}} .carta .jan .esteira img{clip-path:none} /* ── 105 · A CARTA NUNCA FICA VAZIA, E A FOTO SEMPRE PREENCHE ───── Medido na fileira: uma das seis marcava ZERO imagem acesa, e outra mostrava a fotografia sem preencher a janela. O buraco é de relógio. Nos ciclos antigos a imagem que sai apaga em 16,68% e a que entra só chega a 1 em 6,67% do PRÓPRIO passo — ou seja, existe uma fresta em que nenhuma das duas está inteira. Numa lâmina grande ninguém nota; numa fileira de seis, uma carta pisca branca e a fileira parece quebrada. O ciclo da carta nasce JÁ visível no instante zero do seu passo, e acende durante a cauda do passo anterior. As duas se sobrepõem de propósito — é o fantasma da regra de motion — e nunca há vazio. */ @keyframes cf-carta{ 0%{opacity:1} 16.6667%{opacity:1} 20%{opacity:0} 95%{opacity:0} 100%{opacity:1}} /* e a fotografia preenche a janela, sempre: sem isto uma proporção diferente da janela deixa faixa branca em cima e embaixo */ .carta .jan .esteira img{position:absolute;inset:0;width:100%;height:100%; object-fit:cover}