/* =============================================================================
 * dopamina.css — seção "Dopamina boa." (vitrine dos jogos na home)
 *
 * Aparece entre #integrado e #fundamento. Mostra prints REAIS de partidas
 * (web/assets/dopamina/*.webp — fotografados com Playwright via
 * web/ops/shot_jogos_dopamina.mjs) numa fita rolante contínua, com o título
 * grande no padrão das outras seções (Cormorant + em dourado).
 *
 * Fita rolante: CSS puro, sem JS — a trilha contém DUAS cópias da sequência
 * de cards e anima translateX(-50%); quando a 1ª cópia sai inteira, a 2ª
 * está exatamente onde a 1ª começou (loop perfeito). O espaçamento é
 * margin-right no card (não gap no flex) pra conta do -50% fechar exata.
 * prefers-reduced-motion: fita parada com rolagem manual.
 *
 * Estética alinhada ao site: glass panel (--surface-bg/--surface-border),
 * título Cormorant com em dourado (gradiente invertido em pintura clara),
 * tokens adaptáveis a claro/escuro/pintura. Fonte mínima 16px.
 * ============================================================================= */

.dopamina-section {
  position: relative;
  min-height: 100dvh;
  max-height: 100dvh;
  padding: clamp(40px, 6vh, 80px) 0 clamp(24px, 4vh, 56px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4vh, 48px);
  overflow: hidden;
}

.dopamina-section .wrap {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
}

/* ---------- Header (mesmo vidro do fundamento-header) ---------- */

.dopamina-header {
  text-align: center;
  max-width: 860px;
  margin: 0 auto;
  background: var(--surface-bg);
  border: 1px solid var(--surface-border);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .28);
  -webkit-backdrop-filter: blur(14px) saturate(1.18);
  backdrop-filter: blur(14px) saturate(1.18);
  border-radius: 14px;
  padding: clamp(28px, 4vmin, 48px) clamp(24px, 4vmin, 48px);
}

.dopamina-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: clamp(42px, 6.4vmin, 76px);
  line-height: 1.04;
  letter-spacing: -.012em;
  color: var(--surface-ink, #f7eccd);
  margin: 0 0 clamp(14px, 2vh, 22px);
  text-wrap: balance;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .42);
}
body[data-surface="light"] .dopamina-title {
  text-shadow: 0 1px 2px rgba(255, 255, 255, .45);
}

.dopamina-title em {
  font-style: italic;padding-left:.18em;padding-right:.18em;margin-left:-.18em;margin-right:-.18em;
  font-weight: 600;
  background: linear-gradient(120deg, #fbe8b4 0%, #e8c477 60%, #d4a857 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
body[data-surface="light"] .dopamina-title em {
  background: linear-gradient(120deg, #8a5818 0%, #6e4612 60%, #4b3008 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dopamina-lead {
  font-family: Inter, system-ui, sans-serif;
  font-size: clamp(20px, 2.4vmin, 25px);
  font-weight: 500;
  line-height: 1.5;
  color: var(--surface-ink, #f7eccd);
  opacity: .92;
  max-width: 720px;
  margin: 0 auto;
  text-wrap: balance;
}

.dopamina-stat {
  font-family: Inter, system-ui, sans-serif;
  font-size: clamp(17px, 2vmin, 20px);
  line-height: 1.5;
  color: var(--surface-ink, #f7eccd);
  opacity: .8;
  margin: clamp(12px, 1.8vh, 18px) auto 0;
  text-wrap: balance;
}
.dopamina-stat strong {
  font-weight: 800;
  opacity: 1;
  background: linear-gradient(120deg, #fbe8b4 0%, #e8c477 60%, #d4a857 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
body[data-surface="light"] .dopamina-stat strong {
  background: linear-gradient(120deg, #8a5818 0%, #6e4612 60%, #4b3008 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- Fita rolante de prints ---------- */

.dopamina-strip {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.dopamina-track {
  display: flex;
  width: max-content;
  animation: dopamina-roll 55s linear infinite;
}
.dopamina-strip:hover .dopamina-track {
  animation-play-state: paused;
}
@keyframes dopamina-roll {
  to { transform: translateX(-50%); }
}

.dopamina-card {
  width: clamp(260px, 26vw, 360px);
  margin-right: clamp(16px, 2vw, 28px);
  flex: none;
}

.dopamina-card img {
  display: block;
  width: 100%;
  height: auto; /* anula o height="400" da marcação; o aspect-ratio manda */
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid var(--surface-border, rgba(255, 237, 180, .22));
  box-shadow: 0 16px 44px rgba(0, 0, 0, .38);
  background: #0a0d16;
}

/* Legenda em "vidrinho" (mesma superfície dos painéis do site): garante
   leitura sobre QUALQUER pintura, clara ou escura — texto solto sobre a
   arte perdia contraste nas pinturas claras. */
.dopamina-card figcaption {
  font-family: Inter, system-ui, sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--surface-ink, #f7eccd);
  text-align: center;
  width: max-content;
  max-width: 100%;
  margin: 12px auto 0;
  padding: 8px 18px;
  background: var(--surface-bg);
  border: 1px solid var(--surface-border);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  backdrop-filter: blur(12px) saturate(1.15);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .2);
}

/* ---------- Acessibilidade / mobile ---------- */

@media (prefers-reduced-motion: reduce) {
  .dopamina-track { animation: none; }
  .dopamina-strip { overflow-x: auto; }
}

@media (max-width: 767px) {
  .dopamina-section {
    padding-top: clamp(72px, 12vh, 110px); /* respiro pra topbar sticky */
    gap: clamp(18px, 3vh, 28px);
  }
  /* card menor no celular: header + card + legenda têm que caber juntos
     na tela (a seção é 1 tela do snap; estourar corta a legenda) */
  .dopamina-card {
    width: min(58vw, 250px);
  }
}