/* ═══════════════════════════════════════════════════════════════════ BRASA — o carvão aceso atrás do SITE INTEIRO ═══════════════════════════════════════════════════════════════════ O QUE ISTO CONSERTA, medido antes de escrever: altura da página ........ 13.249px altura do .hero ......... 921px com calor ............... 7% O gradiente quente (rgba(225,85,0,.22)) morava DENTRO do `.hero`, e todas as seções abaixo dele são `background: transparent` — ou seja, 93% da página era a cor chapada `--bg` com um grão por cima. O calor sumia logo abaixo da dobra e o resto virava carvão liso. A camada abaixo é `position: fixed`, então ela não "acaba": acompanha a rolagem e está presente do topo ao rodapé, em qualquer altura da página. ── POR QUE O FUNDO SAIU DO E FOI PARA O ────────────── `body` tinha `background: var(--bg)`, opaco. Um filho com z-index negativo pinta ATRÁS do conteúdo do body, mas o fundo opaco do próprio body cobriria a brasa e nada apareceria. A cor base sobe para o `html` e o `body` fica transparente — assim a camada tem onde existir. Nenhuma cor muda: é a MESMA `--bg`, um nível acima. ── POR QUE ESTES ALPHAS, E NÃO MAIS QUENTES ──────────────────────── As seções abaixo do hero são `background: transparent`, então o texto de apoio pousa DIRETO sobre esta camada — não sobre uma superfície opaca. Calor demais aqui come contraste de quem lê. Medido no pior caso possível (as três camadas quentes empilhadas no pixel mais quente), contra o texto `--cream-low`: leito .20 · g1 .16 · g2 .10 -> fundo rgb(106,47,11) 4.02:1 ✗ leito .16 · g1 .12 · g2 .08 -> fundo rgb(89,43,11) 4.40:1 ✗ leito .14 · g1 .10 · g2 .07 -> fundo rgb(81,39,13) 4.63:1 ✓ O terceiro é o que está aqui: passa AA (4.5:1) mesmo no ponto mais quente da tela, e ainda é brasa de verdade. Subir estes números reprova o texto miúdo — se for mexer, refaça a conta. ── CUSTO ─────────────────────────────────────────────────────────── Só `transform` e `opacity` são animados — as duas propriedades que o compositor resolve na GPU, sem recalcular layout nem repintar. Nada de `filter: blur` (caro em tela cheia) nem de animar `background`. As manchas já nascem suaves porque são `radial-gradient`. */ html { background: var(--bg); } body { background: transparent; } .brasa { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; /* o leito de carvão: escuro em cima, quente embaixo, sempre presente */ background: radial-gradient(120% 58% at 50% 112%, rgba(225, 85, 0, .14) 0%, rgba(193, 58, 37, .06) 38%, transparent 70%), radial-gradient(90% 45% at 8% 84%, rgba(225, 85, 0, .05) 0%, transparent 62%), radial-gradient(85% 42% at 92% 92%, rgba(193, 58, 37, .05) 0%, transparent 64%); } /* ── as manchas que respiram (o carvão pulsando) ─────────────────── */ .brasa-glow { position: absolute; border-radius: 50%; will-change: transform, opacity; } .brasa-glow.g1 { left: -15%; bottom: -30%; width: 130%; height: 75%; background: radial-gradient(closest-side, rgba(225, 85, 0, .10) 0%, rgba(193, 58, 37, .04) 55%, transparent 80%); animation: brasa-respira 17s ease-in-out infinite; } .brasa-glow.g2 { left: -25%; bottom: -10%; width: 85%; height: 55%; background: radial-gradient(closest-side, rgba(255, 106, 15, .07) 0%, transparent 76%); animation: brasa-respira 23s ease-in-out infinite -6s; } .brasa-glow.g3 { right: -25%; bottom: -18%; width: 90%; height: 60%; background: radial-gradient(closest-side, rgba(193, 58, 37, .07) 0%, transparent 78%); animation: brasa-respira 29s ease-in-out infinite -13s; } @keyframes brasa-respira { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .75; } 50% { transform: translate3d(0, -3%, 0) scale(1.08); opacity: 1; } } /* ── as fagulhas que sobem ────────────────────────────────────────── Invólucro próprio de propósito: as fagulhas são irmãs das manchas, e sem ele `:nth-child(1)` apontaria para a primeira MANCHA em vez da primeira fagulha — três fagulhas ficariam sem posição nem ritmo, empilhadas no mesmo canto. Aqui o nth-child recomeça do 1. */ .fagulhas { position: absolute; inset: 0; display: block; } .fagulha { position: absolute; bottom: -12px; width: 3px; height: 3px; border-radius: 50%; background: var(--acao-viva); box-shadow: 0 0 6px rgba(255, 106, 15, .8); opacity: 0; will-change: transform, opacity; animation: fagulha-sobe linear infinite; } @keyframes fagulha-sobe { 0% { transform: translate3d(0, 0, 0) scale(.6); opacity: 0; } 8% { opacity: .85; } 70% { opacity: .5; } 100% { transform: translate3d(var(--desvio, 16px), -108vh, 0) scale(.2); opacity: 0; } } /* posição, tamanho e ritmo distribuídos — sem JS, sem style inline */ .fagulha:nth-child(1) { left: 6%; animation-duration: 15s; animation-delay: -2s; --desvio: 18px; } .fagulha:nth-child(2) { left: 14%; animation-duration: 21s; animation-delay: -9s; --desvio: -14px; width: 2px; height: 2px; } .fagulha:nth-child(3) { left: 23%; animation-duration: 17s; animation-delay: -14s; --desvio: 24px; } .fagulha:nth-child(4) { left: 31%; animation-duration: 25s; animation-delay: -5s; --desvio: -20px; width: 4px; height: 4px; } .fagulha:nth-child(5) { left: 40%; animation-duration: 19s; animation-delay: -17s; --desvio: 12px; width: 2px; height: 2px; } .fagulha:nth-child(6) { left: 48%; animation-duration: 23s; animation-delay: -1s; --desvio: -26px; } .fagulha:nth-child(7) { left: 57%; animation-duration: 16s; animation-delay: -11s; --desvio: 20px; } .fagulha:nth-child(8) { left: 65%; animation-duration: 27s; animation-delay: -7s; --desvio: -16px; width: 2px; height: 2px; } .fagulha:nth-child(9) { left: 73%; animation-duration: 18s; animation-delay: -20s; --desvio: 28px; } .fagulha:nth-child(10) { left: 81%; animation-duration: 22s; animation-delay: -3s; --desvio: -12px; width: 4px; height: 4px; } .fagulha:nth-child(11) { left: 88%; animation-duration: 20s; animation-delay: -15s; --desvio: 16px; width: 2px; height: 2px; } .fagulha:nth-child(12) { left: 95%; animation-duration: 26s; animation-delay: -10s; --desvio: -22px; } /* ── DIA: o carvão está apagado ─────────────────────────────────── O mesmo laranja que dá calor no escuro vira lama sobre creme, e ainda come contraste do texto escuro. No dia sobra um rastro morno bem de baixo, e as fagulhas somem — não existe brasa acesa em plena luz. */ html[data-tema="dia"] .brasa { background: radial-gradient(120% 55% at 50% 114%, rgba(225, 85, 0, .09) 0%, rgba(193, 58, 37, .04) 40%, transparent 72%); } html[data-tema="dia"] .brasa-glow { opacity: .35; } html[data-tema="dia"] .fagulha { display: none; } /* ── QUEM PEDIU MENOS MOVIMENTO ─────────────────────────────────── A regra global do projeto zera a DURAÇÃO das animações, o que congelaria a fagulha no quadro 0% (opacity 0, invisível) e a mancha num estado arbitrário. Aqui a intenção é explícita: o calor fica, parado; o que se move sai de cena. */ @media (prefers-reduced-motion: reduce) { .fagulha { display: none; } .brasa-glow { animation: none; opacity: .85; } } /* ── O RODAPÉ DEIXA A BRASA PASSAR ──────────────────────────────── Medido depois de a camada existir: quatro blocos ainda tapavam o calor com fundo opaco de tela cheia. .hero ........... 921px, gradiente próprio → mantém (é o palco) .placa-chapa .... 490 e 509px, rgb(33,27,22) → mantém (são CARDS, superfície opaca é o certo, igual aos produtos) .rodape ......... 663px, #100D0B → ESTE era o problema O rodapé é uma laje de 663px MAIS ESCURA que o próprio `--bg`, bem onde o leito de carvão é mais quente. Resultado: a brasa acendia a página inteira e apagava exatamente no fim — que é o oposto de um carvão, cujo calor mora embaixo. Transparente, ele recebe a parte mais quente do gradiente. A borda de cima e as bandeirinhas continuam separando a seção. */ .rodape { background: transparent; } html[data-tema="dia"] .rodape { background: transparent; }