/* ============================================ GATTI · Teste da Fogueira — estilos custom Identidade: laranja #F26B1A em fundo preto #0E0E0E. Tipografia: Inter (corpo) + Playfair Display (titulos). ============================================ */ /* Transicao entre telas */ .screen { animation: fadeIn 0.4s ease-out; } .screen.hidden { display: none; } @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ============================================ Botoes de opcao (perguntas single/multi) ============================================ */ .option-btn { width: 100%; text-align: left; padding: 1rem 1.25rem; background-color: rgb(23 23 23); border: 1px solid rgb(38 38 38); border-radius: 0.75rem; color: rgb(245 245 245); transition: all 0.2s; cursor: pointer; font-size: 1rem; line-height: 1.4; } .option-btn:hover { background-color: rgb(38 38 38); border-color: #F26B1A; } .option-btn.selected { border-color: #F26B1A; background-color: rgba(242, 107, 26, 0.12); color: #FAF3E7; } /* Botao "escala" (0-10) — usado na pergunta de comprometimento */ .scale-btn { flex: 1; min-width: 0; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; background-color: rgb(23 23 23); border: 1px solid rgb(38 38 38); border-radius: 0.5rem; color: rgb(245 245 245); font-weight: 600; font-size: 1rem; transition: all 0.2s; cursor: pointer; } .scale-btn:hover { background-color: rgb(38 38 38); border-color: #F26B1A; } .scale-btn.selected { border-color: #F26B1A; background-color: #F26B1A; color: #0E0E0E; } /* ============================================ Narrativas do Arthur — fade-in linha por linha simula respiracao de quem fala ============================================ */ .narrative-line { opacity: 0; animation: fadeInLine 0.6s ease-out forwards; } .narrative-line:nth-child(1) { animation-delay: 0.3s; } .narrative-line:nth-child(2) { animation-delay: 1.5s; } .narrative-line:nth-child(3) { animation-delay: 2.7s; } .narrative-line:nth-child(4) { animation-delay: 3.9s; } .narrative-line:nth-child(5) { animation-delay: 5.1s; } .narrative-line:nth-child(6) { animation-delay: 6.3s; } @keyframes fadeInLine { to { opacity: 1; } } /* ============================================ Tela de loading — pontos pulando + fogueira simbolica ============================================ */ .loading-dots span { animation: bounce 1.4s infinite ease-in-out both; } .loading-dots span:nth-child(1) { animation-delay: -0.32s; } .loading-dots span:nth-child(2) { animation-delay: -0.16s; } @keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } } /* Fogueira em CSS puro — chama crescente */ .fogueira { width: 80px; height: 100px; position: relative; margin: 0 auto; } .fogueira::before, .fogueira::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 80px; background: radial-gradient(ellipse at center bottom, #FFD24A 0%, #F26B1A 40%, #C5530F 70%, transparent 100%); border-radius: 50% 50% 30% 30% / 60% 60% 40% 40%; animation: flame 2s ease-in-out infinite alternate; filter: blur(1px); } .fogueira::after { width: 35px; height: 50px; animation-delay: -0.6s; filter: blur(0.5px); background: radial-gradient(ellipse at center bottom, #FFE89A 0%, #FFB048 50%, #F26B1A 90%, transparent 100%); } @keyframes flame { 0% { transform: translateX(-50%) scale(0.95) rotate(-2deg); opacity: 0.85; } 50% { transform: translateX(-50%) scale(1.05) rotate(1deg); opacity: 1; } 100% { transform: translateX(-50%) scale(0.97) rotate(-1deg); opacity: 0.9; } } /* ============================================ Avatar do Arthur — fallback "AG" + foto opcional Quando /assets/arthur.jpg existe, o JS adiciona .has-arthur-photo no e o CSS troca o gradient pela foto, escondendo as iniciais. ============================================ */ .arthur-avatar { background-size: cover; background-position: center top; } body.has-arthur-photo .arthur-avatar { background-image: url('/assets/arthur.jpg'); } body.has-arthur-photo .arthur-avatar .arthur-initials { display: none; } /* ============================================ Botao WhatsApp final — glow laranja sutil ============================================ */ .whatsapp-cta { box-shadow: 0 10px 30px -10px rgba(242, 107, 26, 0.5); transition: all 0.2s; } .whatsapp-cta:hover { transform: translateY(-2px); box-shadow: 0 15px 40px -10px rgba(242, 107, 26, 0.7); } .whatsapp-cta:active { transform: scale(0.97); } /* ============================================ Sequencia de ancoragem visual (Tela 10) Cards aparecem 1 por vez com delay incremental ============================================ */ .anchor-card { opacity: 0; transform: translateY(20px); animation: anchorCardIn 0.6s ease-out forwards; } .anchor-card[data-i="0"] { animation-delay: 0.2s; } .anchor-card[data-i="1"] { animation-delay: 4.5s; } .anchor-card[data-i="2"] { animation-delay: 8.5s; } .anchor-card[data-i="3"] { animation-delay: 12.5s; } .anchor-card[data-i="4"] { animation-delay: 16.5s; } @keyframes anchorCardIn { to { opacity: 1; transform: translateY(0); } } #anchor-total { transition: all 0.4s; } /* ============================================ Scrollbar fino (so estetica) ============================================ */ body { scrollbar-width: thin; scrollbar-color: rgb(38 38 38) transparent; } /* ============================================ Acessibilidade — respeita prefers-reduced-motion ============================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }