/* PlayVerso Next — home
 *
 * Um sistema de card só. O que muda entre jogos é o ACCENT (--pv-a1/--pv-a2),
 * nunca a proporção, o espaçamento, o raio, a tipografia ou a estrutura do CTA.
 * Consistência sem homogeneidade.
 */

/* ── HERO: o jogo em destaque abre o site ───────────────────────────────
 * Não é "um card maior". É a primeira tela: título de página, ilustração
 * grande que sangra para fora da coluna de texto, CTA dominante. */
.pv-hero {
  position: relative; overflow: hidden;
  padding: var(--pv-6) 0 var(--pv-7);
  background:
    radial-gradient(90% 120% at 78% 18%, color-mix(in srgb, var(--pv-a2) 26%, transparent), transparent 62%),
    radial-gradient(70% 110% at 12% 0%, color-mix(in srgb, var(--pv-a1) 24%, transparent), transparent 60%);
  border-bottom: 1px solid var(--pv-line);
}
.pv-hero__inner {
  width: 100%; max-width: var(--pv-maxw); margin-inline: auto; padding-inline: var(--pv-4);
  display: flex; flex-direction: column; gap: var(--pv-4);
}
.pv-hero__copy { display: flex; flex-direction: column; gap: var(--pv-3); align-items: flex-start; }
.pv-hero__title {
  font-size: var(--pv-fs-3xl); font-weight: 900; letter-spacing: -.045em; line-height: .98;
  color: var(--pv-text);
}
.pv-hero__title em {
  font-style: normal;
  background: var(--pv-grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pv-hero__what { color: var(--pv-text-dim); font-size: var(--pv-fs-lg); max-width: 26ch; line-height: 1.35; }
.pv-hero__cta { align-self: stretch; min-height: 66px; font-size: var(--pv-fs-lg); padding-inline: var(--pv-7); }
.pv-hero__art { order: -1; aspect-ratio: 16/11; }

/* assinatura da marca — manuscrita, o contraponto quente da paleta fria */
/* Assinatura da marca: presente, nunca protagonista. No mobile ela flutuava
   solta no meio do hero e disputava atenção com o nome do jogo. */
.pv-brandmark {
  font-family: var(--pv-font-hand); font-size: 1.25rem; line-height: 1.1;
  color: var(--pv-text-mut); opacity: .8; text-align: center;
  margin: var(--pv-5) auto 0; max-width: 24ch; transform: none;
}

@media (min-width: 760px) {
  .pv-hero { padding: var(--pv-7) 0; }
  .pv-hero__inner { flex-direction: row; align-items: center; gap: var(--pv-6); }
  .pv-hero__copy { flex: 1 1 44%; }
  .pv-hero__art { order: 0; flex: 1 1 58%; aspect-ratio: auto; min-height: 380px; display: flex; margin-right: calc(var(--pv-5) * -1); }
  .pv-hero__cta { align-self: flex-start; min-width: 260px; }
  .pv-brandmark {
    position: absolute; right: var(--pv-5); top: var(--pv-6);
    margin: 0; text-align: right; font-size: 1.8rem; max-width: 12ch;
    transform: rotate(-4deg); color: var(--pv-a2); opacity: .6;
  }
}
@media (min-width: 1100px) {
  .pv-hero__title { font-size: clamp(3.4rem, 5.6vw, 5rem); }
  .pv-hero__art { min-height: 460px; margin-right: calc(var(--pv-7) * -1); }
}

.pv-section-title {
  font-size: var(--pv-fs-sm); font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--pv-text-mut); margin: var(--pv-7) auto var(--pv-3);
}
.pv-section-note { color: var(--pv-text-mut); font-size: var(--pv-fs-sm); margin: 0 auto var(--pv-4); }

/* ── Ilustração de mecânica ─────────────────────────────────────────────── */
.pv-art { width: 100%; height: 100%; display: block; }

/* Movimento curto e com intenção: cada animação conta o verbo do jogo.
   Só roda quando o card está visível (hover/foco no desktop, sempre no hero). */
@keyframes pvFloat  { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-13px); } }
/* 0% precisa ser o estado EM REPOUSO: com animation-play-state:paused o
   navegador congela exatamente nesse quadro, e um card parado não pode
   mostrar um desenho incompleto. */
@keyframes pvSlide  { 0%,100% { transform: none; opacity: 1; } 40% { transform: translateX(34px); opacity: .25; } }
@keyframes pvSpark  { 0%,100% { opacity: .25; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes pvTap    { 0%,100% { transform: scale(1); opacity: .85; } 50% { transform: scale(.82); opacity: 1; } }

.pv-art__float  { animation: pvFloat 2.6s var(--pv-ease-out) infinite; }
.pv-art__slide  { animation: pvSlide 3.2s var(--pv-ease-out) infinite; }
.pv-art__spark  { animation: pvSpark 2.2s ease-in-out infinite; transform-origin: 160px 100px; }
.pv-art__tap    { animation: pvTap 1.9s var(--pv-ease-back) infinite; transform-origin: 181px 81px; }

@media (prefers-reduced-motion: reduce) {
  .pv-art__float, .pv-art__slide, .pv-art__spark, .pv-art__tap { animation: none; }
  .pv-art__slide { opacity: 1; transform: none; }
}

/* ── Grade e card de catálogo ───────────────────────────────────────────── */
.pv-games { display: grid; grid-template-columns: 1fr; gap: var(--pv-4); }
@media (min-width: 560px)  { .pv-games { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .pv-games { grid-template-columns: repeat(4, 1fr); gap: var(--pv-4); } }

.pv-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--pv-r-lg);
  background:
    radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--pv-a1) 17%, transparent), transparent 62%),
    var(--pv-grad-surface);
  border: 1px solid var(--pv-line); box-shadow: var(--pv-shadow-1);
  transition: transform var(--pv-t-med) var(--pv-ease-out), box-shadow var(--pv-t-med), border-color var(--pv-t-med);
}
.pv-card:hover, .pv-card:focus-visible {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--pv-a1) 50%, transparent);
  box-shadow: var(--pv-shadow-2), var(--pv-glow-accent);
}
/* a mecânica ganha vida no hover (no toque, o card inteiro já é o alvo) */
@media (hover: hover) {
  .pv-card .pv-art__float, .pv-card .pv-art__slide,
  .pv-card .pv-art__spark, .pv-card .pv-art__tap { animation-play-state: paused; }
  .pv-card:hover .pv-art__float, .pv-card:hover .pv-art__slide,
  .pv-card:hover .pv-art__spark, .pv-card:hover .pv-art__tap { animation-play-state: running; }
}

.pv-card__art { aspect-ratio: 5/4; width: 100%; flex: none; min-height: 0; overflow: hidden;
  padding: var(--pv-3) var(--pv-3) 0; }
/* var(--pv-3) nas laterais, não --pv-2: medido a 1440px, a coluna direita da
   grade do Color Code passava 1px do container e era cortada por
   overflow:hidden. Um pixel, mas é uma peça do desenho. */
/* A arte é o produto no card. Com o viewBox colado ao conteúdo (art.js), esta
   área passa a ser preenchida de verdade em vez de exibir um ícone com margem. */
.pv-card__body { padding: var(--pv-3) var(--pv-4) var(--pv-5); display: flex; flex-direction: column; gap: 6px; flex: 1; }
.pv-card__name { font-size: var(--pv-fs-lg); font-weight: 800; letter-spacing: -.02em; }
.pv-card__what { color: var(--pv-text-dim); font-size: var(--pv-fs-sm); flex: 1; }
.pv-card__cta { margin-top: var(--pv-3); align-self: stretch; }
.pv-card .pv-btn--accent { box-shadow: 0 8px 22px color-mix(in srgb, var(--pv-a1) 30%, transparent); }

/* Rótulo de gênero — o "o que é isto" antes do nome */
/* Rótulo de gênero — o "o que é isto" antes do nome.
   Caixa alta com entreletra quebrava em duas linhas no card de 4 colunas e
   estragava o ritmo. Caixa de frase cabe, lê melhor e é o que a referência usa. */
.pv-eyebrow {
  font-size: var(--pv-fs-sm); font-weight: 700; letter-spacing: 0;
  color: var(--pv-a1); line-height: 1.2; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
/* No hero há espaço de sobra: ali o rótulo vira etiqueta. */
.pv-hero .pv-eyebrow {
  font-size: var(--pv-fs-xs); font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}

/* ── Lab (candidatos) ───────────────────────────────────────────────────── */
.pv-lab { margin-top: var(--pv-7); }
.pv-lab__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pv-3); }
.pv-lab__item { border: 1px dashed var(--pv-line); border-radius: var(--pv-r-md); padding: var(--pv-4); background: rgba(255,255,255,.02); }
.pv-lab__item h3 { font-size: var(--pv-fs-md); font-weight: 700; }
.pv-lab__item p { font-size: var(--pv-fs-xs); color: var(--pv-text-mut); margin-top: 4px; }

/* ── Faixa de razões (pé da home) ──────────────────────────────────────── */
.pv-why {
  display: grid; grid-template-columns: 1fr; gap: var(--pv-4);
  margin-top: var(--pv-7); padding-top: var(--pv-5); border-top: 1px solid var(--pv-line);
}
@media (min-width: 620px)  { .pv-why { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .pv-why { grid-template-columns: repeat(4, 1fr); } }
.pv-why__item { display: flex; align-items: flex-start; gap: var(--pv-3); }
.pv-why__ico { width: 26px; height: 26px; flex: none; color: var(--pv-brand-2); }
.pv-why__item strong { display: block; font-size: var(--pv-fs-sm); font-weight: 800; }
.pv-why__item span { display: block; font-size: var(--pv-fs-xs); color: var(--pv-text-mut); margin-top: 2px; }

/* ── Telas estreitas ────────────────────────────────────────────────────── */
@media (max-width: 559px) {
  /* A 134px, Memory+ e iLo ainda liam, mas as grades do Color Code e do Color
     Path viravam pontinhos — medido na auditoria do v6. 168px devolve a
     mecânica em ~2s sem virar bloco gigante. O respiro interno da arte
     também diminuiu: agora quem precisa do espaço é o desenho, não a margem. */
  .pv-card { display: grid; grid-template-columns: 168px 1fr; align-items: center; }
  /* O padding lateral não é decoração: os viewBox são colados ao conteúdo e
     alguns elementos (o brilho do par, a coluna direita da grade do Color Code)
     ficam alguns px para fora. Medido: sem respiro à direita, o Color Code
     perdia 6px e o Memory+ 2px por overflow:hidden. */
  .pv-card__art { aspect-ratio: 1; padding: 6px 9px; }
  .pv-card__body { padding: var(--pv-3) var(--pv-4) var(--pv-3) var(--pv-3); }
  .pv-card__cta { align-self: flex-start; }
}
@media (max-width: 359px) {
  /* Só abaixo de 360 a arte cede. Escrevi este corte em 399px primeiro e medi:
     390 — que é a largura de referência do mobile — caía na faixa menor e a
     arte voltava para 148. O corte tem de ficar abaixo de 390. */
  .pv-hero { padding-top: var(--pv-6); }
  .pv-card { grid-template-columns: 136px 1fr; }
  .pv-hero-card__body, .pv-card__body { padding-inline: var(--pv-3); }
}