/* ═══════════════════════════════════════════════════════════════════════════ movimento.css — o estado INICIAL do que vai se mover, e a rede de segurança. ─────────────────────────────────────────────────────────────────────────── Quem esconde é este arquivo, por SELETOR ESTRUTURAL — não por uma classe que o JS pendura depois. Se o JS pendurasse a classe, existiria um quadro em que o conteúdo aparece e some de novo: um piscar feio logo na chegada. Aqui o bloco já nasce recuado, e o JS só ACENDE. Tudo isto vive atrás de `html.js`, marcado por um script de uma linha no . Sem JavaScript — ou se o `movimento.js` não conseguir instalar os observadores — a marca não existe (ou é removida) e o site inteiro aparece parado e completo. Nunca uma página em branco por causa de enfeite. ═══════════════════════════════════════════════════════════════════════════ */ /* ── o assentamento: sobe 30px e POUSA (a curva desacelera no fim) ────────── */ html.js main > section > .wrap > *, html.js main > section > .wrap-estreito > * { opacity: 0; transform: translateY(30px); transition: opacity .9s cubic-bezier(.16,.84,.44,1), transform .9s cubic-bezier(.16,.84,.44,1), letter-spacing 1.15s cubic-bezier(.16,.84,.44,1); } html.js main > section > .wrap > .on, html.js main > section > .wrap-estreito > .on { opacity: 1; transform: none; } /* ── o letreiro que se compõe ────────────────────────────────────────────── O título da seção assenta as letras: entra aberto e fecha no espaçamento normal. Custa zero por quadro (pega carona na transição que já existe) e acontece uma vez só — quem volta para cima já encontra tudo composto. */ html.js main > section > .wrap > .w-titulo, html.js main > section > .wrap > .w-titulo-grande, html.js main > section > .wrap > .w-titulo-rubro, html.js main > section > .wrap-estreito > .w-titulo, html.js main > section > .wrap > .w-sinopse-topo { letter-spacing: .28em; } html.js main > section > .wrap > .w-titulo.on, html.js main > section > .wrap > .w-titulo-grande.on, html.js main > section > .wrap > .w-titulo-rubro.on, html.js main > section > .wrap-estreito > .w-titulo.on, html.js main > section > .wrap > .w-sinopse-topo.on { letter-spacing: normal; } /* ── o palco: o bloco entra, segura e recua ao sair ───────────────────────── */ html.js .palco-stage { will-change: opacity, transform; transform-origin: 50% 42%; backface-visibility: hidden; } /* backstop de perf: no celular o desfoque de saída NUNCA entra — é o item mais caro do efeito — mesmo que a trava de largura do JS falhe num emulador. */ @media (max-width: 899px) { html.js .palco-stage { filter: none !important; } } /* ── as faixas de vídeo ganham profundidade ───────────────────────────────── */ html.js .w-faixa video, html.js .w-divino video { will-change: transform; } /* A MÍDIA DA FAIXA É DO TAMANHO DA TELA (ou da seção, o que for maior). É essa a diferença entre "tem parallax" e "não tem": com a mídia só um pouco maior que a caixa, o curso disponível é a SOBRA, e a sobra do Wix (27,4%) dá 12px de deslocamento a cada 100 de rolagem — invisível. Presa à tela, ela anda os 80/100 que ele anda, e cobre sempre, porque o pedaço visível da seção nunca sai de dentro da tela. Prova em `testes.mjs`. */ html.js .w-faixa-video { height: max(100vh, 100%); top: 0; bottom: auto; } /* ── o ornamento abre do centro para as pontas ────────────────────────────── */ html.js .w-moldura-arte { will-change: clip-path, opacity; } /* ── os 14 selos chegam em cascata ────────────────────────────────────────── */ html.js .w-selos > * { will-change: transform, opacity; } /* ═══ A REDE ═══════════════════════════════════════════════════════════════ Quem pediu menos movimento recebe a página inteira, imóvel e completa. Nada de opacidade zero sobrando, nada de desfoque, nada de transform pendurado. */ @media (prefers-reduced-motion: reduce) { html.js main > section > .wrap > *, html.js main > section > .wrap-estreito > *, html.js .palco-stage, html.js .w-selos > *, html.js .w-faixa video, html.js .w-divino video { opacity: 1 !important; transform: none !important; filter: none !important; letter-spacing: normal !important; transition: none !important; } html.js .w-moldura-arte { clip-path: none !important; opacity: 1 !important; } } /* Impressão: papel não tem scroll. Tudo visível. */ @media print { html.js main > section > .wrap > *, html.js main > section > .wrap-estreito > * { opacity: 1 !important; transform: none !important; } } /* ── modo de AUDITORIA: `html.sem-movimento` entrega a pagina parada e inteira. Serve ao detector de vazamento do `_shot.mjs`: com o palco no meio de uma escala, a caixa medida sai menor que o conteudo e tudo parece estourar. ── */ html.sem-movimento main > section > .wrap, html.sem-movimento main > section > .wrap-estreito, html.sem-movimento main > section > .wrap > *, html.sem-movimento main > section > .wrap-estreito > *, html.sem-movimento .palco-stage, html.sem-movimento .w-selos > *, html.sem-movimento .w-faixa video, html.sem-movimento .w-divino video { opacity: 1 !important; transform: none !important; filter: none !important; letter-spacing: normal !important; transition: none !important; } html.sem-movimento .w-moldura-arte { clip-path: none !important; opacity: 1 !important; } /* ⚠ A PAGINA PARADA TAMBEM NAO ROLA SUAVE. `html{scroll-behavior:smooth}` faz todo `scrollTo` do capturador virar VIAGEM: o print do topo era tirado com a pagina ainda a caminho, e o hero — a primeira coisa que o leitor ve — nunca apareceu em print nenhum, nem a 375 nem a 1440 (saia a sinopse no lugar). No modo de auditoria a rolagem e instantanea; no site, continua suave. */ html.sem-movimento { scroll-behavior: auto !important; }