/* ============================================================================= * vivos.css — camada de "vida sutil" nos elementos da landing. * * 4 efeitos sobrepostos, todos baratos em CPU/GPU: * * 1. RESPIRAÇÃO — caixas oscilam de leve em opacity (1.0 ↔ 0.96) com ritmos * diferentes (4-11s). Sem sincronia entre caixas, dá sensação de * "organismo respirando" sem distrair. Opacity (não transform) pra não * conflitar com :hover translateY que vários elementos já têm. * * 2. TATUAGEM VIVA — pseudo-element ::after com estrela bem fraca atrás dos * fundamento-card. Em hover, ela "acende". Ecoa visualmente os nós da * constelação na tela anterior. * * 3. TINTA LÍQUIDA — filtro SVG turbulence (telosLiquid já definido no HTML) * aplicado nas bordas quando hover. As bordas "ondulam" como tinta molhada. * Só ativa em data-perf=mid/high (em low fica estático). * * 4. SOMBRA QUE RESPIRA — variável CSS --vivos-light-x/y atualizada por JS * em rAF 15fps. Sombras das caixas seguem essa luz simulada, dando * impressão de uma fonte de luz movendo lentamente pela viewport. * * Desliga: prefers-reduced-motion, [data-motion="off"], [data-perf="low"] * (low só perde respiração e líquido; tatuagem e sombra continuam — são * baratos). * ============================================================================= */ :root { /* Luz simulada — atualizada por vivos.js a cada ~66ms. Valores como NUMBER (sem unidade) em [-1, 1] representando deslocamento horizontal/vertical da luz em relação ao centro. Multiplicamos por px no calc() do box-shadow pra obter offset físico. Antes era em %, mas % não converte direto pra offset px em box-shadow — virava sempre 0. */ --vivos-light-dx: 0; --vivos-light-dy: 0; } /* ---------- RESPIRAÇÃO ---------- */ /* Respiração com leve embalo: opacity oscila ~10% + translateY ±5px. Ritmos diferentes (a/b/c) garantem que as caixas nunca andem em sincronia. */ @keyframes vivos-breathe-a { 0%, 100% { opacity: 1; transform: translateY(0); } 50% { opacity: 0.88; transform: translateY(-5px); } } @keyframes vivos-breathe-b { 0%, 100% { opacity: 1; transform: translateY(0); } 50% { opacity: 0.91; transform: translateY(4px); } } @keyframes vivos-breathe-c { 0%, 100% { opacity: 1; transform: translateY(0); } 50% { opacity: 0.93; transform: translateY(-3px); } } /* Slogan e pilares respiram em ritmos diferentes — fora de sincronia. */ .hero-v2__slogan-card { animation: vivos-breathe-a 7.3s ease-in-out infinite; } .hero-v2__pillars { animation: vivos-breathe-b 9.1s ease-in-out infinite; animation-delay: -2.4s; } /* Fundamento-cards SEM respiração: variação opacity+translateY sutil em 16 cards pequenos numa grade densa não é perceptível — vira ruído visual. Custo: cada card animado precisa de composite layer ativa (× 16). Sem ganho real, com custo significativo. Slogan-card e pilares (poucos elementos grandes) mantêm respiração porque ali ela é visível. */ /* Slogan-card não respira durante hover (fundamento-card já não respira). */ .hero-v2__slogan-card:hover { animation-play-state: paused; } /* ---------- TATUAGEM VIVA NOS FUNDAMENTO-CARDS ---------- */ /* Pseudo-estrela atrás de cada card. Posição varia ligeiramente entre cards pra não ficar idêntico. Em estado normal: fraca. Em hover: acende. */ .fundamento-card { isolation: isolate; } .fundamento-card::after { content: ""; position: absolute; inset: auto 18% 22% auto; width: 6px; height: 6px; border-radius: 50%; background: rgba(251, 232, 180, .7); box-shadow: 0 0 14px rgba(251, 232, 180, .65), 0 0 32px rgba(212, 168, 87, .4); opacity: .45; transition: opacity .5s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1), box-shadow .5s ease; pointer-events: none; z-index: -1; } /* Varia posição entre os cards pra não ficar todas no mesmo canto. */ .fundamento-card:nth-child(3n+1)::after { inset: 30% 14% auto auto; } .fundamento-card:nth-child(3n+2)::after { inset: auto auto 18% 16%; } .fundamento-card:nth-child(3n)::after { inset: 22% auto auto 14%; } .fundamento-card:hover::after { opacity: 1; transform: scale(1.6); box-shadow: 0 0 18px rgba(251, 232, 180, .85), 0 0 42px rgba(212, 168, 87, .65); } /* ---------- TINTA LÍQUIDA NA HOVER (mid/high only) ---------- */ /* O filter já existe no do index.html como #telosLiquid (feTurbulence + feDisplacementMap). Aplicar em hover faz as bordas ondularem como tinta. Cuidado: filter cria stacking context novo, então combina com backdrop- filter sem problema. Mas em low-perf cancela porque é pesado. */ .hero-v2__slogan-card, .hero-v2__pillars, .fundamento-card { transition: filter .6s cubic-bezier(.22,.61,.36,1); } html[data-perf="mid"] .fundamento-card:hover, html[data-perf="high"] .fundamento-card:hover { filter: url(#telosLiquid); } /* ---------- SOMBRA QUE RESPIRA ---------- */ /* Light offset em [-1, 1] vira px multiplicando. Sombra "foge" da luz — por isso o sinal negativo (luz à direita = sombra à esquerda). Prefixado com `body` (especificidade 0,2,1) pra vencer as regras inline `.classe.panel` (0,2,0) em , então só especificidade maior garante override. SEM transition em box-shadow — a CSS var é atualizada 15× por segundo pelo vivos.js, e cada update reiniciava uma transition de 1.2s, fazendo o browser recalcular box-shadow em loop quase contínuo. Suavidade vem do próprio sin() do JS (mudança gradual), não precisa transition. */ body .hero-v2__slogan-card.panel, body .hero-v2__pillars.panel { box-shadow: calc(var(--vivos-light-dx) * -18px) calc(var(--vivos-light-dy) * -18px + 14px) 40px rgba(0, 0, 0, .28); } /* Box-shadow ESTÁTICA: 16 cards × recálculo via CSS var 15×/s seria 240 recálculos/s sem ganho visual perceptível (sombras pequenas em cards pequenos não notam o movimento). Slogan-card e pilares mantêm a versão dinâmica porque são poucos elementos grandes e o efeito é visível. */ .fundamento-card { box-shadow: 0 8px 24px rgba(0, 0, 0, .35); transition: background .25s ease, border-color .25s ease, transform .25s cubic-bezier(.22,.61,.36,1); } /* Sobre o hover (que já existe no fundamento.css com sombra dourada), faz override sem perder o efeito de elevação. */ .fundamento-card:hover { box-shadow: 0 18px 40px rgba(0, 0, 0, .42), 0 0 0 1px rgba(212, 168, 87, .25) inset; } /* ---------- KILL-SWITCH ---------- Em motion-off e reduced-motion: zero animação. Em low-perf: sem respiração nem líquido (sombra+tatuagem continuam, são baratos). */ @media (prefers-reduced-motion: reduce) { .hero-v2__slogan-card, .hero-v2__pillars, .fundamento-card { animation: none !important; } } html[data-motion="off"] .hero-v2__slogan-card, html[data-motion="off"] .hero-v2__pillars, html[data-motion="off"] .fundamento-card { animation: none !important; } html[data-motion="off"] .fundamento-card:hover { filter: none !important; } html[data-perf="low"] .hero-v2__slogan-card, html[data-perf="low"] .hero-v2__pillars, html[data-perf="low"] .fundamento-card { animation: none; } /* ---------- BACKDROP-FILTER CONDICIONAL POR PERF ---------- backdrop-filter blur é HEAVY em mobile/low-end — cria composite layer pesado a cada frame. Em data-perf=low, troca por background opaco (visual muito parecido, performance 3-4× melhor). Em mid também desliga blur pra liberar CPU/GPU pra outras animações (Ken Burns, vivos, etc.). Só data-perf=high mantém o efeito glass com blur completo. */ html[data-perf="low"] .hero-v2__slogan-card.panel, html[data-perf="mid"] .hero-v2__slogan-card.panel { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(14, 10, 6, .65); /* opaco compensa ausência de blur */ } html[data-perf="low"] .hero-v2__pillars.panel, html[data-perf="mid"] .hero-v2__pillars.panel { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(14, 10, 6, .58); } html[data-perf="low"] .hero-v2__card.panel, html[data-perf="mid"] .hero-v2__card.panel { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(14, 10, 6, .88); } html[data-perf="low"] .fundamento-card, html[data-perf="mid"] .fundamento-card { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(14, 10, 6, .78); } html[data-perf="low"] .fundamento-constellation, html[data-perf="mid"] .fundamento-constellation { -webkit-backdrop-filter: none; backdrop-filter: none; } /* ---------- PAUSE EM OFFSCREEN ---------- Quando a aba perde foco/visibilidade, body recebe data-offscreen="1" via vivos.js. Aqui, paramos TODAS animations e effects pesados — evita queimar bateria desnecessariamente. */ body[data-offscreen="1"] *, body[data-offscreen="1"] *::before, body[data-offscreen="1"] *::after { animation-play-state: paused !important; transition: none !important; }