/* * wes-transitions.css — Coreografia da troca de tema (View Transitions API) * * Etapa 3 do IMPLEMENTACAO-FLASHBANG-PREVENT.md: o acabamento. A Etapa 1 deixou um * cross-fade global provisório (sem direção, sem círculo). Este arquivo acrescenta: * * 1. O círculo do lampião (decisão 1.3) — nasce/morre no ponto exato do botão. * 2. A assimetria de tempo (decisão 1.2) — apagar é rápido, acender é devagar e em rampa. * 3. O bloco `prefers-reduced-motion` completo (decisão 1.4) — cross-fade curto, sem círculo. * * O sentido da troca chega via `data-wes-theme-dir` no ("to-dark" ou "to-light"), * setado por includes/theme_toggle_button.php ANTES de startViewTransition(). O ponto e o * raio do círculo chegam pelas custom properties --wes-origin-x / --wes-origin-y / * --wes-origin-radius, calculadas no clique a partir da posição real do botão na tela — * por isso o círculo nasce certo nos 3 pontos de entrada, mesmo cada um tendo o botão * numa posição diferente. Nenhuma imagem é gerada: é geometria CSS pura (clip-path), * como exige a regra 2.2 do CLAUDE.md. * * Navegador sem suporte a View Transitions nunca gera os pseudo-elementos abaixo, * então este arquivo simplesmente não faz nada nele (rede de segurança da decisão 1.1). */ @keyframes wes-lantern-grow { from { clip-path: circle(0px at var(--wes-origin-x, 50%) var(--wes-origin-y, 50%)); } to { clip-path: circle(var(--wes-origin-radius, 150%) at var(--wes-origin-x, 50%) var(--wes-origin-y, 50%)); } } @keyframes wes-lantern-shrink { from { clip-path: circle(var(--wes-origin-radius, 150%) at var(--wes-origin-x, 50%) var(--wes-origin-y, 50%)); } to { clip-path: circle(0px at var(--wes-origin-x, 50%) var(--wes-origin-y, 50%)); } } /* Sem direção conhecida (JS não chegou a rodar): cross-fade simples, sem círculo. */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 400ms; animation-timing-function: ease-in-out; mix-blend-mode: normal; } /* Acender as lanternas (escuro → claro): a luz nova cresce a partir do botão. Rampa não-linear que desacelera perto do fim (decisão 1.2) — é isso que evita o flashbang: o círculo cobre a maior parte da tela rápido, mas os últimos passos até a claridade total chegam devagar, em vez de estourar de uma vez. ~650ms. */ html[data-wes-theme-dir="to-light"]::view-transition-old(root) { animation: none; z-index: 1; } html[data-wes-theme-dir="to-light"]::view-transition-new(root) { animation: wes-lantern-grow 650ms cubic-bezier(0.16, 1, 0.3, 1) both; z-index: 2; } /* Apagar as lanternas (claro → escuro): a luz antiga encolhe de volta pra dentro do lampião (decisão 1.3 — mais bonito que a escuridão "crescer"), revelando o escuro por baixo. Rampa que acelera pro fim — escurecer não tem o problema fisiológico do flashbang, então pode ser decisivo. ~350ms. */ html[data-wes-theme-dir="to-dark"]::view-transition-new(root) { animation: none; z-index: 1; } html[data-wes-theme-dir="to-dark"]::view-transition-old(root) { animation: wes-lantern-shrink 350ms cubic-bezier(0.5, 0, 0.75, 0) both; z-index: 2; } /* * Quem pede "reduzir movimento" no sistema operacional não recebe o círculo — só um * cross-fade curto (decisão 1.4). Motivo: o modo claro do Rewards nasceu do relato de * uma usuária sensível à claridade; uma animação grande que incomoda quem é sensível a * movimento trocaria um problema de acessibilidade por outro. Os `!important` são * deliberados: essa preferência do usuário tem que vencer as regras de direção acima, * não importa a ordem ou a especificidade delas. */ @media (prefers-reduced-motion: reduce) { @keyframes wes-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes wes-fade-in { from { opacity: 0; } to { opacity: 1; } } ::view-transition-old(root), ::view-transition-new(root) { clip-path: none !important; z-index: auto !important; mix-blend-mode: normal !important; } ::view-transition-old(root) { animation: wes-fade-out 180ms ease !important; } ::view-transition-new(root) { animation: wes-fade-in 180ms ease !important; } }