/*   base.css — tokens, reset, tipografia base, animações e acessibilidade
     compartilhados por todas as páginas. As fontes NÃO são carregadas via
     @import aqui (é bloqueante: o navegador precisa baixar e abrir este
     arquivo antes de sequer descobrir a fonte). Cada página carrega as
     fontes via <link rel="preconnect"> + <link rel="stylesheet"> no <head>,
     em paralelo com o CSS — bem mais rápido. */

/* 1. TOKENS */
:root {
  /* Cores */
  --coral:         #E85D4A;
  --coral-soft:    #F4A99A;
  --coral-light:   #FCE4EC;

  --purple-mid:    #6B5090;
  --purple-deep:   #2E1A47;
  --purple-lav:    #C5B8E0;

  --blue-mid:      #3A7ABF;
  --blue-baby:     #A8C4E8;
  --blue-lav:      #D0E4F7;

  --gold:          #F5C842;
  --gold-dark:     #C8922A;

  --text:          #1A1625;
  --text-muted:    #6B6478;
  --text-light:    #6F6A7B;   /* era #9E98A8 = 2.5–2.8:1; agora >= 4.6:1 */

  --bg:            #FAFAF9;
  --bg-section:    #F4F2F0;
  --surface:       #FFFFFF;
  --border:        rgba(26, 22, 37, 0.08);

  /* Tipografia */
  --font-display:  'Playfair Display', Georgia, serif;
  --font-sans:     'DM Sans', system-ui, sans-serif;
  --font-mono:     'DM Mono', monospace;

  /* Escala — mobile first, hero com clamp para resolver "grande demais" do V4 */
  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-md:    1.125rem;
  --text-lg:    1.375rem;
  --text-xl:    1.75rem;
  --text-2xl:   2.25rem;
  --text-hero:  clamp(2.25rem, 5.5vw, 4rem);

  /* Espaçamento */
  --space-1:  4px;   --space-2:  8px;   --space-3:  12px;
  --space-4:  16px;  --space-5:  20px;  --space-6:  24px;
  --space-8:  32px;  --space-10: 40px;  --space-12: 48px;
  --space-16: 64px;  --space-20: 80px;

  /* Misc */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-full: 999px;

  --shadow-sm:  0 2px 12px rgba(26, 22, 37, 0.06);
  --shadow-md:  0 4px 24px rgba(26, 22, 37, 0.09);
  --shadow-lg:  0 8px 40px rgba(26, 22, 37, 0.13);

  --transition: 250ms ease;

  --max-w:      1160px;
  --padding-x:  clamp(20px, 5vw, 80px);
  --nav-h:      68px;
}

/*  3. RESET */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
}

img, video, svg { display: block; max-width: 100%; }
img { height: auto; } /* width/height no HTML servem só para reservar espaço (evita salto de layout) */
button, input, textarea, select { font-family: inherit; font-size: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* Rolagem suave só para quem NÃO pediu menos movimento (WCAG 2.3.3). */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* 4. TIPOGRAFIA BASE  */
h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
}

h1 { font-family: var(--font-display); font-size: var(--text-hero); font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: var(--text-2xl); letter-spacing: -0.015em; }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); font-weight: 500; }

p { color: var(--text-muted); line-height: 1.7; }

small { font-size: var(--text-sm); color: var(--text-light); }

/* 5. LAYOUT */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--padding-x);
}

.section {
  padding: var(--space-20) 0;
}

/*  7. ANIMAÇÕES */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Convenção usada por site.js (IntersectionObserver): [data-animate] + .visible.
   Definida aqui uma única vez para todas as páginas — algumas (jogo.css,
   personagens.css) não tinham essa regra e os elementos nunca apareciam
   ao rolar a tela. Se a página já define a sua própria versão (index.css,
   termos.css), esta apenas serve de reforço/fallback, sem conflito. */
[data-animate] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-animate].visible {
  opacity: 1;
  transform: translateY(0);
}
[data-animate="fade"] { transform: none; }
[data-animate="scale"] { transform: scale(0.9); }
[data-animate="scale"].visible { transform: scale(1); }

/* Texto visível apenas para leitores de tela (usado pelo aria-live de termos.js) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*  9. MICRO-INTERAÇÕES GLOBAIS
   Feedback de clique consistente em todo o site (nem toda página tinha
   :hover/:active nos botões — .btn-jogar em index/personagens ficava
   "morto" ao passar o mouse). Especificidade baixa: qualquer CSS de
   página que já defina seu próprio :hover continua vencendo. */

button:active,
.btn-primary:active,
.btn-cta:active,
.btn-jogar:active {
  transform: scale(0.96) !important;
  transition-duration: 80ms;
}

button:disabled,
button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.65;
  transform: none !important;
}

/* (estilo dos links do menu: components.css) */

/* 11. TOAST — notificação flutuante (window.SocialLab.toast) */
.sl-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 16px);
  z-index: 2000;
  max-width: min(90vw, 420px);
  padding: 14px 20px;
  border-radius: var(--radius-md, 14px);
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: var(--purple-deep, #2E1A47);
  box-shadow: var(--shadow-lg, 0 8px 40px rgba(0,0,0,.2));
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}
.sl-toast--visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
.sl-toast--success { background: #15803d; } /* era #1f9d55 = 3.5:1 com texto branco */
.sl-toast--error   { background: #d63447; }
.sl-toast--info     { background: var(--purple-deep, #2E1A47); }

/*  8. ACESSIBILIDADE */
:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  [data-animate] { opacity: 1; transform: none; }
  .sl-toast { transition: none; }
}


/* ================================================================
   12. SISTEMA DE EFEITOS E INTERAÇÕES
   Tudo aqui é opt-in por atributo/classe e respeita
   prefers-reduced-motion. Seletores com "html " na frente ganham do
   CSS de cada página (que carrega depois e tinha `transition: 0.3s`
   sobrescrevendo tudo).
   ================================================================ */
:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

::selection { background: #DC3545; color: #fff; }

/* 12.1 Barra de progresso de rolagem (criada por site.js) */
#sl-progress {
  position: fixed; top: 0; left: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, #DC3545, #ff8fa3, #8A63D2);
  transform: scaleX(0); transform-origin: 0 50%;
  z-index: 3000; pointer-events: none;
}

/* 12.2 Revelação ao rolar: <div data-reveal style="--d:120ms">
   Usa as propriedades individuais translate/scale, então NÃO conflita
   com o transform usado pelo hover/tilt do mesmo elemento. */
html [data-reveal] {
  opacity: 0;
  translate: 0 38px;
  transition-property: opacity, translate, scale, transform, box-shadow, background-color, border-color;
  transition-duration: .9s, .9s, .9s, .45s, .45s, .3s, .3s;
  transition-timing-function: var(--ease-out);
  transition-delay: var(--d, 0ms), var(--d, 0ms), var(--d, 0ms), 0ms, 0ms, 0ms, 0ms;
}
html [data-reveal="zoom"]  { translate: 0 20px; scale: .9; }
html [data-reveal].revealed { opacity: 1; translate: 0 0; scale: 1; }

/* Rede de segurança: se o JS não rodar, nada fica invisível */
@keyframes slFailsafe { to { opacity: 1; translate: 0 0; scale: 1; } }
html:not(.js-ok) [data-reveal] { animation: slFailsafe 0s 3s forwards; }

@keyframes slFailsafeAnimate { to { opacity: 1; transform: none; } }
html:not(.js-ok) [data-animate] { animation: slFailsafeAnimate 0s 3s forwards; }

/* 12.3 Tilt 3D que segue o mouse: <div data-tilt="7"> */
html [data-tilt] {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
  will-change: transform;
}
/* o :hover repete o transform para vencer regras como `.card:hover { transform: ... }` das páginas */
@media (hover: hover) and (pointer: fine) {
  html [data-tilt]:hover {
    --lift: -10px;
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
    box-shadow: 0 24px 48px -14px rgba(23, 19, 37, .26);
  }
}
html [data-tilt].is-tilting { transition: transform .09s linear, box-shadow .5s var(--ease-out); }
html [data-reveal][data-tilt] {
  transition-property: opacity, translate, scale, transform, box-shadow;
  transition-duration: .9s, .9s, .9s, .5s, .5s;
  transition-delay: var(--d, 0ms), var(--d, 0ms), var(--d, 0ms), 0ms, 0ms;
}
html [data-reveal][data-tilt].is-tilting { transition-duration: .9s, .9s, .9s, .09s, .5s; }

/* 12.4 Botões: brilho que atravessa, ripple no clique, imã no mouse */
html .btn-jogar, html .btn-primary, html .btn-cta, html button[type="submit"] {
  position: relative; overflow: hidden; isolation: isolate;
  translate: var(--mx, 0px) var(--my, 0px);
  transition-property: transform, box-shadow, background-color, color, border-color, opacity, translate;
  transition-duration: .25s, .25s, .25s, .25s, .25s, .25s, .4s;
  transition-timing-function: ease, ease, ease, ease, ease, ease, var(--ease-spring);
}
html .btn-jogar:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 10px 24px rgba(220, 53, 69, .38);
}
html .btn-jogar::before, html .btn-primary::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%);
  transform: translateX(-130%);
  transition: transform .8s var(--ease-out);
}
html .btn-jogar:not(:disabled):hover::before,
html .btn-primary:not(:disabled):hover::before { transform: translateX(130%); }

.sl-ripple {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  background: currentColor; opacity: .28; transform: scale(0);
  animation: slRipple .65s ease-out forwards;
}
@keyframes slRipple { to { transform: scale(1); opacity: 0; } }

/* 12.5 (header e footer agora vivem em components.css; os redes sociais da
   seção do mentor continuam aqui) */
html .mentor-socials a {
  display: inline-flex;
  transition: transform .35s var(--ease-spring), opacity .25s ease, color .2s ease;
}
html .mentor-socials a:hover {
  transform: translateY(-6px) scale(1.2) rotate(-8deg);
}

/* 12.7 Animações contínuas discretas (usam translate/opacity, não transform) */
@keyframes slFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }

/* 12.9 Movimento reduzido: tudo aparece direto, sem mover nada */
@media (prefers-reduced-motion: reduce) {
  html [data-reveal] { opacity: 1 !important; translate: none !important; scale: none !important; }
  html [data-tilt], html [data-tilt]:hover { transform: none !important; }
  #sl-progress { display: none; }
}


/* ================================================================
   13. ACESSIBILIDADE EXTRA (auditoria WCAG 2.2 AA)
   ================================================================ */
/* 2.5.8 Tamanho do alvo: mínimo 24×24px (links do menu/rodapé tinham 16–23px) */
html .mentor-socials a {
  min-width: 24px; min-height: 24px; align-items: center; justify-content: center;
}

/* 2.4.1 Pular bloco: link visível só ao receber foco pelo teclado */
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 4000;
  padding: 10px 16px; border-radius: 8px;
  background: #171325; color: #fff; font-weight: 600; font-size: 14px;
  transform: translateY(-200%);
  transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); }
main:focus, [tabindex="-1"]:focus { outline: none; }


/* ================================================================
   14. LINKS COM CARA DE BOTÃO + LOGO + ALVO DE TOQUE
   ================================================================ */
/* "Jogar agora", "Conhecer o jogo" e "Conhecer os personagens" eram <button> que
   navegavam via JS; agora são <a href>. :where() zera a especificidade: qualquer
   regra de página (.btn-jogar { ... }) continua mandando, isto só substitui o
   comportamento padrão de <button> (centralizar o texto, ocupar altura). */
:where(a.btn-jogar, a.btn-cta, a.btn-primary) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

/* Aviso de privacidade / textos pequenos com link: o link precisa se distinguir sem depender de cor */
small a { text-decoration: underline; text-underline-offset: 2px; }