/* Porta de entrada do Mecal Hub. O bloco de baixo só vale quando o entrada.js consegue subir o WebGL2 e marca o com a classe `animando`. */ :root { --fundo: #0D1325; --texto: #EAF0FA; --texto-2: #7C89A8; --acento: #3BE3B0; } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; background: #05070f; overflow: hidden; } body { font-family: ui-sans-serif, -apple-system, "SF Pro Text", "Segoe UI", sans-serif; } /* --- porta estática: o que vale sem JS, sem WebGL2 ou se o logo não carrega --- */ .porta { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 38px; padding: 32px; color: var(--texto); } .marca { width: min(62vw, 520px); height: auto; } .entrar { font-size: 12px; letter-spacing: .34em; text-transform: uppercase; color: var(--texto-2); text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 14px; } .entrar:hover, .entrar:focus-visible { color: var(--texto); } /* --- animação ativa: o canvas manda e a marca estática sai de cena --- */ canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; } body:not(.animando) canvas { display: none; } .animando .marca { display: none; } .animando .entrar { position: fixed; bottom: 44px; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 1.4s ease; } .animando.pronto .entrar { opacity: 1; } .animando .entrar::after { content: ""; width: 1px; height: 34px; background: linear-gradient(to bottom, var(--acento), transparent); animation: pinga 2.2s ease-in-out infinite; } @keyframes pinga { 0%,100% { opacity: .25; transform: scaleY(.6); } 50% { opacity: 1; transform: scaleY(1); } } .animando.saiu .entrar { opacity: 0; transition: opacity .4s ease; }