/* ============================================================ ORYN — motion.css Camada de MOVIMENTO. Carrega por último, depois de style.css e v2.css, e só ACRESCENTA: nenhuma regra aqui reescreve cor, espaço, tipo ou contraste — o que foi auditado continua valendo. Personalidade de motion desta marca: **Premium**. Duração 350–600ms · desaceleração no fim · overshoot ZERO em bloco grande. A assinatura já existe em style.css e é reusada, não redefinida: `--e-expo` (expo-out) para entrada e `--e-in` para saída. Regra da casa que vale aqui também: cada mecanismo é desarmado pelo SEU PRÓPRIO eixo em `prefers-reduced-motion`. A regra universal de duração só encurta — não neutraliza estado inicial, e estado inicial escondido vira conteúdo perdido. Tudo é `@supports`-guardado. Navegador que não conhece a propriedade não recebe a regra e fica exatamente como estava. ============================================================ */ /* ============================================================ 1. TRANSIÇÃO ENTRE PÁGINAS (View Transitions cross-document) ============================================================ O site tem QUATRO rotas — hub, /comunicacao, /desenvolvimento-3d e /experimente-3d — e até aqui a troca entre elas era corte seco: tela pisca, cabeçalho redesenha, o visitante recebe o sinal de "outro site". Num site cujo argumento é continuidade entre duas frentes, isso trabalha contra o conteúdo. Por que a API nativa e não um router em JS: · o roteamento por JS exige interceptar clique, buscar HTML, trocar o
e refazer estado — e quebra o botão Voltar, o "abrir em nova aba" e o carregamento sem script; · a versão nativa é declarativa, não intercepta nada, mantém a navegação real do navegador e **degrada para o corte seco de hoje** onde não há suporte. Custo do fallback: zero. ⚠️ A at-rule precisa existir nos DOIS documentos (o que sai e o que entra). Por isso esta folha é linkada nas quatro páginas — tirar de uma delas desliga a transição das outras PARA ela. */ @view-transition { navigation: auto; } /* O cabeçalho é o único elemento presente nas quatro páginas com a mesma caixa e a mesma posição. Nomeá-lo o tira do retrato da página e o promove a grupo próprio: em vez de sumir junto com a página velha e renascer com a nova, ele PERMANECE — âncora fixa enquanto o conteúdo troca por baixo. ⚠️ Por que `.topo .marca` e não `.marca`: o wordmark aparece DUAS vezes por página (cabeçalho e rodapé). `view-transition-name` precisa ser único no documento; dois elementos com o mesmo nome **cancelam a transição inteira** — e cancelam calado, sem erro no console. O nome vai no cabeçalho, que é o container único. */ .topo { view-transition-name: vt-topo; } /* O botão flutuante de WhatsApp persegue o visitante em todas as páginas. Sem nome ele apagaria e reacenderia a cada navegação — justamente o elemento que não pode piscar, porque é o canal. */ .zap { view-transition-name: vt-zap; } /* O corpo da página: a velha sai subindo e apagando, a nova entra subindo de baixo. Contra-movimento curto (1,2rem sai · 1,6rem entra) — em bloco de página inteira, deslocamento grande lê como slide de apresentação, não como continuidade. Entrada MAIS LONGA que a saída (460 × 340ms): o olho cobra atenção do que aparece, não do que vai embora. */ ::view-transition-old(root) { animation: vt-sai .34s var(--e-in) both; } ::view-transition-new(root) { animation: vt-entra .46s var(--e-expo) both; } @keyframes vt-sai { to { opacity: 0; translate: 0 -1.2rem; } } @keyframes vt-entra { from { opacity: 0; translate: 0 1.6rem; } } /* O cabeçalho não deve viajar com o conteúdo: ele é o que fica parado. Duração curta só para acomodar a diferença de padding entre o estado rolado e o estado de topo. */ ::view-transition-group(vt-topo), ::view-transition-group(vt-zap) { animation-duration: .3s; animation-timing-function: var(--e-expo); } /* ============================================================ 2. FIO DE PROGRESSO DE LEITURA (scroll-driven, sem JS) ============================================================ As páginas passam de 8.000px. O visitante não tem noção de quanto falta, e "quanto falta" é o que decide entre continuar rolando e sair. Por que `animation-timeline: scroll()` e não um listener: a receita comum lê `scrollY` dezenas de vezes por segundo na thread principal e escreve `style.width` — que invalida layout. Aqui a linha do tempo é a própria barra de rolagem e a animação roda no COMPOSITOR: não passa por JS, não invalida layout e continua fluida enquanto os canvas 3D desenham. `scaleX` em vez de `width` pelo mesmo motivo — largura é layout, escala é composição. */ .fio-scroll { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; /* as MESMAS paradas do `--ouro-grad`, mas no eixo horizontal. O token da folha é 145°, desenhado para superfície de botão; numa faixa de 2px de altura os 145° comprimem as três paradas em menos de dois pixels e o degradê some — o fio sairia dourado chapado. Deitado, a luz corre ao longo do fio, que é o que faz ouro parecer metal em vez de tinta. */ background: linear-gradient(90deg, #B08A50 0%, #C8A46A 42%, #E4CFA6 100%); transform: scaleX(0); transform-origin: 0 50%; /* o fio nasce fechado; no topo da página não existe progresso para mostrar e uma régua dourada ali seria só ruído */ pointer-events: none; /* fica sob a borda do cabeçalho rolado, não sobre ela */ opacity: .9; } @supports (animation-timeline: scroll()) { .fio-scroll { animation: fio-progresso linear both; animation-timeline: scroll(root block); } @keyframes fio-progresso { to { transform: scaleX(1); } } } /* ============================================================ 3. PROFUNDIDADE DO HERO NA ROLAGEM (scroll-driven) ============================================================ O hero era a única seção sem relação nenhuma com a rolagem: entrava no carregamento e depois subia rígido, como papel colado na página. Ele é o primeiro plano do site — e primeiro plano que sobe sem gesto entrega "página", não "peça". ⚠️ ARMADILHA QUE CUSTOU A PRIMEIRA VERSÃO DESTA REGRA A tentativa óbvia era `animation-timeline: view()` com `animation-range: exit`. Ela NÃO funciona aqui, e falha calada: `view()` resolve contra o **ancestral rolável mais próximo**, e `.hero` tem `overflow: hidden` (para conter o vídeo e o canvas). `overflow: hidden` cria um scroll container mesmo sem barra de rolagem — então a linha do tempo ficava ancorada numa caixa que nunca rola. Medido: `timeline.currentTime` congelado em 48,71% em QUALQUER posição da página, animação parada no quadro 0%. Nada no console, nada quebrado no layout: só não acontece. `scroll(root)` é imune por construção — nomeia o scroller do DOCUMENTO e ignora a cadeia de ancestrais. Regra para quem vier depois: dentro de qualquer seção com `overflow` diferente de `visible`, `view()` está fora; use `scroll(root)` com faixa em `vh`, que é a mesma medida em que o hero foi desenhado. ⚠️ SEGUNDA DECISÃO, TAMBÉM REVISTA A primeira versão apagava o hero (opacity → 0). Foi descartada por dois motivos medidos, não por gosto: · o `.lead` é `--tx-2` (#A9A9A9), 8:1 sobre o fundo. A 0,6 de opacidade ele composita em ~3,4:1 e **reprova AA** enquanto ainda está na tela; · o botão do hero é o CTA principal e ficaria semitransparente com metade dele ainda visível. Sobrou o DESLOCAMENTO puro — que não tem como estragar contraste, porque não mexe em cor. Profundidade sem custo de leitura. */ @supports (animation-timeline: scroll()) { @media (prefers-reduced-motion: no-preference) { /* o conteúdo sobe um pouco MAIS RÁPIDO que a página: a diferença é o que o olho lê como "tem espaço atrás disso". 3rem é o teto — acima disso o bloco descola do fundo e vira slide. */ .hero > .env { animation: hero-sobe linear both; animation-timeline: scroll(root block); animation-range: 0 100vh; } /* e o fundo mais DEVAGAR, no sentido oposto. O `scale` existe só para criar folga: sem ele, arrastar o vídeo abriria uma faixa vazia na borda do hero, que é `overflow:hidden`. ⚠️ A conta tem de sobrar. `scale: 1.06` dá 3% de folga de cada lado; com 3% de curso a folga é consumida INTEIRA e a borda de cima do vídeo pousa exatamente na borda do hero — medido em 1366×768: sobra 24,8px, curso 24,8px, margem ZERO. Um pixel de arredondamento abriria faixa. `scale: 1.08` (4% por lado) com 2,5% de curso deixa 1,5% de margem — ~12px a 826px de hero. */ .hero-video { animation: hero-fundo linear both; animation-timeline: scroll(root block); animation-range: 0 100vh; } } @keyframes hero-sobe { to { translate: 0 -3rem; } } @keyframes hero-fundo { from { scale: 1.08; translate: 0 0; } to { scale: 1.08; translate: 0 2.5%; } } } /* ============================================================ 4. FAQ: ABRIR E FECHAR COM ALTURA (nativo) ============================================================ O `
` estalava. Só o chevron animava — a altura pulava, e num acordeão o pulo é o defeito mais visível que existe, porque empurra tudo que está abaixo de uma vez. `interpolate-size: allow-keywords` destrava a interpolação de `auto`, que era exatamente o motivo de isso sempre ter exigido JS medindo `scrollHeight`. `::details-content` dá acesso à caixa interna que o navegador cria sozinho. `content-visibility` precisa entrar em `allow-discrete`: ela é propriedade discreta e, sem isso, o conteúdo é escondido no primeiro quadro e a altura anima sobre o vazio. */ @supports (interpolate-size: allow-keywords) and (selector(::details-content)) { :root { interpolate-size: allow-keywords; } .faq details::details-content { block-size: 0; overflow: clip; opacity: 0; transition: block-size .42s var(--e-expo), opacity .3s var(--e-out) .06s, content-visibility .42s allow-discrete; } .faq details[open]::details-content { block-size: auto; opacity: 1; } } /* ============================================================ 5. FILTRO DE CASES: REORGANIZAR EM VEZ DE SALTAR ============================================================ A parte visual do que o `hub.js`/`filtro` dispara. Ao filtrar, os cards que ficam MUDAM DE CÉLULA na grade — e até aqui eles teletransportavam. O olho perde de vista o card que estava olhando e a página parece ter recarregado. O nome e a classe são postos pelo JS só durante a troca e retirados depois. Deixá-los fixos faria os 14 cards virarem grupos de transição também na navegação entre PÁGINAS — 14 retratos por clique de menu, para nada. */ ::view-transition-group(.caso) { animation-duration: .42s; animation-timing-function: var(--e-expo); } /* quem sai encolhe de leve enquanto apaga: sumir só por opacidade lê como falha de carregamento, sumir com escala lê como remoção */ ::view-transition-old(.caso) { animation: vt-caso-sai .26s var(--e-in) both; } ::view-transition-new(.caso) { animation: vt-caso-entra .34s var(--e-expo) both; } @keyframes vt-caso-sai { to { opacity: 0; scale: .96; } } @keyframes vt-caso-entra { from { opacity: 0; scale: .98; } } /* ============================================================ 6. GAVETA MOBILE: OS ITENS ENTRAM, NÃO SÓ O PAINEL ============================================================ O painel deslizava inteiro, como uma porta de armário: um bloco sólido de dez linhas aparecendo de uma vez. No celular a gaveta É a navegação do site — vale ela dizer "aqui estão suas opções, uma a uma" em vez de despejar tudo. ⚠️ `.gaveta > *` e NUNCA `.gaveta a`. A folha já registra quatro ocorrências do mesmo acidente: `.gaveta a` tem especificidade (0,1,1) e engole `.btn--ouro` (0,1,0), que é o CTA do WhatsApp dentro da gaveta. Aqui só entram `opacity` e `translate`, que nenhuma regra de `.btn` declara — mas o seletor fica no filho direto de qualquer forma, porque a regra da casa é essa. Os itens começam ANTES de o painel terminar de entrar (o painel leva --d-slow): esperar o fim somaria 0,6s + 0,34s de cascata e a gaveta demoraria quase um segundo para ficar utilizável. Cascata de 38ms × 10 filhos = 342ms, dentro do teto de 400ms para navegação. */ .js .gaveta > * { opacity: 0; translate: 0 14px; transition: opacity .42s var(--e-expo), translate .42s var(--e-expo); } .js .gaveta[data-aberta="true"] > * { opacity: 1; translate: 0; } .js .gaveta[data-aberta="true"] > *:nth-child(1) { transition-delay: .10s; } .js .gaveta[data-aberta="true"] > *:nth-child(2) { transition-delay: .138s; } .js .gaveta[data-aberta="true"] > *:nth-child(3) { transition-delay: .176s; } .js .gaveta[data-aberta="true"] > *:nth-child(4) { transition-delay: .214s; } .js .gaveta[data-aberta="true"] > *:nth-child(5) { transition-delay: .252s; } .js .gaveta[data-aberta="true"] > *:nth-child(6) { transition-delay: .290s; } .js .gaveta[data-aberta="true"] > *:nth-child(7) { transition-delay: .328s; } .js .gaveta[data-aberta="true"] > *:nth-child(8) { transition-delay: .366s; } .js .gaveta[data-aberta="true"] > *:nth-child(9) { transition-delay: .404s; } .js .gaveta[data-aberta="true"] > *:nth-child(n+10) { transition-delay: .442s; } /* ao FECHAR não há cascata: sair item a item faz a gaveta parecer presa. Saída é sempre mais rápida e sempre em bloco. */ .js .gaveta[data-aberta="false"] > * { transition-delay: 0s; transition-duration: .18s; } /* ============================================================ 7. FOCO COM INTENÇÃO ============================================================ O anel de foco aparecia instantâneo. Animar o `outline-offset` (não a cor, não a espessura) faz o anel "pousar" no elemento — é o único aviso que quem navega por teclado recebe, e vale ser um gesto, não um piscar. `outline-color` fica de fora de propósito: anel que desbota é anel que some, e some justo para quem depende dele. */ @media (prefers-reduced-motion: no-preference) { a, button, summary, input, textarea, select, [tabindex] { transition: outline-offset .16s var(--e-expo); } :focus-visible { outline-offset: 3px; } } /* ============================================================ 8. MOVIMENTO REDUZIDO — desarmar por eixo ============================================================ Cada bloco acima esconde por um MECANISMO diferente. A regra universal de duração de style.css só acelera; aqui cada um é neutralizado pela própria propriedade. */ @media (prefers-reduced-motion: reduce) { /* a navegação volta a ser corte seco — que é o comportamento correto, não uma degradação: quem pediu menos movimento não quer a página deslizando */ ::view-transition-old(root), ::view-transition-new(root), ::view-transition-old(.caso), ::view-transition-new(.caso), ::view-transition-group(*) { animation: none !important; } /* o fio de progresso é INFORMAÇÃO, não enfeite: continua existindo e continua acompanhando a rolagem. Ele não pisca, não gira e não se move sozinho — só reflete onde a pessoa já está. Nada aqui o desliga. */ /* o hero para de reagir à rolagem e volta a ser bloco parado. `translate: none` explícito: desligar só a animação deixaria o elemento no valor do último quadro calculado. */ .hero > .env { animation: none !important; translate: none; } .hero-video { animation: none !important; translate: none; scale: none; } /* o acordeão volta a abrir instantâneo — e ABERTO, nunca preso em altura zero, que é o risco de desligar só a duração */ .faq details::details-content { transition: none; } .faq details[open]::details-content { block-size: auto; opacity: 1; } /* a gaveta abre inteira e imediata. `opacity: 1` explícito: desligar só a duração deixaria os dez itens presos em opacidade zero — a navegação inteira do celular invisível para quem pediu menos movimento, que é o pior resultado possível desta regra. */ .js .gaveta > * { transition: none; opacity: 1; translate: none; } a, button, summary, input, textarea, select, [tabindex] { transition: none; } } /* ============================================================ 9. IMPRESSÃO ============================================================ */ @media print { .fio-scroll { display: none !important; } .hero > .env { animation: none !important; translate: none; } .faq details::details-content { block-size: auto !important; opacity: 1 !important; } } /* ============================================================ 10. MOTION POR ESTRUTURA — cobertura do site inteiro ============================================================ Até aqui o movimento era pontual: quem tinha `.rev`/`.sobe`/ `.cortina` na mão se movia, o resto ficava parado. A auditoria mostrou o tamanho do buraco: **26 `

` no site e só 10 com entrada**, e o rodapé das quatro páginas sem nada. A correção NÃO é sair carimbando classe no HTML. É declarar o movimento por ESTRUTURA — "todo título de seção", "todo card de grade" — de modo que a próxima seção que alguém escrever já nasça animada sem precisar lembrar de nada. Roda em `animation-timeline: view()`: cada elemento tem a própria linha do tempo, ligada à posição DELE na tela. Três consequências que o sistema por IntersectionObserver não dá: · não precisa de classe, de observer nem de callback; · roda no compositor — os canvas 3D continuam com o quadro inteiro para eles; · o escalonamento é ESPACIAL, não temporal: os cards de uma grade entram conforme cruzam a tela, então uma grade de 14 nunca dispara 14 animações de uma vez. É a regra de 1/3 da doutrina caindo de graça. ⚠️ REGRA DE OURO DESTE BLOCO — anima-se o CARD, nunca o filho dele. `view()` resolve contra o ancestral rolável mais próximo, e a auditoria de overflow encontrou vários containers travados: `.svc`, `.porta` e `.case` são `overflow:hidden` (por causa da régua e da cortina), `.jornada` é `overflow:auto` (vira rolagem horizontal no celular) e `.gaveta` idem. Animar um `

` de dentro de um `.svc` daria linha do tempo INATIVA — e aí o elemento congela no quadro 0%, ou seja, **some para sempre**. Por isso o escopo abaixo é sempre `section > .env > alvo` ou o próprio card. ⚠️ Os alvos usam `:where()`, que tem especificidade ZERO. Isso é de propósito: qualquer regra existente — inclusive o desligamento logo abaixo — vence sem precisar de `!important`. */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { /* --- A. TÍTULO E TEXTO DIRETO DA SEÇÃO -------------------- Sobe curto com fade. 16px, não 32: deslocamento grande em título obriga o olho a reencontrar a linha de leitura — é a mesma medida que a folha já usa no `.rev`. */ /* O escopo NÃO pode parar no filho direto do `.env`: a árvore real é `section > .env > div.duas > h2`, e a primeira versão desta regra pegava 10 elementos por página em vez dos ~35 que existem. Todo `h2` de seção entra na conta — título de seção nunca mora dentro de card, cards usam `h3`. */ :where(main > section:not([class*="hero"]) h2), :where(main > section:not([class*="hero"]) > .env) > :where(h3, p, ul, ol, blockquote, .lead, .sec-rot, .filtro), :where(main > section:not([class*="hero"]) > .env > *) > :where(h3, p, ul, ol, blockquote) { animation: mv-sobe linear both; animation-timeline: view(); animation-range: entry 4% cover 30%; } /* --- B. CARD DE GRADE ------------------------------------ Sobe + assenta de 98,5%. A escala é o que separa "pulou para o lugar" de "pousou" — acima de 3% vira zoom e o olho vê o truque. Mesma régua da `.cortina`. */ :where(.porta, .svc, .dor, .num-cx, .lab-modo, .pilar, .costura > article, .mani-item, .peca, .lab-cmd, .lab-palco) { animation: mv-card linear both; animation-timeline: view(); animation-range: entry 2% cover 32%; } /* --- C. ITEM DE LISTA ------------------------------------ Entra pela esquerda. Lista tem direção de leitura; subir uma linha de lista a faz brigar com a de cima. 14px é curto o bastante para não empurrar layout na horizontal. */ :where(.proc, .caso, .faq details, .ctc-lista > *, .lab-passos > li, .lab-limites > *) { animation: mv-lado linear both; animation-timeline: view(); animation-range: entry 2% cover 30%; } /* --- D. RODAPÉ ------------------------------------------- Só fade, sem deslocamento. Rodapé é fim de página: ele não "chega", ele já estava lá. Fazer o rodapé entrar deslizando é o tique de template que a folha evita desde a 1ª rodada. */ :where(.rodape > .env) > * { animation: mv-fade linear both; animation-timeline: view(); animation-range: entry 10% entry 90%; } /* --- E. ESCALONAMENTO ESPACIAL --------------------------- Cards da MESMA linha da grade cruzam a tela juntos e entrariam em uníssono. O atraso não pode ser temporal (`animation-delay` não existe para linha do tempo de rolagem — ela é espacial): o que se desloca é o INÍCIO DA FAIXA. 2% de tela por coluna ≈ 15px, que o olho lê como cascata sem ninguém esperar por nada. */ :where(.porta, .svc, .dor, .num-cx, .proc, .caso, .lab-modo, .peca):nth-child(2n) { animation-range-start: entry 4%; } :where(.porta, .svc, .dor, .num-cx, .proc, .caso, .lab-modo, .peca):nth-child(3n) { animation-range-start: entry 6%; } /* --- F. QUEM JÁ SE MOVE FICA DE FORA --------------------- O sistema antigo (IntersectionObserver + classe) continua dono do que já marcava. Duas animações na mesma propriedade do mesmo elemento é o padrão de bug que já custou tempo nesta folha — e aqui daria entrada dupla, visível. Estes seletores têm especificidade real e vencem os `:where()` acima sem `!important`. `.jornada > *` entra na lista por outro motivo: a jornada é `overflow:auto` (rolagem horizontal no celular), então `view()` ali resolveria contra a fita, não contra a página. */ .rev, .sobe, .cortina, .traco, .escada > *, .rolo > *, .linha-tempo > *, .jornada > *, .hero *, .gaveta > *, .case, .case * { animation-name: none; } /* ⚠️ E o FILHO de card que já entra inteiro também sai. Dois motivos, e o primeiro é bug, não gosto: · `.svc`, `.porta` e `.case` são `overflow:hidden`, então `view()` num filho deles resolve contra o card — que não rola. Linha do tempo inativa congela a animação no quadro 0%, ou seja, `opacity: 0` PARA SEMPRE; · mesmo onde não trava, card entrando + conteúdo do card entrando é entrada dupla no mesmo gesto. */ .svc *, .porta *, .dor *, .caso *, .proc *, .num-cx *, .lab-modo *, .mani-item *, .peca *, .faq details p { animation-name: none; } /* devolve o que a regra acima apagou por tabela: são animações de outro sistema (hover e foco), não entrada por rolagem */ .btn--ouro:hover::after { animation-name: lustro; } .case:hover .case-play::after { animation-name: halo; } } @keyframes mv-sobe { from { opacity: 0; translate: 0 16px; } } @keyframes mv-card { from { opacity: 0; translate: 0 20px; scale: .985; } } @keyframes mv-lado { from { opacity: 0; translate: -14px 0; } } @keyframes mv-fade { from { opacity: 0; } } } /* ============================================================ 12. HERO — o resto do primeiro quadro ============================================================ O hero animava só o `

` (as linhas `.l.sobe`, conduzidas pelo JS depois das fontes). A linha de apoio, o lead e o botão apareciam ESTALADOS ao lado de um título que sobe — o pior dos dois mundos, porque o contraste denuncia o que ficou parado. ⚠️ Aqui o movimento é POR TEMPO, não por `view()`: o hero já está na tela quando a página abre, então esperar rolagem seria esperar por algo que não vai acontecer. E animação de tempo não depende de JS, de observer nem de `@supports` — ela sempre termina. É o que separa isto de um reveal que pode apagar a página se o script falhar. ⚠️ O BOTÃO NÃO TEM FADE. Ele sobe, e só. CTA que nasce em `opacity: 0` é a regra da casa que não se quebra: qualquer coisa que segure a animação deixaria o único caminho de conversão invisível. Movendo sem sumir, o pior caso é um botão 14px fora do lugar por meio segundo. Estes seletores têm especificidade 0,2,0 e vencem o `.hero * { animation-name: none }` do bloco 10 sem `!important`. */ @media (prefers-reduced-motion: no-preference) { .hero .hero-linha { animation: hero-entra .75s var(--e-out) .10s both; } .hero .lead { animation: hero-entra .75s var(--e-out) .58s both; } .hero .hero-acoes { animation: hero-entra-so .75s var(--e-out) .72s both; } .hero .lab-nota { animation: hero-entra .75s var(--e-out) .78s both; } } /* ⚠️ NÃO chamar de `hero-sobe`: esse nome já é da parallax do bloco 5 (`.hero > .env`, linha ~194). `@keyframes` de mesmo nome não convivem — o último vence no documento inteiro e apagaria a parallax do hero. */ @keyframes hero-entra { from { opacity: 0; translate: 0 14px; } } @keyframes hero-entra-so { from { translate: 0 14px; } } /* ============================================================ 11. MOVIMENTO REDUZIDO — desarmar o bloco 10 ============================================================ Mesma disciplina do bloco 8: a duração universal só encurta. Aqui o estado inicial é `opacity: 0`, então sem desarmar de verdade metade do site sumiria para quem pediu menos movimento. */ @media (prefers-reduced-motion: reduce) { :where(main > section > .env) > *, :where(.porta, .svc, .dor, .num-cx, .lab-modo, .pilar, .peca), :where(.proc, .caso, .faq details, .ctc-lista > *), :where(.filtro, .lab-cmd, .lab-palco), .hero .hero-linha, .hero .lead, .hero .hero-acoes, .hero .lab-nota, :where(.rodape > .env) > * { animation: none !important; opacity: 1 !important; translate: none !important; scale: none !important; } }