/* =============================================================================
   honra.css - BRILHO DOS TÍTULOS DA PÁGINA /sistemas/honra, DOM2, 17/10/2026
   -----------------------------------------------------------------------------
   Arquivo PRÓPRIO desta página (carregado só nela, pelo views/sistemas/honra.njk,
   com ?v=<hash> calculado em src/routes/sistemas.js). As peças gerais da
   página (cartões, tabelas, listas) ficam no sistemas.css. Usa as variáveis do tema
   (site.css: --cartao, --cartao-borda, --mudo, --aurora...). Classes hn-*.

   CORES E BRILHO DOS TÍTULOS = as do jogo, variação "Noite - pulso forte"
   (cliente ui/dom2honra.py, tabela TITULOS; negativos = colorinfo.py do pack).
   Cada título define:
     --hn-rgb   cor do texto (R, G, B)
     --hn-aura  cor da aura atrás do título (Honrado em diante)
     --hn-amin / --hn-amax  opacidade mínima/máxima do pulso (alfa do jogo)
     --hn-per   período do pulso (ida e volta) - Honrado 2,6 s ... Imortal 1,4 s
     --hn-esc   escala da aura (o jogo estica a aura 100% ... 135%)
     --hn-raio / --hn-rmin / --hn-rmax / --hn-resc  raios (Mítico/Imortal),
                que pulsam AO CONTRÁRIO da aura (contrafase), como no jogo.
   prefers-reduced-motion: sem animação; o brilho fica parado no máximo.
   ============================================================================= */

/* =============================================================================
   TÍTULOS: cor + brilho pulsando (só CSS)
   ============================================================================= */
.hn-t { position: relative; display: inline-block; isolation: isolate; padding: 0 .2em; font-weight: 700;
  color: rgb(var(--hn-rgb, 255, 255, 255)); text-shadow: 0 1px 2px #000c; white-space: nowrap; }

/* AURA (Honrado em diante): elipse borrada atrás do texto, pulsando a opacidade */
.hn-t-honrado::before, .hn-t-glorioso::before, .hn-t-heroico::before, .hn-t-lendario::before,
.hn-t-mitico::before, .hn-t-imortal::before {
  content: ""; position: absolute; inset: -.45em -.55em; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(var(--hn-aura), .95) 0%, rgba(var(--hn-aura), .5) 38%, rgba(var(--hn-aura), 0) 70%);
  transform: scale(var(--hn-esc, 1));
  opacity: var(--hn-amin);
  /* alternate: metade do período para subir, metade para descer = 1 pulso por --hn-per */
  animation: hn-pulso calc(var(--hn-per) / 2) ease-in-out infinite alternate;
}
/* RAIOS (Mítico e Imortal): faixa horizontal de luz + brilho no centro, em contrafase */
.hn-t-mitico::after, .hn-t-imortal::after {
  content: ""; position: absolute; left: -.9em; right: -.9em; top: 50%; height: 1.1em; margin-top: -.55em; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 18% 50% at 50% 50%, rgba(var(--hn-raio), .9), rgba(var(--hn-raio), 0) 100%),
    linear-gradient(90deg, rgba(var(--hn-raio), 0) 0%, rgba(var(--hn-raio), .85) 50%, rgba(var(--hn-raio), 0) 100%) center / 100% 2px no-repeat,
    linear-gradient(90deg, rgba(var(--hn-raio), 0) 15%, rgba(var(--hn-raio), .45) 50%, rgba(var(--hn-raio), 0) 85%) center / 100% 6px no-repeat;
  transform: scaleX(var(--hn-resc, 1));
  opacity: var(--hn-rmin);
  animation: hn-pulso-raio calc(var(--hn-per) / 2) ease-in-out infinite alternate-reverse;   /* contrafase */
}
@keyframes hn-pulso      { from { opacity: var(--hn-amin); } to { opacity: var(--hn-amax); } }
@keyframes hn-pulso-raio { from { opacity: var(--hn-rmin); } to { opacity: var(--hn-rmax); } }

/* cores por título (dom2honra.py: cor do texto; aura = 1a camada do brilho; raios = 2a) */
.hn-t-neutro    { --hn-rgb: 255, 255, 255; font-weight: 600; }
.hn-t-valioso   { --hn-rgb: 150, 230, 140; }
.hn-t-integro   { --hn-rgb: 70, 205, 95; }
.hn-t-nobre     { --hn-rgb: 120, 205, 255; }
.hn-t-admiravel { --hn-rgb: 70, 130, 255; }
.hn-t-honrado   { --hn-rgb: 255, 215, 90;  --hn-aura: 255, 205, 70; --hn-amin: .30; --hn-amax: .62; --hn-per: 2.6s; --hn-esc: 1; }
.hn-t-glorioso  { --hn-rgb: 255, 165, 50;  --hn-aura: 255, 150, 40; --hn-amin: .35; --hn-amax: .70; --hn-per: 2.4s; --hn-esc: 1.05; }
.hn-t-heroico   { --hn-rgb: 195, 120, 255; --hn-aura: 170, 90, 255; --hn-amin: .40; --hn-amax: .78; --hn-per: 2.2s; --hn-esc: 1.10; }
.hn-t-lendario  { --hn-rgb: 240, 95, 225;  --hn-aura: 235, 70, 215; --hn-amin: .45; --hn-amax: .86; --hn-per: 2.0s; --hn-esc: 1.18; }
.hn-t-mitico    { --hn-rgb: 255, 95, 120;  --hn-aura: 255, 50, 90;  --hn-amin: .50; --hn-amax: .92; --hn-per: 1.8s; --hn-esc: 1.25;
                  --hn-raio: 255, 140, 170; --hn-rmin: .25; --hn-rmax: .65; --hn-resc: 1.40; }
.hn-t-imortal   { --hn-rgb: 255, 245, 215; --hn-aura: 255, 210, 80; --hn-amin: .55; --hn-amax: 1;   --hn-per: 1.4s; --hn-esc: 1.35;
                  --hn-raio: 255, 120, 40;  --hn-rmin: .35; --hn-rmax: .90; --hn-resc: 1.65; }
/* negativos: cores do pack (colorinfo.py TITLE_RGB_EVIL_1..4), sem brilho */
.hn-t-agressivo   { --hn-rgb: 207, 117, 0; }
.hn-t-fraudulento { --hn-rgb: 235, 83, 0; }
.hn-t-malicioso   { --hn-rgb: 227, 0, 0; }
.hn-t-cruel       { --hn-rgb: 255, 0, 0; }

/* quem pede menos movimento: brilho parado no máximo, sem pulsar */
@media (prefers-reduced-motion: reduce) {
  .hn-t::before { animation: none; opacity: var(--hn-amax); }
  .hn-t::after  { animation: none; opacity: var(--hn-rmax); }
}

/* ---------------- peças só da Honra ---------------- */
/* ícone "H" do jogo (arte 32x32 ampliada 8x): pixelado para não borrar */
.hn-h { flex-shrink: 0; width: 72px; height: 72px; image-rendering: pixelated; border-radius: 12px;
  box-shadow: 0 0 0 1px #ffd76a55, 0 0 28px #ffc94a40; }
@media (max-width: 640px) { .hn-h { width: 56px; height: 56px; } }