/* ══════════════════════════════════════════════════════════════════════════ BONONI · CAMADA DE MOVIMENTO (scroll-driven nativo) 30/07/2026 ────────────────────────────────────────────────────────────────────────── COMO DESLIGAR TUDO: Setting `motion_v2` = 0 (painel/banco) ← reverte sem tocar em codigo Sem a flag, o nao recebe .bn-sda, NENHUMA regra deste arquivo casa, e o JS antigo volta a dirigir tudo exatamente como antes. Nada aqui e destrutivo: e uma camada por cima. COMO REMOVER DE VEZ: 1. apague public/bononi-motion.css e public/bononi-motion.js 2. apague o bloco marcado "CAMADA DE MOVIMENTO" em views/site/layout/base.php 3. desfaca os 3 guardas `window.BN_SDA` (bononi-home.js x2, conteudos-detail.php x1) POR QUE NATIVO E NAO GSAP/MOTION: O que o site fazia por FRAME em JS (barra de progresso, tilt e wipe da home) agora roda no compositor, fora da main thread, com 0 KB de download. GSAP so entraria depois, e so na home, se a montagem progressiva do modelo isometrico for aprovada: ali o ganho justifica os 49 KB. Motion foi descartado porque o build de 2,6 KB exige bundler e este site nao tem build (custaria 45,5 KB inteiros). SUPORTE: ~84% global. Tudo entra sob @supports, entao quem nao tem scroll-driven continua com o caminho antigo, sem degradar. ══════════════════════════════════════════════════════════════════════════ */ /* 11/08/2026 · Nao ha mais nenhum @property aqui. Havia dois, --tilt e --wipe, e os dois existiam para dar tipo a variaveis animadas por este arquivo. As animacoes que os usavam sairam (ver os blocos 2 e 3), e sem animacao nao ha o que interpolar: quem le essas variaveis hoje e JS, que escreve o valor final direto, e o CSS as consome com fallback, `var(--x,.5)`. */ @supports (animation-timeline: view()) { /* ══ 1 · BARRA DE PROGRESSO DE LEITURA ═══════════════════════════════ Antes: um listener de scroll escrevia style.width a cada frame, o que forca recalculo de layout em toda rolagem do artigo. Agora e uma scaleX ligada a timeline de rolagem do documento: composita e nao toca em layout. O !important derruba o style inline que sobra de sessoes ja abertas. */ .bn-sda .art-progress, .bn-sda .bh__prog{ width:100% !important; transform-origin:0 50%; /* ★ ESTADO BASE = VAZIA. Se a timeline nao resolver (contêiner sem rolagem, aba em segundo plano no primeiro paint, motor sem suporte real), a animacao fica "running" mas NAO aplica, e o elemento cai neste estilo base. Sem este scaleX(0) a barra apareceria 100% CHEIA o tempo todo, porque o width:100% acima ja esta valendo. Medido: timeline_ativa=false. */ transform:scaleX(0); animation:bnProgresso linear both; animation-timeline:scroll(root block); transition:none; } @keyframes bnProgresso{ from{transform:scaleX(0)} to{transform:scaleX(1)} } /* ══ 2 · O TILT SAIU DAQUI EM 11/08/2026 ═════════════════════════════ A regra animava `--tilt` em `.bn-sda .bstk__scene`. Duas coisas erradas ao mesmo tempo, e as duas medidas: · a classe `.bstk__scene` nao existe desde 07/08/2026, quando virou `.bfed__scene`. O seletor nao casava com nada · e `var(--tilt)` nao e lido por NENHUM css do site (grep em todos os arquivos: zero ocorrencias). A cena da pilha usa rotacao fixa, `rotateX(64deg) rotateZ(-38deg)`, e nao precisa de tilt Ou seja: animava uma variavel morta num seletor morto. O que a cena precisava era de `--lift`, que NUNCA teve driver em lugar nenhum, e agora tem, em bononi-home.js. O @property de --tilt saiu junto. */ /* ══ 3 · OS DOIS WIPES SAIRAM DAQUI EM 11/08/2026 ═════════════════════ Havia duas animacoes de scroll nativas nesta parte do arquivo: `bnWipe` (comparacao horizontal da secao 05 da home) e `bnWipeV` (costura vertical da faixa da secao 07). As DUAS estavam mortas, e a medicao no navegador nao deixa duvida: · getAnimations() devolvia a animacao com playState "running" · mas timeline.currentTime era nulo, getComputedTiming().progress era nulo e a duracao computada dava 0% · o valor de --wipe ficava parado em 0,5 na travessia inteira da tela (palco medido com topo em 784px, 506, 168 e -60: sempre 0,5) · na faixa da secao 07, timeline.source media `SECTION.sec` CAUSA: `view()` ancora o timeline no ancestral de overflow nao visivel, e toda secao do site tem `.sec{overflow:clip}`. Esse ancestral nao rola, entao o timeline nunca entra em fase ativa e o efeito fica congelado. Pior: bononi-home.js tinha um guarda `window.BN_SDA` que DESLIGAVA o laco de scroll em JS quando esta camada estava ligada. O resultado era o efeito parado no meio, que foi o que o Joao viu na faixa. Os dois voltaram para o JS de bononi-home.js, que e medivel e funciona. Se algum dia se quiser o caminho nativo de volta, o pre-requisito e o subject NAO ter ancestral com overflow diferente de visible, e hoje `.sec` tem. */ /* ══ 4 · PARALLAX INTERNO NAS CAPAS ══════════════════════════════════ NOVO. A imagem anda mais devagar que o card enquanto ele cruza a tela. E o efeito que da profundidade sem custo nenhum: a imagem ja esta la, so ganha um deslocamento de 8% dentro da propria moldura (que ja tem overflow:hidden). */ .bn-sda .blc__media img, .bn-sda .art-rel-img img, .bn-sda .art-cover-wrap img{ animation:bnParallax linear both; animation-timeline:view(block); animation-range:cover 0% cover 100%; will-change:transform; } @keyframes bnParallax{ from{ transform:scale(1.12) translateY(-4%) } to { transform:scale(1.12) translateY(4%) } } /* o hover de zoom do card continua mandando: nao deixa os dois brigarem */ .bn-sda .blc:hover .blc__media img{ animation-play-state:paused } /* ══ 5 · FUNDO DO HERO DO ARTIGO ═════════════════════════════════════ NOVO. A foto do hero recua devagar conforme a pagina desce, entao a leitura "sobe" sobre ela em vez de tudo rolar junto. */ .bn-sda #art-hero .art-hero-deco-img{ animation:bnHeroRecua linear both; animation-timeline:scroll(root block); animation-range:0 60vh; } @keyframes bnHeroRecua{ from{ transform:scale(1) translateY(0) } to { transform:scale(1.06) translateY(4%) } } /* ══ 6 · CURVA DE MacLEAMY QUE SE DESENHA ════════════════════════════ NOVO. Os quatro tracos sao desenhados conforme a secao cruza a tela, na ordem em que o argumento acontece: primeiro o contexto (capacidade e custo), depois o contraste (tradicional e Bononi). Cada um tem uma faixa de rolagem propria, entao a leitura e sequencial e nao simultanea. pathLength=1 normaliza o comprimento: sem isso cada caminho precisaria do proprio dasharray medido em JS. Com ele, 1 e sempre o traco inteiro. REGRA DE SEGURANCA (a mesma do resto do arquivo): se a timeline nao resolver, o dashoffset fica em 0 e as curvas aparecem INTEIRAS. Nunca some conteudo. */ .bn-sda .bmac__p{ stroke-dasharray:1;stroke-dashoffset:0; animation:bnTraco linear both; animation-timeline:view(block); } @keyframes bnTraco{ from{stroke-dashoffset:1} to{stroke-dashoffset:0} } .bn-sda .bmac__p--cap{animation-range:entry 16% cover 34%} .bn-sda .bmac__p--cus{animation-range:entry 22% cover 42%} .bn-sda .bmac__p--tra{animation-range:entry 32% cover 52%} .bn-sda .bmac__p--bon{animation-range:entry 40% cover 62%} /* a marca do cruzamento so aparece depois que as duas primeiras cruzaram */ .bn-sda .bmac__cross,.bn-sda .bmac__mark{ animation:bnSurge linear both; animation-timeline:view(block); animation-range:entry 46% cover 56%; } @keyframes bnSurge{ from{opacity:0} to{opacity:1} } /* ══ 7 · ENTRADA DOS CARDS DA GRADE ══════════════════════════════════ ★ REGRA DE SEGURANCA DESTA CAMADA: ela NUNCA controla visibilidade. A primeira versao animava opacity de .55 a 1. Como estes cards tambem tem [data-rv] (que os deixa em opacity:0 ate o observer revelar), toda vez que a timeline nao resolvesse a animacao nao aplicaria e o card ficaria INVISIVEL, sem nada para resgatar. Medido: opacity 0 com timeline_ativa=false. Agora quem manda em aparecer continua sendo o IntersectionObserver, que ja funciona e nao depende de timeline. Aqui so entra o deslocamento: se a timeline morrer, o card fica parado e visivel, que e o pior caso aceitavel. */ .bn-sda .blb__grid > .blc{ animation:bnAssenta linear both; animation-timeline:view(block); animation-range:entry 0% entry 62%; } @keyframes bnAssenta{ from{ transform:translateY(16px) scale(.984) } to { transform:none } } } /* ══════════════════════════════════════════════════════════════════════ MOVIMENTO REDUZIDO Quem pediu para nao animar nao recebe NADA desta camada: os valores vao direto para o estado final, sem timeline. ══════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion:reduce){ .bn-sda .art-progress,.bn-sda .bh__prog, .bn-sda .bfed__scene,.bn-sda .bwipe__stage, .bn-sda .blc__media img,.bn-sda .art-rel-img img,.bn-sda .art-cover-wrap img, .bn-sda #art-hero .art-hero-deco-img, .bn-sda .bmac__p,.bn-sda .bmac__cross,.bn-sda .bmac__mark, .bn-sda .blb__grid > .blc{ animation:none !important; transform:none !important; opacity:1 !important; } /* a curva aparece pronta: sem animacao o dashoffset precisa ser zerado, senao o traco ficaria invisivel em vez de estatico */ .bn-sda .bmac__p{stroke-dashoffset:0 !important} .bn-sda .art-progress,.bn-sda .bh__prog{width:0 !important} }