/* ==========================================================================
   EvoluAI — tela de título (primeira visita)
   ========================================================================== */

.ep-view:has(.ttl) { padding-bottom: 0; }
.ttl {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: calc(100vh - 60px); min-height: calc(100svh - 60px);
  display: grid; grid-template-columns: minmax(0, 1fr); place-items: center;
  padding: 40px 16px 56px;
  background: #0c0b10;
}
.ttl-bg { position: absolute; inset: 0; z-index: -2; }
.ttl-bg canvas { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; filter: saturate(0.85); animation: ttl-pan 40s ease-in-out infinite alternate; }
@keyframes ttl-pan { from { transform: scale(1.08) translateX(-2%); } to { transform: scale(1.08) translateX(2%); } }
.ttl-shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 55% 60% at 50% 52%, rgba(12, 11, 16, 0.86) 30%, rgba(12, 11, 16, 0.55) 75%, rgba(12, 11, 16, 0.8)),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 3px);
}
.ttl-iris { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; }

.ttl-center { display: flex; flex-direction: column; align-items: center; text-align: center; width: min(640px, 100%); }
.ttl-logo { margin: 0; line-height: 0; }
.ttl-logo canvas { width: min(640px, 88vw, 76vh); height: auto; image-rendering: pixelated; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.5)); animation: ttl-drop 0.7s steps(6) both; }
@keyframes ttl-drop { from { transform: translateY(-40px); opacity: 0; } 60% { transform: translateY(6px); opacity: 1; } }
.ttl-tag { margin-top: 18px; font: 400 15px/1.5 var(--pixel); color: var(--text-2); text-shadow: 2px 2px 0 #000; }
.ttl-tag span { color: var(--accent); }

/* passo 1: pressione enter */
.ttl-press-wrap { display: flex; flex-direction: column; align-items: center; margin-top: 34px; }
.ttl-hero { width: 56px; height: auto; image-rendering: pixelated; animation: ttl-bob 1s steps(2) infinite; }
@keyframes ttl-bob { 50% { transform: translateY(-4px); } }
.ttl-press {
  margin-top: 16px; padding: 12px 20px;
  background: rgba(12, 11, 16, 0.8); border: 2px solid #000; box-shadow: inset 0 0 0 2px #2a2740;
  font: 700 22px/1 var(--pixel); color: var(--coin); text-transform: uppercase; letter-spacing: 0.04em;
  text-shadow: 3px 3px 0 #000;
  animation: ttl-blink 1.1s steps(2) infinite;
}
.ttl-press kbd { font-size: 14px; vertical-align: 3px; text-shadow: none; }
.ttl-press:focus-visible { outline: 2px dashed var(--coin); outline-offset: 4px; }
@keyframes ttl-blink { 50% { opacity: 0.25; } }
/* antes do lançamento: "Em breve" no lugar de "Pressione Enter", sem piscar */
.ttl-soon { display: flex; flex-direction: column; align-items: center; gap: 8px; animation: none; text-align: center; }
.ttl-soon small { font: 400 12px/1.3 var(--pixel-ui); color: var(--text-2); text-shadow: none; letter-spacing: 0.04em; }
.ttl-soon .ttl-count { font: 700 16px/1 var(--pixel); color: var(--text); text-shadow: 2px 2px 0 #000; letter-spacing: 0.06em; }
.ttl-meta { margin-top: 14px; font: 400 10.5px/1.4 var(--pixel-ui); color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }

/* passo 2: nome */
.ttl-name { display: none; width: 100%; margin-top: 30px; }
.ttl[data-step='name'] .ttl-press-wrap { display: none; }
.ttl[data-step='name'] .ttl-name { display: block; animation: ttl-box 0.22s steps(4) both; }
@keyframes ttl-box { from { transform: scaleY(0.2); opacity: 0; } }
.ttl-box {
  display: flex; align-items: flex-start; gap: 16px; text-align: left;
  padding: 18px;
  background: #141320; border: 2px solid #f1e9d6;
  box-shadow: 0 0 0 2px #000, 6px 6px 0 2px #000;
}
.ttl-portrait { flex: none; width: 56px; height: auto; padding: 6px; background: #1d1b2c; border: 2px solid #3b3757; image-rendering: pixelated; }
.ttl-box-main { flex: 1; min-width: 0; }
.ttl-q { display: block; font: 600 17px/1.3 var(--pixel); color: #f1e9d6; }
.ttl-input { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 0 12px; background: #0c0b10; border: 2px solid #3b3757; }
.ttl-input:focus-within { border-color: var(--accent); }
.ttl-prompt { color: var(--accent); font: 400 12px/1 var(--pixel-ui); animation: ttl-blink 0.9s steps(2) infinite; }
.ttl-input input {
  flex: 1; min-width: 0; height: 46px; border: 0; outline: 0; background: transparent;
  font: 600 22px/1 var(--pixel); color: var(--accent); caret-color: var(--accent);
  text-transform: none;
}
.ttl-input input::placeholder { color: #3b3757; }
.ttl-hint { margin-top: 10px; font: 400 10.5px/1.4 var(--pixel-ui); color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.ttl-hint.bad { color: var(--bad); }
.ttl.shake .ttl-box { animation: ttl-shake 0.3s steps(6); }
@keyframes ttl-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.ttl-actions { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.ttl-actions .btn-ghost { color: var(--text-2); }
.ttl-actions .btn-ghost:hover { color: var(--text); }
.ttl-keys { margin-top: 14px; font: 400 10px/1 var(--pixel-ui); color: var(--muted); text-transform: uppercase; }

@media (max-width: 560px) {
  .ttl { padding-top: 28px; }
  .ttl-tag { font-size: 13px; }
  .ttl-press { font-size: 18px; }
  .ttl-box { padding: 14px; gap: 12px; }
  .ttl-portrait { width: 44px; }
  .ttl-q { font-size: 15px; }
  .ttl-actions .btn { width: 100%; justify-content: center; }
  .ttl-keys { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ttl-bg canvas, .ttl-hero, .ttl-press, .ttl-prompt { animation: none; }
}