/* Tipografia: Anonymous Pro carregada via Google Fonts no . */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { width: 100%; height: 100%; background: #000; overflow: hidden; font-family: 'Anonymous Pro', monospace; } #stage { position: fixed; inset: 0; } #video { display: block; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); } #canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: scaleX(-1); } #hint { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.28); font-size: .68rem; letter-spacing: 1.6px; text-transform: uppercase; white-space: nowrap; pointer-events: none; } #loader { position: absolute; inset: 0; background: rgba(10,10,10,.88); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.4); font-size: .85rem; letter-spacing: 2px; border-radius: 12px; } #loader.hidden { display: none; } #status { display: none; } .brand { position: absolute; top: 28px; left: 20px; display: flex; align-items: center; gap: 14px; pointer-events: none; z-index: 2; } .brand-avoa { height: 24px; width: auto; opacity: 0.95; } .brand-divider { width: 1px; height: 34px; background: rgba(255,255,255,0.35); } .brand-mao { height: 52px; width: auto; } #guide { position: absolute; bottom: 125px; right: 24px; width: 150px; height: 150px; border-radius: 0; overflow: hidden; pointer-events: none; transition: opacity 0.35s ease; } #guide.hidden { opacity: 0; } #guide img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; transition: opacity 0.3s ease; } #guide img.out { opacity: 0; } #guide-border { position: absolute; inset: 0; border-radius: 0; pointer-events: none; box-shadow: inset 0 0 0 0px transparent; transition: none; z-index: 2; } @keyframes guide-shake { 0% { transform: translateX(0); } 20% { transform: translateX(-2px); } 40% { transform: translateX(2px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } 100% { transform: translateX(0); } } #guide.shaking { animation: guide-shake 0.5s ease-in-out infinite; } #splash { position: fixed; inset: 0; background: #fff; display: flex; align-items: center; z-index: 100; transition: opacity 0.5s ease; } #splash.fade-out { opacity: 0; pointer-events: none; } .splash-inner { padding: 0 20px; max-width: 960px; text-align: left; display: flex; flex-direction: column; justify-content: center; /* centro vertical do conteúdo do splash */ transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.45s ease; } .splash-inner.slide-up { opacity: 0; pointer-events: none; } .splash-title { font-weight: 400; font-size: 32px; line-height: 1.16; color: #1D28FD; letter-spacing: 0.2px; margin-bottom: 24px; /* alinhado com .splash-desc */ max-width: 900px; } .scramble-hidden { opacity: 0; } .scramble-hidden.scramble-reveal { opacity: 1; } .scramble-line { opacity: 0; transition: opacity 1.6s ease; } .scramble-line.scramble-line-visible { opacity: 1; } /* Splash + Victory: entrada rápida e suave */ #splash .scramble-line, #victory .scramble-line { transition-duration: 0.45s; } /* Splash: alterna versões de texto desktop / mobile */ .desc-mobile { display: none; } @media (max-width: 640px) { .desc-desktop { display: none; } .desc-mobile { display: block; } /* Mobile: fade ainda mais rápido pra remover sensação de pausa */ #splash .scramble-line { transition-duration: 0.22s; } } .splash-desc { color: #1D28FD; font-size: 32px; line-height: 1.16; margin: 0 0 24px; letter-spacing: 0.2px; max-width: 900px; font-weight: 400; } .splash-camera { color: #1D28FD; font-size: 14px; line-height: 1.55; letter-spacing: 0.2px; margin: 24px 0 40px; white-space: nowrap; } #splash-btn { position: absolute; bottom: 35px; left: 20px; background: transparent; border: 1.5px solid #1D28FD; color: #1D28FD; font-family: 'Anonymous Pro', monospace; font-weight: bold; font-size: 0.82rem; letter-spacing: 3px; text-transform: uppercase; padding: 14px 42px; border-radius: 0; cursor: pointer; opacity: 0; pointer-events: none; transition: background 0.2s ease, color 0.2s ease, transform 0.55s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.7s ease; } #splash-btn:hover { background: #1D28FD; color: #fff; } #splash-btn.visible { opacity: 1; pointer-events: auto; } #splash-btn.slide-up { opacity: 0; pointer-events: none; } .splash-waiting { position: absolute; bottom: 35px; left: 20px; right: 20px; margin: 0; padding: 0; color: #1D28FD; font-size: 17px; font-weight: 700; line-height: 1.25; letter-spacing: 0.2px; max-width: 900px; opacity: 0; pointer-events: none; transition: opacity 0.55s ease; } .splash-waiting.visible { opacity: 1; } .splash-waiting .wait-dots { display: inline-block; margin-left: 2px; } .splash-waiting .wait-dots span { display: inline-block; animation: wait-dots 1.2s infinite ease-in-out; } .splash-waiting .wait-dots span:nth-child(2) { animation-delay: 0.2s; } .splash-waiting .wait-dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes wait-dots { 0%, 80%, 100% { opacity: 0.15; } 40% { opacity: 1; } } /* ── Tela final de vitória ── */ #victory { position: fixed; inset: 0; background: rgba(0,0,0,0); z-index: 200; overflow: hidden; pointer-events: none; } #victory.active { pointer-events: auto; } .victory-letter { position: absolute; border-radius: 50%; background: #1D28FD; color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'Anonymous Pro', monospace; font-weight: bold; will-change: transform, opacity; } .victory-letter.outline { background: transparent; color: rgba(29, 40, 253, 0.30); border: 1px solid rgba(29, 40, 253, 0.30); } #victory.active .victory-letter { animation: letter-drop 0.45s cubic-bezier(0.55, 0, 0.78, 0.3) forwards; } @keyframes letter-drop { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(120vh); opacity: 1; } } .victory-message { position: absolute; inset: 0; padding: 0 20px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; color: #1D28FD; z-index: 1; } .victory-text { display: flex; flex-direction: column; justify-content: flex-end; max-width: 900px; width: 100%; } .victory-title { font-weight: 400; font-size: 32px; line-height: 1.16; margin: 0 0 24px; letter-spacing: 0.2px; color: #1D28FD; max-width: 900px; } .victory-sub { color: #1D28FD; font-size: 32px; line-height: 1.16; margin: 0; letter-spacing: 0.2px; font-weight: 400; max-width: 900px; } /* Espaço entre os parágrafos do subtítulo da vitória */ .victory-sub:not(:last-of-type) { margin-bottom: 28px; } /* ── Formulário de inscrição: rodapé direito, alinhado com botões ── */ .subscribe-form { position: absolute; bottom: 35px; right: 20px; z-index: 2; /* row e status ocupam a MESMA célula → status entra exatamente na posição onde estava o input+botão. */ display: grid; grid-template-areas: "stack"; justify-items: end; /* alinha conteúdo à direita */ align-items: center; } .subscribe-form .subscribe-row, .subscribe-form .subscribe-status { grid-area: stack; } body:not(.victory-active) .subscribe-form { display: none; } /* Estado inicial dos elementos animados (entra de baixo, easing suave) */ .victory-actions #btn-restart, .victory-actions .share-wrapper, .subscribe-form .subscribe-row { opacity: 0; transform: translateY(22px); will-change: transform, opacity; transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1); } /* Stagger: 1) Recomeçar 2) Enviar 3) Form (input+botão) */ .victory-actions.visible #btn-restart { opacity: 1; transform: none; transition-delay: 0s; } .victory-actions.visible .share-wrapper { opacity: 1; transform: none; transition-delay: 0.18s; } .subscribe-form.visible .subscribe-row { opacity: 1; transform: none; transition-delay: 0.36s; } /* Mensagem de sucesso começa fora (abaixo) e sobe quando .success ativa */ .subscribe-form .subscribe-status { opacity: 0; transform: translateY(22px); will-change: transform, opacity; transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1); } .subscribe-form.success .subscribe-status { opacity: 1; transform: none; transition-delay: 0.32s; /* sobe quando a row já saiu */ } /* Quando .success: row desce e some */ .subscribe-form.success .subscribe-row { opacity: 0; transform: translateY(18px); transition-delay: 0s; pointer-events: none; } .subscribe-label { color: #1D28FD; font-family: 'Anonymous Pro', monospace; font-size: 14px; letter-spacing: 0.2px; margin: 0; align-self: center; /* centro vertical com input/botão */ white-space: nowrap; } .subscribe-row { display: flex; gap: 12px; align-items: stretch; } #subscribe-email { width: 320px; min-width: 0; background: #fff; border: 1.5px solid #1D28FD; color: #1D28FD; font-family: 'Anonymous Pro', monospace; font-size: 13px; letter-spacing: 0.5px; padding: 14px 18px; border-radius: 0; outline: none; transition: background 0.15s ease; } #subscribe-email::placeholder { color: rgba(29,40,253,0.45); } #subscribe-email:focus { background: #fff; } #subscribe-form button { background: #1D28FD; color: #fff; border: 1.5px solid #1D28FD; font-family: 'Anonymous Pro', monospace; font-weight: bold; font-size: 0.82rem; letter-spacing: 2px; text-transform: uppercase; padding: 14px 16px; /* mais estreito (era 14px 28px) */ min-width: 56px; cursor: pointer; white-space: nowrap; transition: opacity 0.2s ease; } #subscribe-form button:hover { background: #fff; color: #1D28FD; } #subscribe-form button[disabled] { opacity: 0.5; cursor: default; } .subscribe-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; } .subscribe-status { color: #1D28FD; font-family: 'Anonymous Pro', monospace; font-size: 13px; margin: 10px 0 0; min-height: 18px; opacity: 0.85; } .subscribe-status.error { color: #D11; } /* Estilo da mensagem no estado de sucesso (transição cuidada acima) */ .subscribe-form.success .subscribe-status { font-size: 14px; margin: 0; max-width: 380px; text-align: right; } .victory-actions { position: absolute; bottom: 35px; left: 20px; display: flex; gap: 14px; opacity: 0; transition: opacity 0.7s ease; z-index: 2; } .victory-actions.visible { opacity: 1; } .victory-actions button { white-space: nowrap; } .victory-actions button { background: #fff; border: 1.5px solid #1D28FD; color: #1D28FD; font-family: 'Anonymous Pro', monospace; font-weight: bold; font-size: 0.82rem; letter-spacing: 3px; text-transform: uppercase; padding: 14px 28px; border-radius: 0; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .victory-actions button:hover { background: #1D28FD; color: #fff; } .victory-actions button.primary { background: #1D28FD; color: #fff; } .victory-actions button.primary:hover { background: #fff; color: #1D28FD; } .share-wrapper { position: relative; display: flex; align-items: center; } #btn-share { transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s ease, color 0.2s ease; } #btn-share.hidden { opacity: 0; transform: translateX(40px); pointer-events: none; } .share-menu { position: absolute; top: 50%; left: 18px; transform: translateY(-50%); display: flex; align-items: center; gap: 16px; pointer-events: none; } .share-menu .share-icon { width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1.5px solid #1D28FD; background: transparent; color: #1D28FD; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transform: scale(0.6); transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease, color 0.2s ease; } .share-menu.open { pointer-events: auto; } .share-menu.open .share-icon { opacity: 1; transform: scale(1); } .share-menu.open .share-icon:nth-child(1) { transition-delay: 0.20s, 0.20s, 0s, 0s; } .share-menu.open .share-icon:nth-child(2) { transition-delay: 0.30s, 0.30s, 0s, 0s; } .share-menu.open .share-icon:nth-child(3) { transition-delay: 0.40s, 0.40s, 0s, 0s; } .share-menu .share-icon:hover { background: #1D28FD; color: #fff; } .share-menu .share-icon svg { display: block; } .share-copied { position: absolute; left: 0; top: calc(100% + 8px); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #1D28FD; opacity: 0; transition: opacity 0.2s ease; pointer-events: none; } .share-copied.visible { opacity: 1; } body.victory-active { background: var(--victory-bg, #fff); } body.victory-active #stage { background: var(--victory-bg, #fff); } body.victory-active #canvas, body.victory-active #guide, body.victory-active #hint, body.victory-active #alphabet-mobile, body.victory-active #letter-live { display: none; } #ascii-canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: none; background: var(--victory-bg, #fff); pointer-events: none; transform: scaleX(-1); z-index: 150; /* acima do splash (100) e abaixo da logo (300+) */ clip-path: inset(0 0 100% 0); -webkit-clip-path: inset(0 0 100% 0); } body.victory-active #ascii-canvas { display: block; animation: ascii-reveal 0.9s cubic-bezier(0.7, 0, 0.3, 1) forwards; } @keyframes ascii-reveal { 0% { clip-path: inset(0 0 100% 0); -webkit-clip-path: inset(0 0 100% 0); } 100% { clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); } } .brand-top { z-index: 300; } .brand-top-dark { z-index: 301; pointer-events: none; clip-path: inset(0 0 100% 0); -webkit-clip-path: inset(0 0 100% 0); } /* brand-top-dark usa as versões azuis (#1D28FD) das imagens — logos em azul sobre o fundo branco da tela de vitória. */ .brand-top-dark .brand-divider { background: rgba(29, 40, 253, 0.55); } /* Mostra a logo azul também durante o splash (fundo branco). */ body.splash-visible .brand-top-dark { clip-path: inset(0) !important; -webkit-clip-path: inset(0) !important; animation: none !important; } body.splash-visible .brand-top { opacity: 0; } /* Logo azul dentro do splash — fica acima de tudo na tela inicial */ .brand-top-splash { z-index: 105; /* acima de #splash (100), abaixo do painel Sobre (1000) */ } .brand-top-splash .brand-divider { background: rgba(29, 40, 253, 0.55); } body.victory-active .brand-top-dark { animation: logo-unmask-in 0.9s linear forwards; } @keyframes logo-unmask-in { 0%, 22% { clip-path: inset(0 0 100% 0); -webkit-clip-path: inset(0 0 100% 0); } 32%, 100% { clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); } } /* ── Saída da vitória ────────────────────────────────────────── O conteúdo da tela final permanece parado; um clip-path sobe (corta de baixo para cima) por cima do ascii branco, do logo preto e do painel da vitória, revelando o splash (home) que já está renderizado por trás. O logo branco fixo é desmascarado naturalmente no último trecho da animação. */ body.victory-active.victory-exiting #ascii-canvas { animation: victory-clip-out 0.95s cubic-bezier(0.55, 0, 1, 0.45) forwards; } body.victory-active.victory-exiting .brand-top-dark { animation: logo-unmask-out 0.95s linear forwards; } @keyframes logo-unmask-out { 0%, 82% { clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); } 95%, 100% { clip-path: inset(0 0 100% 0); -webkit-clip-path: inset(0 0 100% 0); } } body.victory-exiting #victory { animation: victory-clip-out 0.95s cubic-bezier(0.55, 0, 1, 0.45) forwards; } @keyframes victory-clip-out { 0% { clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 100% 0); -webkit-clip-path: inset(0 0 100% 0); } } /* Alfabeto DOM e letra ao vivo: só ativos em mobile; em desktop o canvas renderiza tudo isso. */ #alphabet-mobile { display: none; } #letter-live { display: none; } /* ── Botões de modo (Alfabeto / Palavras) ────────────────────────── */ #mode-switcher { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; z-index: 10; pointer-events: auto; } .mode-btn { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.12); border: 1.5px solid rgba(255,255,255,0.22); color: rgba(255,255,255,0.55); font-family: 'Anonymous Pro', ui-monospace, monospace; font-size: 11px; font-weight: bold; letter-spacing: 1.5px; text-transform: uppercase; padding: 10px 14px; border-radius: 999px; cursor: pointer; backdrop-filter: blur(8px); transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s; white-space: nowrap; } .mode-btn:hover { background: rgba(255,255,255,0.2); color: #fff; } .mode-btn.active { background: rgba(255,255,255,0.92); border-color: transparent; color: #111; transform: scale(1.04); } .mode-btn .mode-num { width: 18px; height: 18px; border-radius: 50%; background: currentColor; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 900; flex-shrink: 0; transition: background 0.2s; } .mode-btn.active .mode-num { background: #111; color: #fff; } body.victory-active #mode-switcher { display: none; } /* Switcher de modo escondido — acesso via teclas 1/2/3 */ #mode-switcher { display: none !important; } /* ── Painel de Treino (direita, 400px, colado na borda) ─────────── */ #treino-panel { display: none; position: absolute; right: 0; top: 0; bottom: 0; left: auto; width: min(400px, 100vw); z-index: 30; box-sizing: border-box; flex-direction: column; flex-wrap: nowrap; background: rgba(8,8,16,0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-left: 1px solid rgba(255,255,255,0.12); overflow: hidden; padding: 0; } body.mode-treino #treino-panel { display: flex; flex-direction: column; } body.mode-treino #mode-switcher { z-index: 40; } body.mode-treino #sign-hud, body.mode-treino #word-caption { display: none !important; } #treino-inner { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; padding: 10px 12px 0; } #treino-panel h2 { color: #fff; font-family: 'Anonymous Pro', ui-monospace, monospace; font-size: 12px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; margin: 0 0 8px 0; } #treino-panel .treino-sub { color: rgba(255,255,255,0.4); font-size: 10px; line-height: 1.35; text-align: left; margin: 0 0 8px 0; } /* Área com scroll: só a lista de letras/palavras */ #treino-scroll-area { flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 0 0 4px 0; margin: 0 -2px 0 0; } #treino-scroll-area::-webkit-scrollbar { width: 4px; } #treino-scroll-area::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 4px; } .treino-tabs { display: flex; gap: 6px; margin-bottom: 8px; width: 100%; } .treino-tab { background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.6); font-family: 'Anonymous Pro', ui-monospace, monospace; font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; padding: 8px 18px; border-radius: 999px; cursor: pointer; transition: background 0.2s, color 0.2s; } .treino-tab:hover { color: #fff; background: rgba(255,255,255,0.18); } .treino-tab.active { background: rgba(255,255,255,0.92); color: #111; border-color: transparent; } .treino-cat { margin-bottom: 12px; } .treino-cat h3 { font-family: 'Anonymous Pro', ui-monospace, monospace; font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,0.4); margin: 0 0 6px 4px; } .treino-cat-words { display: flex; flex-direction: column; gap: 4px; } .tlw-btn { width: 100%; min-height: 40px; padding: 10px 12px; box-sizing: border-box; border-radius: 8px; border: 1.5px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.75); font-family: 'Anonymous Pro', ui-monospace, monospace; font-size: 11px; font-weight: 700; line-height: 1.2; cursor: pointer; position: relative; transition: background 0.15s, border-color 0.15s; text-align: left; } .tlw-btn.tl-empty { /* same as tl-btn empty for words */ background: transparent; border: 2px dashed rgba(255,255,255,0.2); color: rgba(255,255,255,0.3); } .tlw-btn.tl-warn { background: rgba(255,180,60,0.22); border-color: #E5A82A; color: #FFCD51; } .tlw-btn.tl-good { background: rgba(72,184,110,0.28); border-color: #48B86E; color: #8EEBA8; } .tlw-btn.tl-pending::after { /* blue dot, same as letters */ content: ''; position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; background: #328FFF; border-radius: 50%; box-shadow: 0 0 0 2px rgba(10,10,20,0.9); } .tlw-btn:hover:not(.active) { filter: brightness(1.12); color: #fff; } .tlw-btn.active { background: #328FFF !important; border-color: #328FFF !important; color: #fff !important; filter: none; } #treino-letters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px 6px; width: 100%; } .tl-btn { width: 100%; min-height: 0; aspect-ratio: 1; box-sizing: border-box; border-radius: 6px; display: flex; align-items: center; justify-content: center; padding: 0; border: 1.5px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.7); font-family: 'Anonymous Pro', ui-monospace, monospace; font-size: 15px; font-weight: 900; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; position: relative; } /* Sem amostra */ .tl-btn.tl-empty { background: transparent; border: 2px dashed rgba(255,255,255,0.2); color: rgba(255,255,255,0.25); } /* Tem amostras mas ainda precisa treinar mais (< 10) */ .tl-btn.tl-warn { background: rgba(255,180,60,0.22); border-color: #E5A82A; color: #FFCD51; } /* Amostras suficientes (>= 10) */ .tl-btn.tl-good { background: rgba(72,184,110,0.28); border-color: #48B86E; color: #8EEBA8; } .tl-btn:hover:not(.active) { filter: brightness(1.12); color: #fff; } .tl-btn.active { background: #328FFF !important; border-color: #328FFF !important; color: #fff !important; filter: none; } /* Reps na sessão ainda não enviadas */ .tl-btn.tl-pending::after { content: ''; position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; background: #328FFF; border-radius: 50%; box-shadow: 0 0 0 2px rgba(10,10,20,0.9); } /* Barra fixa inferior: bloco 250px centralizado */ #treino-dock { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; padding: 10px 12px 14px; border-top: 1px solid rgba(255,255,255,0.1); background: rgba(4,4,10,0.97); } .treino-dock-narrow { width: 100%; max-width: 250px; display: flex; flex-direction: column; align-items: center; } #treino-capture { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; text-align: center; } #treino-capture.hidden { display: none; } #treino-capture-letter { font-family: 'Anonymous Pro', ui-monospace, monospace; font-size: 28px; font-weight: 900; color: #fff; line-height: 1.1; width: 100%; text-align: center; } #treino-capture-letter.treino-cap-long { font-size: 15px; line-height: 1.25; } #treino-capture-status { font-size: 12px; color: rgba(255,255,255,0.6); text-align: center; width: 100%; } #treino-capture-bar-wrap { width: 100%; max-width: 100%; background: rgba(255,255,255,0.1); border-radius: 99px; height: 5px; overflow: hidden; } #treino-capture-bar { height: 5px; background: #328FFF; border-radius: 99px; width: 0%; transition: width 0.1s linear; } #treino-capture-reps { font-size: 11px; color: rgba(255,255,255,0.45); text-align: center; width: 100%; } #treino-countdown { font-family: 'Anonymous Pro', ui-monospace, monospace; font-size: 32px; font-weight: 900; color: #FFA04C; min-height: 36px; line-height: 1; text-align: center; width: 100%; } .treino-dock-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; margin-top: 4px; } #treino-btn-gravar, #treino-btn-enviar { width: 100%; border: none; border-radius: 10px; padding: 12px 16px; font-family: 'Anonymous Pro', ui-monospace, monospace; font-size: 11px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase; cursor: pointer; box-sizing: border-box; } #treino-btn-gravar { background: #328FFF; color: #fff; transition: background 0.15s, transform 0.1s; } #treino-btn-gravar:hover { background: #1a7de8; } #treino-btn-gravar:disabled { background: rgba(255,255,255,0.12); cursor: default; color: rgba(255,255,255,0.35); } #treino-btn-enviar { background: #48B86E; color: #fff; transition: background 0.15s, opacity 0.2s; } #treino-btn-enviar:hover { background: #39a05f; } #treino-btn-enviar:disabled { opacity: 0.35; cursor: default; } #treino-status { font-size: 10px; color: rgba(255,255,255,0.45); text-align: center; min-height: 16px; line-height: 1.3; margin-top: 6px; width: 100%; } /* ── Chips de emoção — alinhados na altura do logo Avoa ──────────── */ #emotion-chips { position: absolute; top: 28px; /* mesmo top do bloco da brand */ height: 52px; /* mesma altura da brand-mao para centrar verticalmente */ left: 50%; transform: translateX(-50%); display: flex; flex-direction: row; align-items: center; gap: 6px; pointer-events: none; z-index: 5; } .emo-chip { background: transparent; border: 1.5px solid #fff; color: #fff; font-family: 'Anonymous Pro', ui-monospace, monospace; font-weight: bold; font-size: clamp(10px, 1.6vw, 13px); letter-spacing: 1.5px; text-transform: uppercase; padding: 8px 20px; border-radius: 999px; white-space: nowrap; opacity: 0.30; /* inativa: borda + texto branco em baixa opacidade */ transition: opacity 0.25s ease, border-color 0.25s ease, color 0.25s ease; } .emo-chip.active { opacity: 1; background: var(--emo-bg); /* preenchimento na cor do sentimento */ border-color: var(--emo-bg); /* borda mesma cor */ color: #fff; /* texto 100% branco */ } body.victory-active #emotion-chips { display: none; } /* Em mobile a feature de emoção é desligada (FaceLandmarker desativado por performance). Esconde a UI de chips inteiramente. */ body.no-face #emotion-chips { display: none !important; } /* ── HUD discreto de confiança (canto inferior direito) ──────────── */ /* Só o percentual aparece; a palavra prevista fica oculta — só palavras confirmadas aparecem como pill via #word-caption. */ #sign-hud { position: absolute; bottom: 10px; right: 14px; display: flex; align-items: center; gap: 6px; pointer-events: none; z-index: 4; opacity: 0; transition: opacity 0.3s ease; } #sign-hud.visible { opacity: 1; } #sign-word { display: none; } #sign-conf { font-family: ui-sans-serif, sans-serif; font-size: 10px; color: rgba(255,255,255,0.40); letter-spacing: 1px; font-variant-numeric: tabular-nums; } #sign-conf::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.30); margin-right: 6px; vertical-align: middle; } body.mode-alfabeto #sign-hud { display: none !important; } body.victory-active #sign-hud { display: none; } /* ── Cortina azul de transição (vitória → home) ─────────────── */ #restart-curtain { position: fixed; inset: 0; background: #1D28FD; z-index: 1500; /* acima de tudo, inclusive painel Sobre */ transform: translateY(100%); pointer-events: none; will-change: transform; } body.restart-rising #restart-curtain { animation: curtain-rise 1.1s cubic-bezier(0.65, 0, 0.35, 1) forwards; } @keyframes curtain-rise { 0% { transform: translateY(100%); } 45% { transform: translateY(0); } 55% { transform: translateY(0); } 100% { transform: translateY(-100%); } } /* ── Mensagens de incentivo (pill branca acima do alfabeto) ──── */ #encouragement { position: absolute; bottom: 130px; left: 50%; transform: translateX(-50%); max-width: 90vw; background: #fff; color: #1D28FD; font-family: 'Anonymous Pro', monospace; font-weight: 700; font-size: 18px; letter-spacing: 0.2px; line-height: 1.2; padding: 14px 28px; border-radius: 999px; pointer-events: none; z-index: 6; white-space: nowrap; /* Pill clipada do meio pros lados (totalmente fechada por padrão) */ clip-path: inset(0 50% 0 50% round 999px); -webkit-clip-path: inset(0 50% 0 50% round 999px); transition: clip-path 0.55s cubic-bezier(0.55, 0, 0.25, 1), -webkit-clip-path 0.55s cubic-bezier(0.55, 0, 0.25, 1); } #encouragement.visible { clip-path: inset(0 0 0 0 round 999px); -webkit-clip-path: inset(0 0 0 0 round 999px); } body.victory-active #encouragement, body.mode-treino #encouragement, body.mode-palavras #encouragement { display: none !important; } /* ── Aviso "Aproxime-se mais da câmera" ───────────────────────── */ #hint-closer { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.55); color: #fff; font-family: 'Anonymous Pro', monospace; font-weight: 700; font-size: 14px; letter-spacing: 0.3px; padding: 10px 22px; border-radius: 999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events: none; opacity: 0; transition: opacity 0.35s ease; z-index: 6; white-space: nowrap; } #hint-closer.visible { opacity: 1; } body.victory-active #hint-closer, body.mode-treino #hint-closer, body.mode-palavras #hint-closer { display: none !important; } /* Hint quando mão sai da área de leitura (mobile portrait) */ #hint-area { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.55); color: #fff; font-family: 'Anonymous Pro', monospace; font-weight: 700; font-size: 14px; letter-spacing: 0.3px; padding: 10px 22px; border-radius: 999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events: none; opacity: 0; transition: opacity 0.35s ease; z-index: 6; white-space: nowrap; } #hint-area.visible { opacity: 1; } body.victory-active #hint-area, body.mode-treino #hint-area, body.mode-palavras #hint-area { display: none !important; } /* Mobile: posiciona encouragement no topo, logo abaixo das pills de emoção, com mesma altura/padding das pills. */ @media (max-width: 640px) { #encouragement { top: 145px; /* abaixo das pills do topo (top: 98 + ~30px da pill) */ bottom: auto; font-size: 11px; /* mesmo tamanho das emo-chip */ padding: 6px 13px; /* mesmo padding das emo-chip */ line-height: 1.2; } } /* ── Legenda de palavras reconhecidas: centro inferior ──────────── */ #word-caption { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 90vw; pointer-events: none; z-index: 6; } /* Link "Sobre" — alinhado com as pills do topo (mesma linha vertical) */ #about-link { position: absolute; top: 28px; height: 52px; right: 24px; display: flex; align-items: center; color: #fff; font-family: 'Anonymous Pro', ui-monospace, monospace; font-weight: bold; /* mesmo peso das pills */ font-size: clamp(10px, 1.6vw, 13px); /* mesmo tamanho das pills */ letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; pointer-events: auto; z-index: 6; transition: color 0.2s ease; } #about-link:hover { color: #fff; } /* Cada letra anima individualmente — leve onda no hover */ #about-link span { display: inline-block; transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1); will-change: transform; } #about-link:hover span { transform: translateY(-3px); } #about-link:hover span:nth-child(1) { transition-delay: 0s; } #about-link:hover span:nth-child(2) { transition-delay: 0.04s; } #about-link:hover span:nth-child(3) { transition-delay: 0.08s; } #about-link:hover span:nth-child(4) { transition-delay: 0.12s; } #about-link:hover span:nth-child(5) { transition-delay: 0.16s; } body.victory-active #about-link { display: none; } body.mode-treino #about-link { display: none; } /* ── Painel lateral "Sobre" ──────────────────────────────────────── */ #about-panel { position: fixed; top: 0; right: 0; width: 456px; /* +20% (era 380px) */ max-width: 90vw; height: 100vh; background: #fff; color: #1D28FD; transform: translateX(100%); transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); z-index: 1000; /* acima de tudo (logo da brand fica em 300) */ display: flex; flex-direction: column; } #about-panel.open { transform: translateX(0) !important; } #about-close { position: absolute; top: 28px; right: 24px; height: 52px; width: 52px; border: none; background: transparent; color: #1D28FD; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background 0.2s ease; z-index: 2; /* acima do #about-content para receber clique */ } #about-close:hover { background: rgba(0,0,0,0.06); } #about-content { flex: 1; overflow-y: auto; padding: 60px 40px 32px; font-family: 'Anonymous Pro', ui-monospace, monospace; font-weight: 400; font-size: 15px; /* -2px (era 17px) */ line-height: 1.37; /* ~20.5px (era ~22.5px), -2px no espaçamento */ color: #1D28FD; /* Desktop: texto centralizado verticalmente na aba */ display: flex; flex-direction: column; justify-content: center; } /* Mobile: tela cheia → texto começa do topo, scroll vertical, mais respiração entre linhas e parágrafos */ @media (max-width: 640px) { #about-content { justify-content: flex-start; padding: 90px 28px 48px; font-size: 16px; line-height: 1.5; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } #about-content p { margin: 0 0 22px; } .about-contact { margin-top: 40px !important; } } #about-content p { margin: 0 0 18px; font-weight: 400; } #about-content p:last-child { margin-bottom: 0; } .about-contact { margin-top: 32px !important; } .about-contact strong { font-weight: 700; } .about-contact a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; transition: opacity 0.2s ease; } .about-contact a:hover { opacity: 0.7; } /* Backdrop escurece a cena (acima do ASCII, abaixo da aba) */ #about-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0); pointer-events: none; transition: background 0.45s ease; z-index: 999; } #about-backdrop.open { background: rgba(0,0,0,0.55); pointer-events: auto; } .word-pill { background: color-mix(in srgb, var(--pill-bg) 58%, transparent); border: 1.5px solid color-mix(in srgb, var(--pill-bg) 45%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: rgba(0,0,0,0.82); font-family: 'Anonymous Pro', ui-monospace, monospace; font-weight: bold; font-size: clamp(13px, 2vw, 16px); letter-spacing: 1.5px; text-transform: uppercase; padding: 8px 20px; border-radius: 999px; white-space: nowrap; animation: pill-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } .word-pill.fading { animation: pill-out 0.4s ease forwards; } @keyframes pill-in { from { opacity: 0; transform: scale(0.7) translateY(12px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes pill-out { to { opacity: 0; transform: scale(0.8) translateY(8px); } } body.mode-alfabeto #word-caption { display: none !important; } body.victory-active #word-caption { display: none; } /* ── Ocultar elementos de alfabeto em modo palavras ──────────────── */ body.mode-palavras #guide { display: none !important; } body.mode-palavras #alphabet-mobile { display: none !important; } body.mode-palavras #letter-live { display: none !important; } /* Mobile: chips no topo, modo-switcher ajustado */ @media (max-width: 640px) { /* Pills do topo: descem ~70px e +20% de tamanho */ #emotion-chips { top: 98px; height: auto; gap: 5px; } .emo-chip { font-size: 11px; /* 9 × 1.2 ≈ 11 */ padding: 6px 13px; /* 5/11 × 1.2 ≈ 6/13 */ letter-spacing: 1.2px; } /* Painel "Sobre": tela cheia */ #about-panel { width: 100vw; max-width: 100vw; } #mode-switcher { left: 10px; gap: 8px; } .mode-btn { font-size: 10px; padding: 8px 10px; gap: 6px; } } /* ── Mobile: tela inicial ──────────────────────────────────────── */ @media (max-width: 640px) { /* Logos no topo */ .brand { top: 22px; left: 20px; gap: 12px; } .brand-avoa { height: 24px; } .brand-mao { height: 52px; } .brand-divider { height: 34px; } /* Bloco do splash centralizado verticalmente na tela, deslocado 20px pra baixo pra dar respiro do logo do topo. */ #splash { align-items: center; } #splash .splash-inner { padding: 0 20px; justify-content: center; transform: translateY(20px); } /* Mobile usa as quebras explícitas das versões .desc-mobile. Reduzimos fonte e entrelinha em ~2/3px conforme solicitado. */ #splash .splash-title, #splash .splash-desc { font-size: 23px; /* -2px (era 25px) */ line-height: 1.18; /* -3px relativo (~32.5 → ~27.1) */ } #splash .splash-title { margin-bottom: 24px; } #splash .splash-desc { margin: 0 0 20px; } #splash .splash-camera { white-space: normal; font-size: 10px; /* -2px (era 12px) */ line-height: 1.30; margin: 20px 0 80px; /* afasta do botão */ } #splash-btn { font-size: 0.85rem; letter-spacing: 3px; padding: 16px 44px; bottom: 56px; } .splash-waiting { bottom: 56px; font-size: 14px; line-height: 1.4; } /* ── Tela final (vitória) — mesmos tamanhos/alinhamentos do splash ── */ #victory .victory-text { justify-content: center; } #victory .victory-title, #victory .victory-sub { font-size: 25px; line-height: 1.3; } #victory .victory-title { margin: 0 0 24px; } #victory .victory-sub { margin: 0; } /* Espaço entre os parágrafos do subtítulo (mobile) */ #victory .victory-sub:not(:last-of-type) { margin-bottom: 28px; } /* Mobile usa as quebras explícitas das versões .desc-mobile — não removemos mais os
. */ /* Mobile: botões e form usam o MESMO grid 1fr 1fr e mesma largura. Linha de cima (Recomeçar | Compartilhar) e linha de baixo (input | Cadastrar) ficam visualmente alinhadas. */ .victory-actions { bottom: 95px; left: 20px; right: auto; width: calc(100% - 40px); max-width: 360px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .victory-actions .share-wrapper { width: 100%; } .victory-actions button { width: 100%; font-size: 0.72rem; letter-spacing: 2px; padding: 12px 8px; } .subscribe-form { bottom: 28px; right: auto; left: 20px; width: calc(100% - 40px); max-width: 360px; justify-items: stretch; } .subscribe-form .subscribe-row { display: grid; grid-template-columns: 1fr auto; /* email fica grande, OK estreito */ gap: 8px; width: 100%; } /* Label oculto no mobile pra economizar espaço */ .subscribe-form .subscribe-label { display: none; } #subscribe-email { width: 100%; padding: 12px 14px; font-size: 12px; } #subscribe-form button { width: auto; min-width: 52px; padding: 12px 14px; font-size: 0.72rem; letter-spacing: 1.5px; } .subscribe-form.success .subscribe-status { text-align: left; font-size: 13px; } /* ── Tela da câmera ──────────────────────────────────────────── */ /* Legenda (imagem guia da letra): canto inferior direito, acima da letra Z */ #guide { width: 75px; height: 75px; border-radius: 0; top: auto; bottom: 100px; right: 16px; } #guide-border { border-radius: 0; } /* Letra ao vivo do sinal detectado: canto esquerdo, logo acima do alfabeto, com ~50% do tamanho do desktop. Ancoramos pelo rodapé (bottom) para que o texto se estenda para cima a partir de uma base fixa, independente do font-size. */ #letter-live { display: flex; align-items: center; justify-content: center; position: absolute; left: 20px; bottom: 102px; width: 6.4vh; /* +30% (era 4.92vh) */ height: 6.4vh; background: #1D28FD; border-radius: 50%; color: #fff; font-family: 'Anonymous Pro', monospace; font-weight: bold; font-size: 4.36vh; /* +30% (era 3.35vh) */ line-height: 1; letter-spacing: 0; text-align: center; opacity: 0; pointer-events: none; z-index: 3; will-change: transform, opacity; } /* Alfabeto como carrossel: a letra da vez fica sempre no centro. As demais ficam à direita (próximas) ou à esquerda (já acertadas). Letras fora do viewport são cortadas pelo overflow:hidden do body. */ #alphabet-mobile { display: block; position: absolute; left: 0; right: 0; bottom: 16px; height: 44px; pointer-events: none; z-index: 3; overflow: visible; } .alpha-track { position: absolute; top: 0; bottom: 0; /* Com --step = 52px e letra de 40px, offset inicial coloca A no centro. */ left: calc(50% - 20px); display: flex; align-items: center; gap: 12px; transform: translateX(calc(var(--idx, 0) * -52px)); transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; } .alpha-letter { width: 40px; height: 40px; box-sizing: border-box; border-radius: 50%; border: 1px solid #fff; background: transparent; color: #fff; font-family: 'Anonymous Pro', monospace; font-weight: bold; font-size: 14px; display: flex; align-items: center; justify-content: center; opacity: 0.25; position: relative; flex: 0 0 auto; transition: opacity 0.35s ease, background 0.3s ease, color 0.3s ease, border-color 0.3s ease; } .alpha-letter.active { opacity: 1; } .alpha-letter.done { background: #fff; color: #000; opacity: 1; border-color: #fff; } .alpha-letter.sweeping { border-color: rgba(255,255,255,0.28); } .alpha-letter .sweep { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); pointer-events: none; opacity: 0; transition: opacity 0.15s ease; } .alpha-letter.sweeping .sweep { opacity: 1; } .alpha-letter .sweep circle { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; /* perímetro 2*pi*r, com r=19 no viewBox 40×40 → ~119.38 */ stroke-dasharray: 119.38; stroke-dashoffset: calc(119.38 * (1 - var(--progress, 0))); } .alpha-label { position: relative; z-index: 1; line-height: 1; } } /* ── Modal de início de sessão de captura (schema v2) ───────────────── */ .csm-overlay { position: fixed; inset: 0; background: rgba(8,8,16,0.78); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px; } .csm-overlay[hidden] { display: none; } .csm-card { width: 100%; max-width: 460px; max-height: calc(100vh - 40px); overflow-y: auto; background: #fff; color: #1D28FD; padding: 28px 28px 24px; border-radius: 0; font-family: 'Anonymous Pro', monospace; display: flex; flex-direction: column; gap: 16px; } .csm-card h2 { font-size: 18px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; margin: 0; } .csm-sub { font-size: 13px; color: rgba(29,40,253,0.7); line-height: 1.4; margin: 0; font-weight: 400; } .csm-field { display: flex; flex-direction: column; gap: 6px; } .csm-field > span { font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; } .csm-field > span em { font-style: normal; font-weight: 400; color: rgba(29,40,253,0.55); text-transform: none; letter-spacing: 0; } .csm-card input[type="text"], .csm-card select, .csm-card textarea { width: 100%; background: #fff; border: 1.5px solid #1D28FD; color: #1D28FD; font-family: 'Anonymous Pro', monospace; font-size: 14px; padding: 10px 12px; border-radius: 0; outline: none; } .csm-card textarea { resize: vertical; min-height: 60px; } .csm-card input:focus, .csm-card select:focus, .csm-card textarea:focus { outline: 2px solid rgba(29,40,253,0.3); outline-offset: 1px; } .csm-count { align-self: flex-end; font-size: 11px; color: rgba(29,40,253,0.5); } .csm-device-row { display: flex; align-items: center; gap: 12px; } .csm-device-row code { flex: 1; background: rgba(29,40,253,0.06); padding: 8px 12px; font-family: 'Anonymous Pro', monospace; font-size: 13px; } .csm-link { background: transparent; border: 0; color: #1D28FD; font-family: 'Anonymous Pro', monospace; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; cursor: pointer; padding: 4px 8px; text-decoration: underline; } #csm-device-override { display: flex; gap: 8px; margin-top: 6px; } #csm-device-override select { flex: 1; } .csm-actions { display: flex; gap: 10px; margin-top: 4px; } .csm-btn-primary, .csm-btn-secondary { flex: 1; padding: 12px 18px; border-radius: 0; font-family: 'Anonymous Pro', monospace; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .csm-btn-primary { background: #1D28FD; color: #fff; border: 1.5px solid #1D28FD; } .csm-btn-primary:hover { background: #fff; color: #1D28FD; } .csm-btn-primary:disabled { opacity: 0.5; cursor: default; } .csm-btn-secondary { background: transparent; color: #1D28FD; border: 1.5px solid #1D28FD; } .csm-btn-secondary:hover { background: #1D28FD; color: #fff; } /* ── Indicador de sessão ativa no painel de treino ─────────────────── */ #treino-session-info { display: flex; align-items: center; gap: 8px; background: rgba(50,143,255,0.18); border: 1px solid rgba(50,143,255,0.4); padding: 6px 10px; border-radius: 6px; font-family: 'Anonymous Pro', ui-monospace, monospace; font-size: 10px; color: #B8DCFF; margin-bottom: 8px; } #treino-session-info[hidden] { display: none; } #treino-session-info .tsi-label { opacity: 0.7; text-transform: uppercase; letter-spacing: 0.8px; } #treino-session-info strong { color: #fff; font-weight: 700; } #treino-session-info button { margin-left: auto; background: transparent; border: 1px solid rgba(255,255,255,0.3); color: rgba(255,255,255,0.8); font-family: inherit; font-size: 9px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; padding: 4px 8px; border-radius: 4px; cursor: pointer; } #treino-session-info button:hover { background: rgba(255,255,255,0.12); color: #fff; }