/* Performance layer: mantém o visual completo, mas evita pintar e recalcular
   regiões que não participam do frame atual. */

html {
  text-rendering: optimizeLegibility;
}

body {
  overflow-x: clip;
}

#root,
.pagina {
  isolation: isolate;
}

/* Cada tela e bloco extenso vira uma unidade independente de layout/pintura. */
main,
.conteudo,
.personagem-area,
.menu-selecao-aurora,
.tela-habilidades-classe,
.visualizacao-build-completa,
.sistema-passivas-despertar,
.mundo-elariya-leitura,
.layout-bestiario,
.layout-aparencias {
  contain: layout style;
}

/* Listas longas mantêm sua dimensão, mas só são rasterizadas perto da tela. */
.info-box,
.card-passiva-despertar,
.passiva-build-resumida,
.item-bestiario,
.card-habilidade-classe,
.secao-passiva-generica,
.card-marco-passiva,
.painel-perda-passiva {
  content-visibility: auto;
  contain-intrinsic-size: auto 180px;
}

img,
video,
canvas {
  backface-visibility: hidden;
}

img {
  image-rendering: auto;
}

/* Não calcula os drop-shadows caros enquanto o bitmap novo ainda está sendo
   decodificado. Assim que pronto, o visual completo reaparece normalmente. */
.personagem.personagem-imagem-carregando {
  opacity: 0 !important;
  filter: none !important;
  transition: none !important;
}

.personagem.personagem-imagem-pronta,
.personagem-selecionada {
  transform: translateZ(0);
}

/* A animação original interpolava blur, brightness e três drop-shadows sobre
   todo o PNG transparente. Mantemos a mesma entrada e o mesmo glow final, mas
   o filtro fica estável e pode ser reutilizado durante todos os frames. */
@keyframes entradaArteSelecionada {
  0% {
    opacity: 0;
    filter: drop-shadow(0 0 25px #000)
      drop-shadow(0 0 24px #e826e82e)
      drop-shadow(0 0 18px #00d6ce21);
    transform: translate3d(0, 18px, 0) scale(0.96);
  }
  55% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    filter: drop-shadow(0 0 25px #000)
      drop-shadow(0 0 24px #e826e82e)
      drop-shadow(0 0 18px #00d6ce21);
    transform: translate3d(0, 0, 0) scale(1);
  }
}

/* Troca leve para computadores que não têm composição por hardware: a arte
   aparece com um fade curto, enquanto o brilho ao redor mantém a sensação de
   entrada. O PNG não sofre mais zoom/blur em cada frame. */
@keyframes auroraTrocaPersonagem {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.personagem.personagem-selecionada {
  animation: auroraTrocaPersonagem 0.18s ease-out both !important;
  filter: drop-shadow(0 0 25px #000)
    drop-shadow(0 0 24px #e826e82e)
    drop-shadow(0 0 18px #00d6ce21) !important;
  transform: translateZ(0) !important;
  transition: none !important;
  will-change: opacity;
}

/* O pulso continua, mas sem recalcular brilho de uma superfície de 520x720. */
@keyframes pulsoPainelSelecao {
  0% {
    opacity: 0.86;
    transform: scale(0.985);
  }
  48% {
    opacity: 1;
    transform: scale(1.012);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* A faixa luminosa usa composição por transform em vez de alterar `left` e
   provocar layout/pintura da área inteira a cada frame. */
@keyframes varreduraArteSelecionada {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) skew(-18deg);
  }
  24% {
    opacity: 0.82;
  }
  100% {
    opacity: 0;
    transform: translate3d(600%, 0, 0) skew(-18deg);
  }
}

.personagem.personagem-selecionada {
  transition: none !important;
}

/* `transition: all` fazia cada passagem interpolar também box-shadow e filtros
   dos cards. O glow continua no estado hover, mas entra de forma instantânea. */
.item-raca,
.item-classe,
.card-selecao-aurora {
  transition: transform 0.18s ease-out, border-color 0.18s ease-out,
    color 0.18s ease-out, background 0.18s ease-out !important;
}

.item-raca:hover,
.item-classe:hover,
.card-selecao-aurora:hover {
  transition: transform 0.18s ease-out, border-color 0.18s ease-out,
    color 0.18s ease-out, background 0.18s ease-out !important;
}

/* Promove somente os elementos que realmente se movem. Evita manter dezenas
   de cards em camadas de composição permanentes. */
.personagem-selecionada,
.preview-personagem .personagem,
.brilho-selecao-personagem,
.conteudo.entrada,
.conteudo.entrada::after {
  will-change: transform, opacity;
}

.personagem:not(.personagem-selecionada),
.card-selecao-aurora,
.info-box,
.card-passiva-despertar,
.card-habilidade-classe {
  will-change: auto;
}

/* background-attachment: fixed força repintura da página inteira durante o
   scroll quando o navegador usa composição por software. O gradiente e sua
   qualidade permanecem idênticos. */
@media (any-hover: none), (update: slow) {
  body {
    background-attachment: scroll;
  }
}

/* Em abas ocultas o navegador pode congelar animações sem alterar o estado
   visual que o usuário verá ao retornar. */
@media print {
  *,
  *::before,
  *::after {
    animation-play-state: paused !important;
    transition: none !important;
  }
}