/* ==========================================================================
   RAG IDLE — TOKENS DE DESIGN
   Toda cor, fonte, espaço e sombra do site nasce aqui.
   Mudar a identidade visual do projeto é mexer neste arquivo, em mais nenhum.
   ========================================================================== */

/* ---------------------------------------------------------------- fontes -- */

@font-face {
  font-family: 'Cinzel';
  src: url('../assets/fonts/cinzel.woff2') format('woff2');
  font-weight: 400 900;         /* fonte variável */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/inter.woff2') format('woff2');
  font-weight: 100 900;         /* fonte variável */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Press Start 2P';
  src: url('../assets/fonts/pressstart.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------- tokens -- */

:root {

  /* --- Superfícies: noite de Prontera --- */
  --bg-void: #070a14;
  --bg-900:  #0a0e1c;
  --bg-800:  #111830;
  --bg-700:  #1a2342;
  --bg-600:  #24305a;
  --panel:    rgba(12, 18, 38, .90);
  --panel-hi: rgba(26, 35, 66, .94);
  --sunken:   rgba(4, 7, 16, .72);

  /* --- Ouro: molduras, títulos, ação primária --- */
  --gold:     #e8c14f;
  --gold-hi:  #f7e39a;
  --gold-dk:  #8a6b1f;
  --gold-ink: #2a1e05;          /* texto sobre ouro sólido */
  --gold-a35: rgba(232, 193, 79, .35);
  --gold-a15: rgba(232, 193, 79, .15);

  /* --- Esmeralda: gemas, status online, ganhos --- */
  --emerald:    #2ee6a8;
  --emerald-dk: #0f9b70;
  --emerald-a30: rgba(46, 230, 168, .30);

  /* --- Semânticos de jogo --- */
  --hp:   #e0483c;
  --sp:   #4aa3ff;
  --exp:  #9b6bff;
  --zeny: #f2c14e;
  --danger: #e3564a;
  --success: #2ee6a8;

  /* --- Raridade de drop --- */
  --r-comum:    #9aa6c4;
  --r-raro:     #4aa3ff;
  --r-epico:    #c77dff;
  --r-lendario: #f2a33c;

  /* --- Texto --- */
  --text:  #eae7dd;
  --muted: #8f9ab8;
  --dim:   #5b6680;

  /* --- Tipografia --- */
  --f-epic:  'Cinzel', 'Times New Roman', serif;
  --f-ui:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-pixel: 'Press Start 2P', 'Courier New', monospace;

  /* Escala tipográfica fluida — encolhe sozinha no celular, sem media query. */
  --t-xs:  clamp(.72rem, .70rem + .1vw,  .78rem);
  --t-sm:  clamp(.84rem, .80rem + .2vw,  .92rem);
  --t-md:  clamp(.95rem, .90rem + .25vw, 1.05rem);
  --t-lg:  clamp(1.10rem, 1.02rem + .4vw, 1.30rem);
  --t-xl:  clamp(1.40rem, 1.20rem + 1vw,  2.00rem);
  --t-2xl: clamp(1.90rem, 1.50rem + 2vw,  3.00rem);
  --t-3xl: clamp(2.60rem, 1.80rem + 4vw,  5.20rem);

  /* --- Ritmo: escala de 4pt --- */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 20px;  --s6: 24px;  --s8: 32px;  --s10: 40px;
  --s12: 48px; --s16: 64px; --s20: 80px; --s24: 96px;
  --s32: 128px;

  /* --- Forma --- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* --- Luz e profundidade --- */
  --glow-gold:    0 0 20px rgba(232, 193, 79, .35);
  --glow-emerald: 0 0 16px rgba(46, 230, 168, .45);
  --shadow-sm:    0 4px 12px rgba(0, 0, 0, .35);
  --shadow-md:    0 10px 28px rgba(0, 0, 0, .45);
  --shadow-panel: 0 18px 50px rgba(0, 0, 0, .60);

  /* --- Estrutura --- */
  --container: 1200px;
  --header-h: 72px;
  --gutter: clamp(16px, 4vw, 40px);

  /* --- Tempo --- */
  --fast: .16s;
  --base: .28s;
  --slow: .5s;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out-back: cubic-bezier(.34, 1.4, .64, 1);
}

/* ------------------------------------------------------------------ base -- */

body {
  font-family: var(--f-ui);
  font-size: var(--t-md);
  color: var(--text);
  background: var(--bg-void);
  /* Céu noturno: clareia de leve no topo e volta ao breu no rodapé. */
  background-image:
    radial-gradient(ellipse 120% 70% at 50% -10%, #16224a 0%, transparent 60%),
    radial-gradient(ellipse 80% 50% at 80% 100%, #101a38 0%, transparent 65%);
  background-attachment: fixed;
}

/* ==========================================================================
   FUNDO DO SITE
   --------------------------------------------------------------------------
   Três camadas fixas atrás de tudo, montadas em <div class="site-bg">:

   1. cena   — a vista de Rune-Midgard: serras em profundidade, Prontera num
               pico, mata fechando a frente e Yggdrasil na lateral. Desenho
               original em SVG (assets/img/midgard.svg), gerado por
               deslocamento de ponto médio e ramificação recursiva.
   2. aurora — faixas verde e violeta que respiram devagar. Ragnarök é mito
               nórdico; aurora boreal é o céu daquele mundo.
   3. véu    — escurecimento por cima da cena. É ele que mantém o texto
               legível, e é o mesmo truque que os sites oficiais usam sobre
               a arte principal.

   Para trocar a cena por uma arte pintada de verdade, aponte
   `CONFIG.siteBackground` para a imagem: ela entra no lugar do SVG, em tela
   cheia, com o véu por cima. Nada mais precisa mudar.
   ========================================================================== */

.site-bg {
  position: fixed;
  inset: 0;
  z-index: -10;
  pointer-events: none;
  overflow: hidden;
}

.site-bg__scene,
.site-bg__aurora,
.site-bg__veil {
  position: absolute;
  inset: 0;
}

/* Fora do hero a cena vira só textura de profundidade: presente o bastante
   para o fundo não ser liso, discreta o bastante para não roubar leitura. */
.site-bg__scene {
  background: var(--site-scene, url('../assets/img/midgard.svg')) center bottom / cover no-repeat;
  opacity: .30;
}

.site-bg__aurora {
  background:
    radial-gradient(ellipse 70% 45% at 18% 4%,  rgba(46, 230, 168, .10), transparent 62%),
    radial-gradient(ellipse 65% 40% at 82% 12%, rgba(155, 107, 255, .09), transparent 62%);
  animation: aurora 26s ease-in-out infinite alternate;
}

/* O véu é o que separa "fundo bonito" de "texto ilegível".
   Leve no topo, onde a cena precisa aparecer; pesado embaixo, onde mora o
   conteúdo denso. É o mesmo degradê que os sites oficiais usam sobre a arte. */
.site-bg__veil {
  background: linear-gradient(180deg,
    rgba(7, 10, 20, .30)  0%,
    rgba(7, 10, 20, .62) 45%,
    rgba(7, 10, 20, .88) 80%,
    rgba(7, 10, 20, .96) 100%);
}

@keyframes aurora {
  0%   { transform: translate3d(0, 0, 0)      scale(1);    opacity: 1;   }
  50%  { transform: translate3d(2%, 1.5%, 0)  scale(1.06); opacity: .78; }
  100% { transform: translate3d(-2%, -1%, 0)  scale(1.02); opacity: .92; }
}

@media (prefers-reduced-motion: reduce) {
  .site-bg__aurora { animation: none; }
}

/* ------------------------------------------------------- utilitários base -- */

.epic {
  font-family: var(--f-epic);
  font-weight: 700;
  letter-spacing: .02em;
}

.pixel {
  font-family: var(--f-pixel);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
}

/* Texto em ouro escovado — para títulos, nunca para corpo pequeno. */
.gold-text {
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 45%, var(--gold-dk) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Fallback: se o clipping de texto falhar, o texto ainda aparece em ouro. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .gold-text { background: none; color: var(--gold); }
}

.muted { color: var(--muted); }
.dim   { color: var(--dim); }

/* ----------------------------------------------------------- animações -- */

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@keyframes pulse-gem {
  0%, 100% { opacity: 1;   filter: drop-shadow(0 0 6px var(--emerald)); }
  50%      { opacity: .55; filter: drop-shadow(0 0 14px var(--emerald)); }
}

@keyframes fade-rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position:  200% 0; }
}

@keyframes spin { to { transform: rotate(360deg); } }

@keyframes blink { 50% { opacity: .25; } }

/* Reveal on scroll — o JS adiciona .is-visible quando o elemento entra. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Escalonamento em cascata para grades de cards. */
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }
.reveal[data-delay="5"] { transition-delay: .40s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}