/* ============================================================ AMPARO VIDA — camada de movimento Ponderação: Jakub Krehel (polimento invisível) como primário, Emil Kowalski (portão de frequência, velocidade) como secundário. Jhey Tompkins fica de fora de propósito: o público é filho ansioso de idoso, e o próprio idoso. Movimento aqui serve para acalmar e orientar, nunca para encantar. O que NÃO anima, por decisão: - links do menu (uso constante, alcançáveis por teclado) → só cor - campos de formulário → entrada instantânea - nada em loop para chamar atenção → nenhum pulso, brilho ou respiro ============================================================ */ :root { /* Curvas próprias. `ease` e `ease-in-out` nativos são fracos demais — é a diferença entre parecer animado e parecer bom. */ --mov-saida: cubic-bezier(.22, 1, .36, 1); /* desacelera forte: chegando */ --mov-entrada: cubic-bezier(.55, 0, 1, .45); /* acelera: saindo */ --mov-toque: cubic-bezier(.34, 1.4, .64, 1); /* leve reação tátil */ --mov-rapido: 180ms; /* feedback direto: botão, hover */ --mov-medio: 260ms; /* mudança de estado visível */ --mov-entrar: 480ms; /* elemento surgindo — Jakub, 200-500ms */ } /* ============================================================ 1. Entrada ao rolar Receita do Jakub: opacidade + translateY + blur. O blur faz o elemento "materializar" em vez de só aparecer — mais físico. O estado escondido só existe com JS ativo (classe .js no ), senão uma falha de script deixaria a página em branco. ============================================================ */ .js .revelar { opacity: 0; transform: translateY(14px); filter: blur(4px); transition: opacity var(--mov-entrar) var(--mov-saida), transform var(--mov-entrar) var(--mov-saida), filter var(--mov-entrar) var(--mov-saida); } .js .revelar.visivel { opacity: 1; transform: none; filter: blur(0); } /* Escalonamento curto. Passar de ~60ms por item faz a última peça da grade chegar depois que o olho já foi embora. */ .js .revelar[data-atraso="1"] { transition-delay: 60ms; } .js .revelar[data-atraso="2"] { transition-delay: 120ms; } .js .revelar[data-atraso="3"] { transition-delay: 180ms; } /* ============================================================ 2. Placeholder de imagem (esqueleto) Só em imagem com loading="lazy" — ou seja, abaixo da dobra, que é onde a imagem realmente ainda não chegou. Pôr esqueleto em imagem que carrega junto com a página seria teatro: piscaria e sumiria. O contêiner já tem aspect-ratio, então não há salto de layout. ============================================================ */ .img-caixa { position: relative; overflow: hidden; background: #eef2f6; } /* O brilho anda num pseudo-elemento com translateX, e nao com background-position. background-position e propriedade de pintura: em loop infinito ela repinta na thread principal a cada frame, e com varios esqueletos na tela o navegador engasga. transform o compositor resolve. */ .img-caixa::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .7) 50%, transparent 80%); transform: translateX(-100%); animation: mov-brilho 1.6s linear infinite; will-change: transform; } @keyframes mov-brilho { to { transform: translateX(100%); } } /* Chegou a imagem: o pseudo-elemento deixa de existir, entao a animacao para de verdade - nao fica um elemento invisivel girando. */ .img-caixa.carregada { background: transparent; } .img-caixa.carregada::after { content: none; } .js .img-caixa img { opacity: 0; transform: scale(1.015); transition: opacity var(--mov-medio) var(--mov-saida), transform var(--mov-entrar) var(--mov-saida); } .js .img-caixa.carregada img { opacity: 1; transform: none; } /* Esqueleto de texto, para uso futuro em conteúdo carregado sob demanda. */ .esqueleto-linha { position: relative; overflow: hidden; height: 1em; border-radius: 6px; background: #eef2f6; } .esqueleto-linha::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .7) 50%, transparent 80%); transform: translateX(-100%); animation: mov-brilho 1.6s linear infinite; will-change: transform; } .esqueleto-linha + .esqueleto-linha { margin-top: .6em; } .esqueleto-linha.curta { width: 60%; } /* ============================================================ 3. Progresso de leitura Só nos artigos. É a contraparte visual do "7 min de leitura": o leitor aceitou um texto longo, então merece saber onde está. Linear de propósito — curva em barra de progresso mente sobre o quanto falta. ============================================================ */ .progresso-leitura { position: fixed; top: 0; left: 0; z-index: 1050; height: 3px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--primary-light), var(--accent-green)); pointer-events: none; } /* Onde houver scroll-driven animation, o navegador resolve sozinho, fora da thread principal. O JS só entra como reserva. */ @supports (animation-timeline: scroll()) { .progresso-leitura { animation: mov-progresso linear; animation-timeline: scroll(root block); } } @keyframes mov-progresso { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* ============================================================ 4. Toque nos botões scale(0.97) no :active. Custo zero, e é o retorno tátil que faz a interface parecer responsiva mesmo antes de qualquer coisa carregar. ============================================================ */ .btn, .share-btn, .whatsapp-flutuante, .menu-toggle { transition: transform var(--mov-rapido) var(--mov-toque), box-shadow var(--mov-rapido) ease-out, background-color var(--mov-rapido) ease-out, color var(--mov-rapido) ease-out; } .btn:active, .share-btn:active, .menu-toggle:active { transform: scale(.97); } /* ============================================================ 5. Movimento reduzido Não é opcional. Público idoso tem sensibilidade vestibular real, e o resto da página continua funcionando inteiro sem nada disso. ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } /* O conteúdo aparece direto, sem passar pelo estado escondido. */ .js .revelar { opacity: 1; transform: none; filter: none; } .js .img-caixa img { opacity: 1; transform: none; } /* Sem brilho em loop — vira um tom sólido enquanto carrega. */ .img-caixa, .esqueleto-linha { background: #eef2f6; } .img-caixa::after, .esqueleto-linha::after { content: none; } /* A barra de progresso continua existindo: ela informa, não decora. Só deixa de ser animada — o JS ajusta o valor direto. */ .progresso-leitura { transition: none; } } /* ============================================================ 6. Transição entre páginas (entrada e saída) View Transitions entre documentos: o navegador faz o cross-fade entre a página que sai e a que entra, sem SPA e sem JS. Onde não há suporte, a navegação continua igual — corte seco, como antes. Isto é o que mais mudava a sensação de "site parado": navegar entre páginas era um piscar branco. ============================================================ */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: mov-sai-pagina 200ms var(--mov-entrada) both; } ::view-transition-new(root) { animation: mov-entra-pagina 320ms var(--mov-saida) both; } @keyframes mov-sai-pagina { /* Saída mais discreta que a entrada: a atenção já foi para o que vem. */ to { opacity: 0; transform: translateY(-8px); } } @keyframes mov-entra-pagina { from { opacity: 0; transform: translateY(12px); } } /* O cabeçalho é o mesmo objeto nas duas páginas, então ele fica parado enquanto o conteúdo troca — em vez de piscar junto. */ .header { view-transition-name: cabecalho; } .whatsapp-flutuante { view-transition-name: whatsapp; } /* ============================================================ 7. Entrada da página (carregamento) Só o topo, e só uma vez. Acontece uma vez por visita — pelo portão de frequência do Emil, é onde movimento mais expressivo se justifica. fill-mode backwards para o elemento não piscar visível antes do próprio atraso começar. ============================================================ */ .js .entra-no-load > * { animation: mov-entra-topo 560ms var(--mov-saida) backwards; } .js .entra-no-load > *:nth-child(1) { animation-delay: 40ms; } .js .entra-no-load > *:nth-child(2) { animation-delay: 110ms; } .js .entra-no-load > *:nth-child(3) { animation-delay: 180ms; } .js .entra-no-load > *:nth-child(4) { animation-delay: 250ms; } .js .entra-no-load > *:nth-child(5) { animation-delay: 320ms; } @keyframes mov-entra-topo { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } } /* ============================================================ 8. Toque Sem :hover no iPad e no celular, 29 efeitos de hover simplesmente não existem — era a maior parte do polimento, invisível no toque. :active devolve resposta imediata ao dedo. ============================================================ */ .frente-card, .artigo-card, .service-card, .differential-card, .servico-secao-artigo { transition: transform var(--mov-rapido) var(--mov-toque), box-shadow var(--mov-medio) ease-out, border-color var(--mov-medio) ease-out; } @media (hover: none) { .frente-card:active, .artigo-card:active, .service-card:active, .servico-secao-artigo:active { transform: scale(.985); box-shadow: var(--sombra-1); } } /* ============================================================ 9. Movimento reduzido — cobre também o que foi acrescentado ============================================================ */ @media (prefers-reduced-motion: reduce) { .js .entra-no-load > * { animation: none; } /* Desliga a transição entre páginas: cross-fade de tela inteira é exatamente o tipo de movimento que incomoda quem pediu redução. */ @view-transition { navigation: none; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }