/* ═══════════════════════════════════════════════════════════════════════════ COMPILA · CENAS — a continuação da abertura pelo site inteiro --------------------------------------------------------------------------- A abertura termina com a câmera ATRAVESSANDO a tela do notebook: "e então você entra". Até aqui o site contradizia essa promessa — dois pixels depois começava uma página empilhada comum. Este arquivo faz o resto do site acontecer DENTRO da máquina. Três mecanismos, e nenhum deles custa JavaScript por quadro: 1) UM AMBIENTE SÓ. O chão em grade e a poça de luz da abertura não morrem nela: viram a camada de fundo do site, mudando de temperatura por ato. 2) HANDOFF EM VEZ DE CORTE. Cada seção entrega um objeto para a seguinte em vez de simplesmente sumir. A constelação da abertura vira o mapa; a partícula do mapa cai nos cartões; um cartão vira a etapa 01. 3) VIZINHAS NUNCA REPETEM O ESQUELETO. Duas grades seguidas com a mesma entrada fazem o visitante sentir o mesmo molde carimbado duas vezes. Por isso os cartões do catálogo chegam da profundidade e os dos desafios chegam pelos lados. Tudo aqui é transform e opacity. E a variável raspada é escrita o mais PERTO possível de quem a usa, nunca num container para os filhos herdarem: invalidar uma propriedade herdada obriga o navegador a recalcular a subárvore inteira, e nesta página isso custava sete vezes mais caro do que escrever uma por uma nas folhas (8,86 ms contra 1,26 ms por quadro). ═════════════════════════════════════════════════════════════════════════ */ /* ═════════════════════════════════════════════════════════════════════════ O AMBIENTE — uma camada só, atrás de tudo --------------------------------------------------------------------------- As três camadas fixas de tela cheia do compila-world.css pediam `will-change: transform` e nunca animavam nada: camada de composição permanente em troca de zero movimento. Aqui elas devolvem a promoção. ═════════════════════════════════════════════════════════════════════════ */ body::before, body::after, .pixel-grid-overlay{ will-change: auto } /* O chão da abertura, continuando por baixo do site. Fica bem apagado: a função dele é dizer "você ainda está no mesmo lugar", não chamar atenção. */ body::before{ background-image: linear-gradient(rgba(79,195,247,.030) 1px, transparent 1px), linear-gradient(90deg, rgba(79,195,247,.030) 1px, transparent 1px), radial-gradient(ellipse 60% 45% at 15% 8%, rgba(124,58,237,.22), transparent 60%), radial-gradient(ellipse 55% 40% at 88% 18%, rgba(79,195,247,.14), transparent 60%), radial-gradient(ellipse 50% 45% at 50% 95%, rgba(217,70,239,.10), transparent 60%); background-size: 54px 54px, 54px 54px, auto, auto, auto; } /* Cada seção é uma câmara do mesmo espaço: a perspectiva mora AQUI, uma por seção, para que os filhos dividam um ponto de fuga só. Perspectiva por cartão dá a cada um o seu próprio universo, e o 3D compartilhado acaba. */ #jornada, #trilhas, #trilha-aprendizado, #playground, #tutor-ia, #desafios, #progresso, #projetos, #galeria, #beneficios, #numeros, #feedback, #planos{ perspective: var(--persp); perspective-origin: 50% 42%; } /* ═════════════════════════════════════════════════════════════════════════ ATO I · #jornada — o mapa ganha vida --------------------------------------------------------------------------- O caminho pontilhado continua sendo o mapa inteiro: você vê aonde dá para ir. Por cima dele, um traço aceso desenha o quanto você já avançou, e uma partícula percorre esse traço. É o princípio do café: o movimento desce porque o dedo desce. ═════════════════════════════════════════════════════════════════════════ */ /* O seletor precisa do `path` junto: o