/* =========================================================================== * rito.css — o Rito de Entrada e a Passagem · Laís Paschoal. * * ORIGEM: provas/rito-de-entrada/variante-14-leque-arco-iris.html (escolhida * pelo Anthony em 17/09/2026). Tudo que está aqui é o que na prova estava * marcado [RITO]; a dobra aprovada (tokens.css + hero.css) não muda uma linha. * · ABERTURA = variante 04, o leque que vira filete (tela inteira) * · PASSAGEM = variante 03, a palavra que você tocou (intacta), agora ENTRE * DOCUMENTOS: @view-transition + view-transition-name (Chrome/Safari * recentes) e plano B em DOM pros demais (o rito.js decide) * * Decisões do gerente (ficha de 18/09): cor do leque = tratamento 2 "Espectro * pleno" (só ele vai pra produção) · cartas OPACAS · abertura SEM a pausa do * leque aberto · roda uma vez por sessão · reduced-motion zera tudo. * * Classes que o rito-boot.js grava ANTES do primeiro paint no : * .rito — o plano de papel acende por cima da dobra (abertura vai rodar) * .entrou — a Fundação (F1-F7 + assinatura) NÃO anima: a dobra nasce * montada por baixo do leque, como na prova. Persiste; o * seletor de assinatura a remove pra rodar a Fundação de novo * .chegada — este documento está recebendo uma passagem (a palavra chega) * .chegada-b — idem, pelo plano B (a palavra real espera escondida) * Sem JS, CSP ou erro: nenhuma classe → a página nasce montada e normal. * ===========================================================================*/ /* A cortina da cena é uma PROPRIEDADE REGISTRADA, não opacidade: o retrato nunca fica em opacity 0 (trava da coreografia). O que anima é a posição da máscara macia — dissolve de 62% de largura, zero aresta. */ @property --rev { syntax: ""; inherits: false; initial-value: -64%; } /* --- [BOOT] .entrou: a Fundação não roda, a dobra já nasce montada -------- Na prova a dobra por baixo do leque era estática; aqui a mesma coisa. As regras da Fundação em hero.css chegam a (0,4,0) de especificidade ([data-assinatura="b"] .linha:nth-child(1) .linha__interna), por isso o !important — que só o .chegada, mais abaixo, sobrescreve. */ html.entrou .cabecalho__filete, html.entrou .marca, html.entrou .nav__link, html.entrou .hamburguer, html.entrou .hero__rotulo, html.entrou .linha__interna, html.entrou .hero__filete, html.entrou .hero__botao, html.entrou .hero__cena-plate, html.entrou .hero__retrato, html.entrou .hero__luz, html.entrou .interna__filete, html.entrou .interna__linha { animation: none !important; } /* ========================================================================= * [ABERTURA · variante 04] O PLANO DE PAPEL E AS CARTAS DA CARTELA * * O plano é uma CÓPIA EXATA do fundo do body: creme + a mesma vinheta fixa. * Ele nasce no HTML (não no JS) e só existe quando `html.rito` está marcado — * assim não há um frame de home exposta antes do leque entrar, e sem JS ele * simplesmente não aparece. * * As cartas medem MAIS QUE A DIAGONAL DA TELA e giram no canto inferior * esquerdo da viewport. O tamanho é fixo por rodada; o que anima é só o * transform (translate · rotate · scale), tudo no compositor. * ========================================================================= */ .plano { display: none; position: fixed; inset: 0; z-index: 300; pointer-events: none; background-color: var(--chao); background-image: radial-gradient(115% 110% at 100% 100%, var(--chao-sombra) 0%, #ece3d8 34%, var(--chao) 62%); background-attachment: fixed; } /* gateado só por html.rito (pré-paint): a dobra nunca aparece antes do plano, mesmo onde `blocking="render"` não existe (Firefox). Quem derruba o plano se o rito.js falhar é o DOMContentLoaded do boot, no instante em que o script falha (rodada 3). */ html.rito .plano { display: block; } /* o filete mel não se desenha no rito: quem o entrega é a carta de mel, no fim (a classe .rito cai um quadro antes de a carta sair). */ html.rito .cabecalho__filete { opacity: 0; } /* [DECISÃO 2 · cartas opacas] cor chapada, opacity 1, sem blend: no leque aberto as 12 cores se leem inteiras até o pivô. */ .carta { position: fixed; left: 0; top: 0; z-index: 310; pointer-events: none; transform-origin: 0 100%; background-color: var(--tom, #c8923e); opacity: 1; box-shadow: inset 0 0 0 1px var(--borda); will-change: transform; } .carta__filete { position: absolute; inset: 0; opacity: 0; background-image: linear-gradient(to bottom, #fffdf7 0%, #fefbf3 12%, var(--acento) 42%, var(--acento) 72%, #e2c9b1 100%); } /* ========================================================================= * [PASSAGEM · variante 03] Keyframes. Nada aqui é condição de existir: o * estado BASE do CSS já é o final. * ========================================================================= */ @keyframes apagar { from { transform: scaleX(1); } to { transform: scaleX(0); } } @keyframes descer { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(calc(var(--entrada-curta) * -1)); } } @keyframes esconder { from { opacity: 1; transform: translateY(0); } to { opacity: 0.001; transform: translateY(calc(100% + 0.18em)); } } @keyframes revelar-cena { from { --rev: 100%; } to { --rev: -64%; } } @keyframes esconder-cena { from { --rev: -64%; } to { --rev: 100%; } } @keyframes vt-sumir { from { opacity: 1; } to { opacity: 0; } } @keyframes vt-surgir { from { opacity: 0; } to { opacity: 1; } } /* ordem de saída da headline: a linha 3 cai primeiro */ .linha:nth-child(1) .linha__interna { --i-linha: 2; } .linha:nth-child(2) .linha__interna { --i-linha: 1; } .linha:nth-child(3) .linha__interna { --i-linha: 0; } /* a palavra que viaja é um bloco de uma linha só: o View Transition captura uma caixa, não fragmentos de inline. Visualmente idêntico ao inline. */ .nav__palavra, .palavra { display: inline-block; } /* --- saída do documento de origem (gesto de passagem) -------------------- Na home e nas internas. O rito.js marca `sai`, espera 200 ms e navega: o View Transition fotografa a página já a caminho de sumir. */ html.sai .linha__interna { animation: esconder 280ms var(--curva-estado) calc(var(--i-linha, 0) * 40ms) both !important; } html.sai .hero__rotulo { animation: descer 240ms var(--curva-estado) both !important; } html.sai .hero__botao { animation: descer 240ms var(--curva-estado) 40ms both !important; } html.sai .hero__filete { animation: apagar 240ms var(--curva-estado) both !important; } html.sai .hero__cena { --rev: -64%; -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) var(--rev), #000 calc(var(--rev) + 62%)); mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) var(--rev), #000 calc(var(--rev) + 62%)); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; animation: esconder-cena 300ms var(--curva-estado) both !important; } html.sai .interna__filete { animation: apagar 240ms var(--curva-estado) both !important; } html.sai .interna__linha { animation: descer 200ms var(--curva-estado) both !important; } /* --- chegada: o corpo chega ATRÁS da palavra ----------------------------- Interna: filete 480 · linha 540. Home (a volta): rótulo 640 · cena 560 · linha 1 700 · linha 2 790 · divisor 960 · botão 1060. A linha 3 ("você é.") não anima: é a palavra que pousa. As mesmas @keyframes do hero.css. */ html.chegada .interna__filete { animation: desenhar 520ms var(--curva-mae) 480ms both !important; } html.chegada .interna__linha { animation: subir 400ms var(--curva-mae) 540ms both !important; } html.chegada .hero__rotulo { animation: subir 400ms var(--curva-mae) 640ms both !important; } /* só na home: na interna o h1 é de linha única e é a própria palavra que pousa — lá vale o `.entrou .linha__interna { animation: none }` (rodada 2) */ html[data-pagina="home"].chegada .linha:nth-child(1) .linha__interna { animation: revelar 520ms var(--curva-mae) 700ms both !important; } html[data-pagina="home"].chegada .linha:nth-child(2) .linha__interna { animation: revelar 520ms var(--curva-mae) 790ms both !important; } html.chegada .hero__filete { animation: desenhar 560ms var(--curva-mae) 960ms both !important; } html.chegada .hero__botao { animation: subir 400ms var(--curva-mae) 1060ms both !important; } html.chegada .hero__cena { --rev: -64%; -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) var(--rev), #000 calc(var(--rev) + 62%)); mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) var(--rev), #000 calc(var(--rev) + 62%)); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; animation: revelar-cena 720ms var(--curva-cenica) 560ms both !important; } /* a palavra de destino: nomeada pro View Transition e vestida com a cor da carta da página (34% de havana dentro, a mesma regra da prova). O rito.js anima a cor até o havana e tira a classe quando a palavra assenta. */ html.chegada .palavra { view-transition-name: palavra; color: var(--cor-palavra, var(--tinta)); } /* plano B: a palavra real espera escondida enquanto o clone voa */ html.chegada-b .palavra { visibility: hidden; } /* cor da carta de cada página — Espectro pleno: Método carta 2 · Imersões 5 · Consultoria 8 · Sobre 10 · home = a carta de mel (7). Valores = misturar (cor, #452518, 0.34), os mesmos que o rito.js calcula. */ html[data-pagina="metodo"] { --cor-palavra: #334186; } html[data-pagina="imersoes"] { --cor-palavra: #9f1842; } html[data-pagina="consultoria"] { --cor-palavra: #918d16; } html[data-pagina="sobre"] { --cor-palavra: #23814f; } html[data-pagina="home"] { --cor-palavra: #b17817; } /* o clone do plano B (herdado da variante 03) */ .viajante { position: fixed; left: 0; top: 0; z-index: 130; pointer-events: none; transform-origin: 0 0; will-change: transform; white-space: pre; margin: 0; padding: 0; } /* --- View Transition entre documentos ------------------------------------ Só com movimento permitido: em reduced-motion a navegação é a normal. */ @media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } } /* o grupo da palavra: o rito.js sobrescreve transform/width/height por WAAPI (cresce até o centro, segura, assenta — 760 ms). A origem no canto é o que deixa as contas em coordenadas de viewport. Se o JS não chegar a tempo, a morph nativa roda nesses mesmos 760 ms. */ ::view-transition-group(palavra) { transform-origin: 0 0; animation-duration: 760ms; animation-timing-function: var(--curva-mae); } /* a foto da palavra tocada some em 150 ms; a palavra viva (a de destino, capturada ao vivo e já na cor da carta) surge no mesmo tempo */ ::view-transition-old(palavra) { animation: vt-sumir 150ms var(--curva-estado) both; } ::view-transition-new(palavra) { animation: vt-surgir 150ms var(--curva-estado) both; } /* o resto da página troca em 300 ms: header igual nos dois lados, só a dobra (já a caminho de sumir) dá lugar à interna */ ::view-transition-old(root) { animation: vt-sumir 300ms var(--curva-estado) both; } ::view-transition-new(root) { animation: vt-surgir 300ms var(--curva-estado) both; } /* ========================================================================= * CASCA DAS INTERNAS (/metodo/ /imersoes/ /consultoria/ /sobre/) * Só o que a passagem precisa pra pousar: h1 na mesma régua da headline, o * filete divisor e a linha de placeholder. Conteúdo vem do roadmap. * ========================================================================= */ .interna { position: relative; display: flex; align-items: center; min-height: 100dvh; padding-top: var(--h-header); overflow: hidden; } @supports not (height: 100dvh) { .interna { min-height: 100vh; } } .interna__texto { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding-left: var(--margem-conteudo); padding-right: var(--margem-conteudo); } .interna__titulo { margin: 0; color: var(--tinta); font-family: var(--fonte-titulo); font-size: var(--tam-headline); font-weight: 400; line-height: var(--entre-headline); letter-spacing: var(--tracking-headline); } .interna__filete { display: block; width: var(--largura-divisor); max-width: 100%; height: var(--filete-divisor); margin: calc(var(--r6) - 10px) 0 0; background-color: var(--apoio); transform-origin: left center; /* carga direta (sem passagem): a mesma régua da dobra */ animation: desenhar 560ms var(--curva-mae) 800ms both; } .interna__linha { max-width: 46ch; margin: var(--r5) 0 0; color: var(--tinta-fraca); font-family: var(--fonte-apoio); font-size: var(--tam-corpo); line-height: var(--entre-corpo); letter-spacing: 0.01em; animation: subir 400ms var(--curva-mae) 900ms both; } .marcador { text-decoration: underline dotted var(--apoio); text-underline-offset: 4px; } @media (max-width: 899px) { .interna { align-items: flex-start; padding-top: calc(var(--h-header) + var(--r9)); } html:not(.js) .interna { padding-top: calc(var(--h-header) + 56px + var(--r9)); } .interna__linha { margin-top: var(--r4); } } /* --- prefers-reduced-motion: nada do rito existe -------------------------- A dobra nasce montada, o filete inteiro, a navegação é a normal (o @view-transition acima só vale em no-preference). */ @media (prefers-reduced-motion: reduce) { html.rito .plano { display: none !important; } html.rito .cabecalho__filete { opacity: 1 !important; } .carta, .viajante { display: none !important; } html.chegada-b .palavra { visibility: visible !important; } html.chegada .palavra { color: var(--tinta) !important; } html.sai .linha__interna, html.sai .hero__rotulo, html.sai .hero__botao, html.sai .hero__filete, html.sai .hero__cena, html.sai .interna__filete, html.sai .interna__linha, html.chegada .interna__filete, html.chegada .interna__linha, html.chegada .hero__rotulo, html.chegada .linha__interna, html.chegada .hero__filete, html.chegada .hero__botao, html.chegada .hero__cena, .interna__filete, .interna__linha { animation: none !important; } html.sai .hero__cena, html.chegada .hero__cena { --rev: -64%; } }