/* MI Games — camada de design "Rabbit R1 style". Carrega DEPOIS do landing.css. */

/* 1 · Lowercase ousado nos headlines display (assinatura Rabbit) */
.display { text-transform: lowercase; letter-spacing: -0.03em; }
/* Exceções: siglas e nomes próprios que não podem virar minúscula */
.display .keep-case,
.eyebrow { text-transform: none; }
.eyebrow { letter-spacing: 0.22em; } /* eyebrow continua uppercase no markup */

/* 2 · Scroll-reveal — entra com fade + slide ao aparecer no viewport */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }
/* stagger opcional via --d (delay em ms) */
[data-reveal][style*="--d"] { transition-delay: var(--d); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* 3 · Número gigante do "como funciona" (momento cinematográfico) */
.step-num {
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.8;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* 4 · Seção full-bleed alternada (Rabbit: imagem sangra, texto respira) */
.fb-img { position: relative; overflow: hidden; }
.fb-img img, .fb-img video { width: 100%; height: 100%; object-fit: cover; }
.fb-img::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(9,9,11,0.5), transparent 40%); pointer-events:none; }

/* 5 · Glow de acento pink pontual (usado com parcimônia) */
.accent-glow { position: relative; }
.accent-glow::before {
  content:""; position:absolute; width:36rem; height:36rem; border-radius:9999px;
  background: radial-gradient(circle, rgba(236,72,153,0.18), transparent 70%);
  filter: blur(40px); pointer-events:none; z-index:0;
}

/* 6 · Link com seta animada (hover desliza) */
.arrow-link span[aria-hidden] { display:inline-block; transition: transform 0.3s ease; }
.arrow-link:hover span[aria-hidden] { transform: translateX(4px); }

/* 7 · Hairline divisória premium */
.hairline { height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent); }

/* 8 · Destaque do título da Descrição — par da paleta Arcade Premium: azul elétrico + magenta. */
.desc-h { font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1.04; text-transform: uppercase; letter-spacing: -0.01em; }
.result-h { font-size: 1.875rem; }  /* "resultado mensurável" +25% sobre o text-2xl original */
.mi-pink  { color: var(--accent-a); }  /* "o que é o" -> acento A (segue a paleta) */
.mi-green { color: var(--accent-b); }  /* nome do produto -> acento B (segue a paleta) */
.eyebrow.is-aqua { color: var(--accent-a); }
.mi-em { color: var(--accent-b); }  /* fallback da segunda linha dos títulos (segue a paleta) */
.eyebrow.is-big { font-size: clamp(0.85rem, 1.5vw, 1.1rem); }  /* rótulo de seção maior (ex.: "Marcas que jogaram...") */