/* ══════════════════════════════════════════════════════════════
   MODERN.CSS — Camada de aprimoramento progressivo (2026)
   Tudo aqui é opcional: sem esta folha (ou em browsers antigos)
   o site continua idêntico ao tema atual. Nada de novas cores —
   só profundidade, luz e micro-interações sobre o tema existente.
   Guardas: .fx-modern (JS ativo), @supports, prefers-reduced-motion.
   ══════════════════════════════════════════════════════════════ */

/* ── 1. ATMOSFERA GLOBAL ──────────────────────────────────────── */

/* Vinheta cinematográfica: escurece as bordas, empurra o centro
   pra frente. Estática — custo zero de runtime. */
.fx-vignette {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(
    120% 90% at 50% 30%,
    transparent 60%,
    rgba(0, 0, 0, 0.38) 100%
  );
}

/* Feixe de luz dourada descendo sobre o header (god ray) +
   brasa carmesim subindo do rodapé. Camadas de parallax movidas
   pelo ponteiro via --fx-px/--fx-py (JS, só desktop). */
.fx-aurora {
  position: absolute;
  top: -30%;
  right: -10%;
  bottom: -10%;
  left: -10%;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}
.fx-aurora--shaft {
  background:
    radial-gradient(
      42% 60% at 50% 0%,
      rgba(212, 181, 118, 0.13),
      transparent 65%
    ),
    radial-gradient(
      18% 42% at 50% 0%,
      rgba(255, 246, 216, 0.07),
      transparent 70%
    );
  transform: translate3d(
    calc(var(--fx-px, 0) * -14px),
    calc(var(--fx-py, 0) * -8px),
    0
  );
}
.fx-aurora--ember {
  background:
    radial-gradient(
      36% 30% at 18% 100%,
      rgba(139, 26, 26, 0.1),
      transparent 70%
    ),
    radial-gradient(
      30% 26% at 82% 100%,
      rgba(136, 204, 255, 0.05),
      transparent 70%
    );
  transform: translate3d(
    calc(var(--fx-px, 0) * -26px),
    calc(var(--fx-py, 0) * -14px),
    0
  );
}

/* Raios de luz (god rays): feixes descendo por trás do logo, como
   luz filtrando pelo poço de uma estação de metrô. Contidos pelo
   overflow:hidden do header. */
.fx-rays {
  position: absolute;
  top: -20%;
  right: -20%;
  bottom: -20%;
  left: -20%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  mix-blend-mode: screen;
  transform: rotate(7deg);
  background: repeating-conic-gradient(
    from 90deg at 50% -12%,
    rgba(212, 181, 118, 0.055) 0deg 2deg,
    transparent 2deg 7.5deg
  );
  -webkit-mask: radial-gradient(68% 85% at 50% 0%, #000, transparent 72%);
  mask: radial-gradient(68% 85% at 50% 0%, #000, transparent 72%);
  animation: fx-ray-breathe 16s ease-in-out infinite alternate;
}
@keyframes fx-ray-breathe {
  from {
    opacity: 0.5;
    transform: rotate(7deg);
  }
  to {
    opacity: 0.26;
    transform: rotate(4.5deg);
  }
}

/* ── 2. HEADER — profundidade e ouro metálico ─────────────────── */

.fx-modern .header {
  position: relative;
}
.fx-modern .header > * {
  position: relative;
  z-index: 1;
}

/* Logo e título deslizam sutilmente contra o fundo (parallax de
   ponteiro): o cenário vira um diorama com 3 profundidades. */
.fx-modern .header-logo {
  transform: translate3d(
    calc(var(--fx-px, 0) * 10px),
    calc(var(--fx-py, 0) * 7px),
    0
  );
}
.fx-modern .header h1 {
  transform: translate3d(
    calc(var(--fx-px, 0) * 6px),
    calc(var(--fx-py, 0) * 4px),
    0
  );
}

/* Ouro forjado: preenchimento em gradiente metálico no título.
   O brilho varrido (h1:after) do tema atual continua por cima. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .fx-modern .header h1 {
    background-image: linear-gradient(
      168deg,
      #f3e2b4 8%,
      var(--gold-bright) 30%,
      #a8894e 52%,
      var(--gold-bright) 70%,
      #8a6d3b 96%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 0 26px rgba(212, 181, 118, 0.38))
      drop-shadow(0 2px 0 rgba(0, 0, 0, 0.55));
  }
}

/* A linha dourada do header respirava animando width (layout);
   aqui vira scaleX — mesmo visual, só compositor. */
.fx-modern .header::after {
  width: 400px;
  animation: fx-line-breathe 7s ease-in-out infinite;
}
@keyframes fx-line-breathe {
  0%,
  100% {
    opacity: 0.55;
    transform: translateX(-50%) scaleX(0.85);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scaleX(1);
  }
}

/* ── 3. NAV — vidro arcano + indicador deslizante ─────────────── */

@supports (
  (backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))
) {
  .fx-modern .steps-nav {
    background: rgba(13, 13, 26, 0.68);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    box-shadow:
      inset 0 1px 0 rgba(212, 181, 118, 0.07),
      0 8px 30px rgba(0, 0, 0, 0.35);
  }
}

/* Sublinha dourada que desliza até a aba ativa (posição via JS).
   A borda estática original fica como fallback sem JS. */
.fx-modern .steps-nav {
  position: sticky;
}
.fx-tab-glider {
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  width: var(--fx-tab-w, 0px);
  transform: translate(var(--fx-tab-x, 0px), var(--fx-tab-y, 0px));
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  box-shadow:
    0 0 12px var(--gold-glow),
    0 0 3px var(--gold-glow);
  pointer-events: none;
  transition:
    transform 0.38s cubic-bezier(0.65, 0, 0.35, 1),
    width 0.38s cubic-bezier(0.65, 0, 0.35, 1);
}
.fx-modern.fx-glider-on .step-tab--active {
  border-bottom-color: transparent;
}

/* ── 4. CARDS — luz de tocha seguindo o cursor ────────────────── */

/* Um foco de luz dourada acompanha o ponteiro sobre qualquer card,
   como vela sobre pergaminho. Vars --mx/--my via JS (delegado). */
.fx-modern .card {
  overflow: hidden;
}
.fx-modern .card::after,
.fx-modern .ocup-detail::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    290px circle at var(--mx, 50%) var(--my, 50%),
    rgba(212, 181, 118, 0.075) 0%,
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 1;
}
.fx-modern .card.fx-lit::after,
.fx-modern .ocup-detail.fx-lit::after {
  opacity: 1;
}

/* Elevação suave ao pairar — junto do box-shadow já existente.
   animation:none solta o rise-in preenchido (fill both) do
   effects.css, que senão travaria o transform do hover. */
.fx-modern .card:hover {
  animation: none;
  transform: translateY(-1px);
}

/* Superfície entalhada: luz dourada na aresta superior, sulco
   escuro embaixo — o painel vira metal gravado, não um div chapado */
.fx-modern .card,
.fx-modern .raca-detail,
.fx-modern .ocup-detail {
  box-shadow:
    inset 0 1px 0 rgba(212, 181, 118, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    var(--elev-1);
}
.fx-modern .card:hover {
  box-shadow:
    inset 0 1px 0 rgba(212, 181, 118, 0.09),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    var(--elev-2);
}

/* Cantos ornamentais (filigrana) nos cards dourados e no detalhe
   de raça — mesma técnica dos ticks do nav-btn, tema intacto. */
.fx-modern .card--gold::before {
  box-shadow: 0 0 14px rgba(212, 181, 118, 0.25);
}
.fx-modern .raca-detail,
.fx-modern .card--gold {
  background-image:
    linear-gradient(var(--gold-dim), var(--gold-dim)),
    linear-gradient(var(--gold-dim), var(--gold-dim)),
    linear-gradient(var(--gold-dim), var(--gold-dim)),
    linear-gradient(var(--gold-dim), var(--gold-dim)),
    linear-gradient(180deg, var(--surface-2), var(--surface));
  background-repeat: no-repeat;
  background-size:
    14px 1px,
    1px 14px,
    14px 1px,
    1px 14px,
    100% 100%;
  background-position:
    100% 0,
    100% 0,
    100% 100%,
    100% 100%,
    0 0;
}

/* ── 5. TILT 3D — hub, mapa e fichas ──────────────────────────── */

/* Cards do hub inicial e o mapa-múndi inclinam em 3D na direção
   do cursor, com o título flutuando acima da arte (translateZ). */
@supports (transform-style: preserve-3d) {
  .fx-modern .home-card,
  .fx-modern .world-map a {
    transform-style: preserve-3d;
    will-change: transform;
  }
  /* A entrada home-rise usa fill "backwards" (ver home.css): cobre o atraso
     do stagger mas LIBERA o transform ao terminar, então o tilt abaixo se
     aplica sem precisar zerar a animação. Como a animação não é mais
     ligada/desligada pela classe .fx-tilting, tirar o mouse não a redispara
     — era esse re-disparo que fazia o card "piscar"/sumir ao sair. */
  .fx-modern .home-card.fx-tilting,
  .fx-modern .world-map a.fx-tilting {
    transform: perspective(1100px) rotateX(var(--rx, 0deg))
      rotateY(var(--ry, 0deg)) translateY(-2px);
    transition:
      transform 0.07s linear,
      border-color 0.25s,
      box-shadow 0.25s;
  }
  .fx-modern .home-card.fx-tilting .home-card-body {
    transform: translateZ(34px);
  }
  .fx-modern .home-card .home-card-body {
    transition: transform 0.3s var(--ease-out, ease);
  }
  /* (a arte mantém o zoom lento de 6s do home.css — sem override) */
}

/* Clarão dourado que acompanha o cursor sobre a arte */
.fx-modern .home-card {
  position: relative;
  overflow: hidden;
}
.fx-modern .home-card::after,
.fx-modern .world-map a::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    340px circle at var(--mx, 50%) var(--my, 50%),
    rgba(232, 207, 154, 0.13) 0%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 3;
}
.fx-modern .home-card.fx-tilting::after,
.fx-modern .world-map a.fx-tilting::after {
  opacity: 1;
}
.fx-modern .world-map a {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg, 6px);
}

/* ── 6. ANEL ARCANO — selo da etapa ativa ─────────────────────── */

/* Anel cônico dourado girando devagar atrás do selo numerado.
   Sem @property (Chrome <85) o ângulo não interpola: o anel fica
   estático — ainda bonito, nunca quebrado. */
@property --fx-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.fx-modern .step-badge {
  position: relative;
  border-color: rgba(212, 181, 118, 0.55);
}
.fx-modern .step-badge::before {
  content: "";
  --fx-angle: 0deg;
  position: absolute;
  top: -4px;
  right: -4px;
  bottom: -4px;
  left: -4px;
  border-radius: 50%;
  background: conic-gradient(
    from var(--fx-angle),
    transparent 0%,
    rgba(212, 181, 118, 0) 12%,
    var(--gold) 32%,
    #fff6d8 38%,
    var(--gold) 44%,
    transparent 68%
  );
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 3px),
    #000 calc(100% - 2px)
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 3px),
    #000 calc(100% - 2px)
  );
  animation: fx-spin 5s linear infinite;
  pointer-events: none;
}
@keyframes fx-spin {
  to {
    --fx-angle: 360deg;
  }
}

/* ── 7. MICRO-INTERAÇÕES ──────────────────────────────────────── */

/* Botões com retorno de mola (overshoot) e anel de foco dourado */
.fx-modern .nav-btn,
.fx-modern .step-tab,
.fx-modern .resist-chip,
.fx-modern .passe-opt,
.fx-modern .ficha-btn {
  transition-timing-function: cubic-bezier(0.34, 1.3, 0.64, 1);
}
.fx-modern .nav-btn:hover:not(:disabled) {
  transform: translateY(-1px);
}
.fx-modern .nav-btn:active {
  transform: translateY(0) scale(0.96);
}
.fx-modern :focus-visible {
  outline: 2px solid rgba(212, 181, 118, 0.65);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Inputs: linha de energia dourada ao focar */
.fx-modern .text-input:focus,
.fx-modern .search-box:focus,
.fx-modern .textarea-input:focus {
  box-shadow:
    0 0 0 3px rgba(212, 181, 118, 0.08),
    0 0 24px rgba(212, 181, 118, 0.1),
    inset 0 -1px 0 rgba(212, 181, 118, 0.35);
}

/* Chips selecionáveis ganham brilho interno ao pairar */
.fx-modern .resist-chip:hover,
.fx-modern .passe-opt:hover {
  box-shadow:
    inset 0 0 14px rgba(212, 181, 118, 0.07),
    0 2px 10px rgba(0, 0, 0, 0.4);
}

/* ── 8. REVELAÇÃO AO ROLAR (scroll reveal) ────────────────────── */

/* Elementos fundos da seção sobem suavemente ao entrar na tela.
   Aplicado via IO no JS somente a partir do 8º card (os primeiros
   já animam na troca de aba pelo tema atual). */
.fx-modern .fx-reveal {
  opacity: 0;
  transform: translateY(16px);
}
.fx-modern .fx-reveal.fx-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.6s var(--ease-out, ease),
    transform 0.6s var(--ease-out, ease);
}

/* ── 9. GUARDAS FINAIS ────────────────────────────────────────── */

@media (hover: none) {
  .fx-modern .card::after,
  .fx-modern .home-card::after,
  .fx-modern .world-map a::after {
    display: none;
  }
  .fx-modern .home-card.fx-tilting,
  .fx-modern .world-map a.fx-tilting {
    transform: none;
  }
  .fx-modern .card:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fx-aurora,
  .fx-tab-glider {
    transition: none;
  }
  .fx-rays {
    animation: none;
    opacity: 0.32;
  }
  .fx-modern .header::after {
    animation: none;
    transform: translateX(-50%);
  }
  .fx-modern .header-logo,
  .fx-modern .header h1 {
    transform: none;
  }
  .fx-modern .step-badge::before {
    animation: none;
  }
  .fx-modern .home-card.fx-tilting,
  .fx-modern .world-map a.fx-tilting {
    transform: none;
    transition: none;
  }
  .fx-modern .fx-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .fx-modern .nav-btn:hover:not(:disabled),
  .fx-modern .nav-btn:active {
    transform: none;
  }
}