/* ============================================================================
   hero.css — a primeira dobra (aprovada). Extraída do build inline original.
   A headline binária que se transforma na consequência: LANCE (verde-fósforo)
   → glitch → GAME OVER (pixel vermelho, steps 8-bit). Mobile-first, clamp().
   ============================================================================ */

.hero {
  position: relative; z-index: 2;
  min-height: 100svh;
  max-width: 1100px; margin: 0 auto; padding: var(--space-5);
  display: flex; flex-direction: column;
}

/* Topo: marca à esquerda, relógio-detonador insinuado à direita. */
.hero-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap; padding-bottom: var(--space-5);
}
.brand {
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-400);
}
.brand .mark { color: var(--go); }
.brand .dim { color: var(--ink-dim); }
/* Logo pixel-art: image-rendering pixelated mantem a arte nitida ao escalar. */
.brand-logo {
  display: block; width: 32px; height: 32px; flex: 0 0 auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 5px rgba(41, 214, 143, .22));
}

/* Relógio-detonador INSINUADO — chip mono tabular-nums (T-30d). */
.timer-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono); font-size: var(--fs-300);
  font-variant-numeric: tabular-nums; letter-spacing: 0.04em;
  color: var(--ink-dim); background: var(--surface);
  border: var(--border-1); border-radius: var(--radius-int);
}
.timer-chip .dot {
  width: 7px; height: 7px; border-radius: var(--radius-pill);
  background: var(--danger); box-shadow: var(--glow-danger);
  animation: pulse 1.6s steps(2, start) infinite;
}
.timer-chip b { color: var(--ink); font-weight: 700; }
@keyframes pulse { 50% { opacity: 0.25; } }

.hero-core {
  flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: var(--space-5); padding: var(--space-6) 0; text-align: center;
}
.hero-eyebrow { display: flex; align-items: center; justify-content: center; gap: var(--space-2); flex-wrap: wrap; }

/* --- A HEADLINE BINÁRIA que se transforma na consequência --- */
.headline { margin: 0; display: grid; grid-template-areas: "stack"; justify-items: center; }
.headline .line { grid-area: stack; margin: 0; }

.line-go {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.1rem, 8.5vw, 4.6rem);
  line-height: 1.04; letter-spacing: -0.015em;
  text-wrap: balance; /* quebra equilibrada em qualquer largura (headline ficou mais longa com "com IA") */
  color: var(--go); text-shadow: var(--glow-go);
  animation: swap-go 7.2s var(--ease-out) infinite;
}
.line-go .cursor {
  display: inline-block; width: 0.55ch; height: 0.92em;
  background: var(--go); margin-left: 2px; vertical-align: text-bottom;
  box-shadow: var(--glow-go);
  animation: blink 1.1s steps(2, start) infinite;
}

.line-over {
  font-family: var(--font-pixel);
  font-size: clamp(1rem, 4.4vw, 2.3rem);
  line-height: 1.55; letter-spacing: 0;
  text-wrap: balance;
  color: var(--danger); text-shadow: var(--glow-danger);
  opacity: 0;
  animation: swap-over 7.2s steps(1, end) infinite;
}

@keyframes swap-go {
  0%, 40%   { opacity: 1; transform: translate(0,0); filter: none; }
  42%       { opacity: 1; transform: translate(-3px,1px); text-shadow: 2px 0 var(--ai), -2px 0 var(--danger); }
  44%       { opacity: 1; transform: translate(3px,-1px); text-shadow: -2px 0 var(--ai), 2px 0 var(--danger); }
  46%       { opacity: 0; transform: translate(0,0); }
  94%       { opacity: 0; }
  96%       { opacity: 1; transform: translate(2px,0); text-shadow: -2px 0 var(--ai), 2px 0 var(--danger); }
  100%      { opacity: 1; transform: translate(0,0); text-shadow: var(--glow-go); }
}
@keyframes swap-over {
  0%, 44%   { opacity: 0; }
  46%       { opacity: 0.33; }
  48%       { opacity: 0.66; }
  50%, 92%  { opacity: 1; }
  94%, 100% { opacity: 0; }
}

.hero-sub {
  max-width: 54ch; margin: 0 auto; color: var(--ink-dim);
  font-size: clamp(1rem, 2.4vw, 1.2rem); line-height: var(--lh-body);
}
.hero-sub strong { color: var(--ink); font-weight: 600; }

.hero-cta { display: flex; align-items: center; justify-content: center; gap: var(--space-4); flex-wrap: wrap; }
.hero-cta .fineprint { font-family: var(--font-mono); font-size: var(--fs-300); color: var(--ink-dim); }

.hero-foot {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-mono); font-size: var(--fs-300); color: var(--ink-dim);
  padding-top: var(--space-5);
}
.sig { color: var(--go); }
.sig .cursor {
  display: inline-block; width: 0.6ch; height: 1em; background: var(--go);
  vertical-align: text-bottom; margin-left: 1px;
  animation: blink 1.1s steps(2, start) infinite;
}

@media (min-width: 680px) {
  .hero { padding: var(--space-7) var(--space-6); }
  .hero-core { gap: var(--space-6); }
}

/* NO-MOTION-FIRST — as DUAS frases visíveis e legíveis, empilhadas. */
@media (prefers-reduced-motion: reduce) {
  .headline { grid-template-areas: none; gap: var(--space-3); }
  .line-go, .line-over {
    grid-area: auto; opacity: 1 !important; animation: none !important; transform: none !important;
  }
  .line-go { text-shadow: var(--glow-go); }
  .line-go .cursor, .sig .cursor, .timer-chip .dot { animation: none !important; }
}