/* ================================================================ cosméticos
   Molduras (.fr), banners (.bn), nomes (.nm), anel de fala (.rg), raridade (.rar)
   e super reações (.spx). Cores sempre por variáveis inline; nada aqui depende do item. */

@property --fx-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

@keyframes fx-spin { to { --fx-a: 360deg; } }
@keyframes fx-hue { to { filter: hue-rotate(360deg); } }

/* ================================================================ molduras da foto */

/* --ft espessura, --fg folga até a foto, --fo distância total; acompanham o tamanho do avatar */
.avatar-wrap.fr, .avatar-wrap.rg {
  --ft: 2px;
  --fg: 2px;
  --fr-r: 30%;
  --fr-k: 0.4;
  --fo: calc(var(--ft) + var(--fg));
  isolation: isolate;
}
.avatar-wrap:is(.fr, .rg):is(.xs, :has(> .avatar.xs)) { --ft: 1.5px; --fg: 1px; }
.avatar-wrap:is(.fr, .rg):is(.sm, :has(> .avatar.sm)) { --ft: 1.5px; --fg: 1.5px; }
.avatar-wrap:is(.fr, .rg):is(.md, :has(> .avatar.md)) { --ft: 2.5px; --fg: 2px; }
.avatar-wrap:is(.fr, .rg):is(.xl, :has(> .avatar.xl)) { --ft: 4px; --fg: 3.5px; --fr-r: 28%; --fr-k: 0.44; }

.avatar-wrap.fr {
  --_f1: var(--f1, #ff7a18);
  --_f2: var(--f2, var(--_f1));
  --_f3: var(--f3, var(--_f2));
}
.avatar-wrap:is(.fr, .rg) > .status-dot { z-index: 3; }

/* a moldura manda no lugar do anel do rank */
.avatar-wrap.fr > .avatar { box-shadow: var(--fr-av, inset 0 1px 0 rgba(255, 255, 255, 0.25)); animation: none; }

/* ::before = anel (acima da foto, fora dela) · ::after = brilho atrás (ou peça extra) */
/* :where() deixa os estilos de cada moldura sobrescreverem esta base */
:where(.avatar-wrap).fr::before, :where(.avatar-wrap).fr::after {
  content: "";
  position: absolute;
  inset: calc(var(--fo) * -1);
  border-radius: calc(var(--fr-r) + var(--fo) * var(--fr-k));
  box-sizing: border-box;
  pointer-events: none;
}
:where(.avatar-wrap).fr::before { z-index: 1; }
:where(.avatar-wrap).fr::after { z-index: -1; }

/* anel com degradê: recorta o miolo com máscara */
.fr:is(.fr-solida, .fr-degrade, .fr-giratoria, .fr-pulsante, .fr-prisma, .fr-chamas, .fr-eletrica, .fr-holografica, .fr-cristal)::before {
  padding: var(--ft);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/* sólida */
.fr-solida::before { background: linear-gradient(155deg, color-mix(in srgb, var(--_f1) 55%, #fff), var(--_f1) 38%, color-mix(in srgb, var(--_f1) 78%, #000)); }
.fr-solida::after { box-shadow: 0 0 calc(var(--fo) * 1.6) color-mix(in srgb, var(--_f1) 38%, transparent); }

/* dupla: anel cheio + fio por fora */
.fr-dupla::before {
  border: var(--ft) solid var(--_f1);
  outline: max(1px, calc(var(--ft) * 0.55)) solid var(--_f2);
  outline-offset: max(1px, calc(var(--ft) * 0.45));
}
.fr-dupla::after { inset: calc(var(--fo) * -1 - var(--ft)); border-radius: calc(var(--fr-r) + (var(--fo) + var(--ft)) * var(--fr-k)); box-shadow: 0 0 calc(var(--fo) * 1.5) color-mix(in srgb, var(--_f2) 40%, transparent); }

/* neon: tubo claro com brilho forte dos dois lados */
.fr-neon::before {
  border: var(--ft) solid color-mix(in srgb, var(--_f1) 45%, #fff);
  box-shadow: 0 0 calc(var(--fo) * 0.7) var(--_f1), 0 0 calc(var(--fo) * 2) var(--_f1), 0 0 calc(var(--fo) * 4.5) color-mix(in srgb, var(--_f1) 55%, transparent);
}
.fr-neon::after { box-shadow: inset 0 0 calc(var(--fo) * 1.3) var(--_f1); }

/* tracejada: traços sobre um trilho apagado */
.fr-tracejada::before { border: var(--ft) dashed var(--_f1); }
.fr-tracejada::after { border: var(--ft) solid color-mix(in srgb, var(--_f2) 34%, transparent); box-shadow: 0 0 calc(var(--fo) * 1.4) color-mix(in srgb, var(--_f1) 28%, transparent); }

/* degradê */
.fr-degrade::before { background: linear-gradient(135deg, var(--_f1), var(--_f2) 52%, var(--_f3)); }
.fr-degrade::after { box-shadow: 0 0 calc(var(--fo) * 1.7) color-mix(in srgb, var(--_f2) 40%, transparent); }

/* giratória */
.fr-giratoria::before {
  background:
    conic-gradient(from var(--fx-a), transparent 0 60%, color-mix(in srgb, var(--_f3) 55%, #fff) 90%, #fff 94%, transparent 94.5%),
    conic-gradient(from var(--fx-a), var(--_f1), var(--_f2), var(--_f3), var(--_f1));
  animation: fx-spin 2.6s linear infinite;
}
.fr-giratoria::after { box-shadow: 0 0 calc(var(--fo) * 1.9) color-mix(in srgb, var(--_f2) 45%, transparent); }

/* pulsante */
.fr-pulsante::before { background: linear-gradient(160deg, color-mix(in srgb, var(--_f1) 55%, #fff), var(--_f1) 45%, var(--_f2)); }
.fr-pulsante::after {
  box-shadow: 0 0 calc(var(--fo) * 1.1) var(--_f1), 0 0 calc(var(--fo) * 3.4) color-mix(in srgb, var(--_f1) 70%, transparent), inset 0 0 calc(var(--fo) * 1.2) color-mix(in srgb, var(--_f1) 70%, transparent);
  opacity: 0.7;
  animation: fx-pulse 1.6s ease-in-out infinite;
}
@keyframes fx-pulse {
  0%, 100% { opacity: 0.15; transform: scale(0.97); }
  50% { opacity: 1; transform: scale(1.04); }
}

/* prisma: arco-íris que nasce da cor 1 e vai girando o tom */
.fr-prisma::before {
  background: conic-gradient(from var(--fx-a), var(--_f1), var(--_f2), var(--_f3), var(--_f1));
  background: conic-gradient(from var(--fx-a), var(--_f1), hsl(from var(--_f1) calc(h + 70) s l), color-mix(in srgb, var(--_f1) 30%, #fff), hsl(from var(--_f1) calc(h + 180) s l), hsl(from var(--_f1) calc(h + 270) s l), var(--_f1));
  animation: fx-spin 4s linear infinite, fx-hue 7s linear infinite;
}
.fr-prisma::after { box-shadow: 0 0 calc(var(--fo) * 2) color-mix(in srgb, var(--_f1) 55%, transparent); animation: fx-hue 7s linear infinite; }

/* chamas: anel que sobe + labaredas atrás */
.fr-chamas::before {
  background: linear-gradient(0deg, var(--_f1), var(--_f2) 25%, color-mix(in srgb, var(--_f1) 40%, #fff) 50%, var(--_f2) 75%, var(--_f1)) 0 0 / 100% 200%;
  animation: fx-rise 1.1s linear infinite;
}
@keyframes fx-rise { to { background-position: 0 200%; } }
.fr-chamas::after {
  inset: calc(var(--fo) * -1 - var(--flh, 50%)) calc(var(--fo) * -1 - 8%) 40%;
  border-radius: 0;
  background:
    radial-gradient(12% 50% at 20% 54%, color-mix(in srgb, var(--_f1) 45%, #fff) 0, var(--_f1) 20%, color-mix(in srgb, var(--_f2) 80%, transparent) 46%, transparent 74%),
    radial-gradient(14% 62% at 43% 52%, color-mix(in srgb, var(--_f1) 40%, #fff) 0, var(--_f1) 18%, color-mix(in srgb, var(--_f2) 80%, transparent) 46%, transparent 76%),
    radial-gradient(12% 54% at 64% 54%, color-mix(in srgb, var(--_f1) 45%, #fff) 0, var(--_f1) 20%, color-mix(in srgb, var(--_f2) 80%, transparent) 46%, transparent 74%),
    radial-gradient(10% 42% at 83% 56%, var(--_f1) 0, color-mix(in srgb, var(--_f2) 80%, transparent) 45%, transparent 74%),
    radial-gradient(9% 34% at 6% 60%, var(--_f2) 0, transparent 72%),
    radial-gradient(9% 34% at 96% 62%, var(--_f2) 0, transparent 72%),
    radial-gradient(62% 36% at 50% 52%, color-mix(in srgb, var(--_f2) 55%, transparent), transparent 75%);
  transform-origin: 50% 55%;
  animation: fx-flame 0.85s ease-in-out infinite alternate;
}
@keyframes fx-flame {
  0% { transform: scale(1, 0.9); opacity: 0.85; }
  30% { transform: scale(1.03, 1.08) translateX(-1.5%); opacity: 1; }
  55% { transform: scale(0.98, 0.95) translateX(1.5%); opacity: 0.8; }
  100% { transform: scale(1.02, 1.12); opacity: 1; }
}
.fr-chamas:is(.xs, .sm, :has(> .avatar:not(.md, .xl))) { --flh: 26%; }
.fr-chamas:is(.md, :has(> .avatar.md)) { --flh: 34%; }
.fr-chamas { --fr-av: 0 -2px calc(var(--fo) * 2) color-mix(in srgb, var(--_f1) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.25); }

/* elétrica: traços girando em sentidos opostos + faísca */
.fr-eletrica::before {
  background:
    repeating-conic-gradient(from var(--fx-a), var(--_f1) 0 9deg, transparent 9deg 22deg),
    repeating-conic-gradient(from calc(var(--fx-a) * -2), color-mix(in srgb, var(--_f2) 70%, #fff) 0 4deg, transparent 4deg 31deg),
    color-mix(in srgb, var(--_f2) 24%, transparent);
  animation: fx-spin 2.4s linear infinite;
}
.fr-eletrica::after { box-shadow: 0 0 calc(var(--fo) * 1.3) var(--_f1), 0 0 calc(var(--fo) * 3) color-mix(in srgb, var(--_f2) 55%, transparent); animation: fx-zap 1.9s steps(1) infinite; }
@keyframes fx-zap {
  0% { opacity: 0.9; }
  6% { opacity: 0.25; }
  9% { opacity: 1; }
  38% { opacity: 0.7; }
  41% { opacity: 0.15; }
  43% { opacity: 1; }
  72% { opacity: 0.8; }
}

/* holográfica: película furta-cor + reflexo passando */
.fr-holografica::before {
  background:
    linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.95) 46%, transparent 60%) 0 0 / 250% 100% no-repeat,
    linear-gradient(120deg, color-mix(in srgb, var(--_f1) 45%, #fff), #ffc9f0, color-mix(in srgb, var(--_f2) 45%, #fff), #c4fff1, color-mix(in srgb, var(--_f3) 45%, #fff), #fff1b5, color-mix(in srgb, var(--_f1) 45%, #fff)) 0 0 / 300% 100%;
  background-position: 150% 0, 0 0;
  animation: fx-holo 4.5s linear infinite;
}
@keyframes fx-holo { to { background-position: -50% 0, 150% 0; } }
.fr-holografica::after { box-shadow: 0 0 calc(var(--fo) * 1.7) color-mix(in srgb, var(--_f2) 40%, transparent), 0 0 calc(var(--fo) * 0.6) rgba(255, 255, 255, 0.3); }

/* órbita: fio fino + bolinha de luz dando a volta */
.fr-orbita {
  --orb: calc(var(--fo) - var(--ft) * 0.3);
}
.fr-orbita::before {
  border: max(1px, calc(var(--ft) * 0.6)) solid color-mix(in srgb, var(--_f1) 75%, transparent);
  box-shadow: 0 0 calc(var(--fo) * 1.3) color-mix(in srgb, var(--_f1) 32%, transparent), inset 0 0 calc(var(--fo) * 0.8) color-mix(in srgb, var(--_f1) 25%, transparent);
}
.fr-orbita::after {
  inset: auto;
  left: 0;
  top: 0;
  z-index: 2;
  width: calc(var(--ft) * 1.5 + 3px);
  height: calc(var(--ft) * 1.5 + 3px);
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 28%, color-mix(in srgb, var(--_f2) 60%, #fff) 50%, var(--_f2));
  box-shadow: 0 0 calc(var(--fo) * 0.9) var(--_f2), 0 0 calc(var(--fo) * 2.4) var(--_f1);
  offset-path: xywh(calc(var(--orb) * -1) calc(var(--orb) * -1) calc(100% + var(--orb) * 2) calc(100% + var(--orb) * 2) round calc(var(--fr-r) + var(--orb)));
  offset-anchor: 50% 50%;
  offset-rotate: 0deg;
  offset-distance: 14%;
  animation: fx-orbit 3.4s linear infinite;
}
@keyframes fx-orbit { from { offset-distance: 0%; } to { offset-distance: 100%; } }

/* pixel: degraus nos cantos, luz em cima e sombra embaixo */
.fr-pixel { --px: max(2px, calc(var(--ft) * 1.25)); }
.fr-pixel::before, .fr-pixel::after {
  inset: calc((var(--fg) + var(--px)) * -1);
  border-radius: 0;
  clip-path: polygon(evenodd,
    0 16%, 8% 16%, 8% 8%, 16% 8%, 16% 0, 84% 0, 84% 8%, 92% 8%, 92% 16%, 100% 16%,
    100% 84%, 92% 84%, 92% 92%, 84% 92%, 84% 100%, 16% 100%, 16% 92%, 8% 92%, 8% 84%, 0 84%, 0 16%,
    var(--px) calc(16% + var(--px)), calc(8% + var(--px)) calc(16% + var(--px)), calc(8% + var(--px)) calc(8% + var(--px)), calc(16% + var(--px)) calc(8% + var(--px)), calc(16% + var(--px)) var(--px),
    calc(84% - var(--px)) var(--px), calc(84% - var(--px)) calc(8% + var(--px)), calc(92% - var(--px)) calc(8% + var(--px)), calc(92% - var(--px)) calc(16% + var(--px)), calc(100% - var(--px)) calc(16% + var(--px)),
    calc(100% - var(--px)) calc(84% - var(--px)), calc(92% - var(--px)) calc(84% - var(--px)), calc(92% - var(--px)) calc(92% - var(--px)), calc(84% - var(--px)) calc(92% - var(--px)), calc(84% - var(--px)) calc(100% - var(--px)),
    calc(16% + var(--px)) calc(100% - var(--px)), calc(16% + var(--px)) calc(92% - var(--px)), calc(8% + var(--px)) calc(92% - var(--px)), calc(8% + var(--px)) calc(84% - var(--px)), var(--px) calc(84% - var(--px)),
    var(--px) calc(16% + var(--px)));
}
.fr-pixel::before { background: conic-gradient(from -45deg, color-mix(in srgb, var(--_f1) 62%, #fff) 0 25%, color-mix(in srgb, var(--_f1) 55%, var(--_f2)) 0 50%, color-mix(in srgb, var(--_f2) 82%, #000) 0 75%, var(--_f1) 0); }
.fr-pixel::after { background: color-mix(in srgb, var(--_f2) 40%, #000); transform: translate(max(1px, calc(var(--ft) * 0.5)), max(1px, calc(var(--ft) * 0.5))); }

/* cristal: lapidado, fio interno e um brilho que pisca no canto */
.fr-cristal { --fr-av: 0 0 0 1px color-mix(in srgb, var(--_f1) 35%, #fff), 0 0 calc(var(--fo) * 2) color-mix(in srgb, var(--_f2) 38%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.fr-cristal::before {
  background: conic-gradient(from 22deg,
    color-mix(in srgb, var(--_f1) 40%, #fff) 0 12.5%, var(--_f1) 0 25%, color-mix(in srgb, var(--_f2) 75%, #000) 0 37.5%, color-mix(in srgb, var(--_f3) 55%, #fff) 0 50%,
    color-mix(in srgb, var(--_f1) 85%, #000) 0 62.5%, color-mix(in srgb, var(--_f2) 55%, #fff) 0 75%, var(--_f3) 0 87.5%, color-mix(in srgb, var(--_f1) 25%, #fff) 0);
}
.fr-cristal::after {
  --gs: calc(var(--fo) * 2.4 + 7px);
  inset: auto;
  z-index: 2;
  width: var(--gs);
  height: var(--gs);
  top: calc(8.8% - var(--fo) * 0.707 - var(--gs) / 2);
  right: calc(8.8% - var(--fo) * 0.707 - var(--gs) / 2);
  border-radius: 50%;
  background:
    radial-gradient(50% 7% at 50% 50%, #fff, transparent),
    radial-gradient(7% 50% at 50% 50%, #fff, transparent),
    radial-gradient(circle, #fff 0 9%, color-mix(in srgb, var(--_f1) 50%, transparent) 20%, transparent 48%);
  transform: scale(0.75) rotate(15deg);
  animation: fx-glint 3.6s ease-in-out infinite;
}
@keyframes fx-glint {
  0%, 52% { transform: scale(0) rotate(0deg); opacity: 0; }
  64% { transform: scale(1) rotate(45deg); opacity: 1; }
  78%, 100% { transform: scale(0) rotate(90deg); opacity: 0; }
}

/* falando: a moldura fica e o verde aparece colado na foto */
.avatar-wrap.fr.speaking > .avatar, .speaking > .avatar-wrap.fr > .avatar {
  animation: none;
  box-shadow: 0 0 0 var(--fg) var(--green), 0 0 calc(var(--fo) * 3) rgba(43, 255, 154, 0.6);
}

/* ================================================================ anel de fala */

.avatar-wrap.rg, .tile.rg { --_r1: var(--r1, #2bff9a); --_r2: var(--r2, #29e6ff); }
.avatar-wrap.rg {
  --rg-ring: 0 0 0 var(--fg) var(--bg-2), 0 0 0 var(--fo) var(--_r1);
  --rg-in: var(--fg);
  --rg-out: var(--fo);
  --rg-wave: 9px;
  --rg-sp: 5px;
}
.avatar-wrap.rg.fr { --rg-ring: 0 0 0 var(--fg) var(--_r1); --rg-in: 0px; --rg-out: var(--fg); }
.avatar-wrap.rg:is(.xs, .sm, :has(> .avatar.xs), :has(> .avatar.sm)) { --rg-wave: 6px; --rg-sp: 3px; }
.avatar-wrap.rg:is(.xl, :has(> .avatar.xl)) { --rg-wave: 18px; --rg-sp: 10px; }

.avatar-wrap.rg.speaking > .avatar, .speaking > .avatar-wrap.rg > .avatar {
  animation: none;
  box-shadow: var(--rg-ring), 0 0 calc(var(--fo) * 3.5) color-mix(in srgb, var(--_r1) 55%, transparent);
}
.avatar-wrap.rg-fixo.speaking > .avatar, .speaking > .avatar-wrap.rg-fixo > .avatar {
  box-shadow: var(--rg-ring), 0 0 calc(var(--fo) * 3.5) color-mix(in srgb, var(--_r2) 60%, transparent);
}
.avatar-wrap.rg-pulso.speaking > .avatar, .speaking > .avatar-wrap.rg-pulso > .avatar { animation: rg-av-pulse 0.9s ease-in-out infinite alternate; }
@keyframes rg-av-pulse {
  from { box-shadow: var(--rg-ring), 0 0 calc(var(--fo) * 1.5) color-mix(in srgb, var(--_r1) 50%, transparent); }
  to { box-shadow: var(--rg-ring), 0 0 calc(var(--fo) * 5) color-mix(in srgb, var(--_r2) 85%, transparent); }
}
.avatar-wrap.rg-onda.speaking > .avatar, .speaking > .avatar-wrap.rg-onda > .avatar { animation: rg-av-wave 1.2s ease-out infinite; }
@keyframes rg-av-wave {
  from { box-shadow: var(--rg-ring), 0 0 0 var(--fo) color-mix(in srgb, var(--_r1) 70%, transparent), 0 0 0 var(--fo) color-mix(in srgb, var(--_r2) 55%, transparent); }
  to { box-shadow: var(--rg-ring), 0 0 0 calc(var(--fo) + var(--rg-wave)) color-mix(in srgb, var(--_r1) 0%, transparent), 0 0 0 calc(var(--fo) + var(--rg-wave) * 1.7) color-mix(in srgb, var(--_r2) 0%, transparent); }
}
.avatar-wrap.rg-arco.speaking > .avatar, .speaking > .avatar-wrap.rg-arco > .avatar,
.avatar-wrap.rg-faisca.speaking > .avatar, .speaking > .avatar-wrap.rg-faisca > .avatar {
  box-shadow: 0 0 calc(var(--fo) * 3) color-mix(in srgb, var(--_r1) 45%, transparent);
}
.avatar-wrap.rg-faisca.speaking > .avatar, .speaking > .avatar-wrap.rg-faisca > .avatar { box-shadow: var(--rg-ring), 0 0 calc(var(--fo) * 3) color-mix(in srgb, var(--_r1) 50%, transparent); }

/* arco e faísca usam o ::after (no lugar do brilho da moldura enquanto fala) */
.avatar-wrap.rg-arco.speaking::after, .speaking > .avatar-wrap.rg-arco::after,
.avatar-wrap.rg-faisca.speaking::after, .speaking > .avatar-wrap.rg-faisca::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
  box-sizing: border-box;
  border: 0;
  outline: 0;
  box-shadow: none;
  clip-path: none;
  filter: none;
  opacity: 1;
  offset-path: none;
  transform: none;
}
.avatar-wrap.rg-arco.speaking::after, .speaking > .avatar-wrap.rg-arco::after {
  inset: calc(var(--rg-out) * -1);
  width: auto;
  height: auto;
  border-radius: calc(var(--fr-r) + var(--rg-out) * var(--fr-k));
  padding: calc(var(--rg-out) - var(--rg-in));
  background: conic-gradient(from var(--fx-a), color-mix(in srgb, var(--_r1) 22%, transparent) 0 35%, var(--_r2) 72%, var(--_r1) 97%, color-mix(in srgb, var(--_r1) 22%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: fx-spin 1.1s linear infinite;
}
.avatar-wrap.rg-faisca.speaking::after, .speaking > .avatar-wrap.rg-faisca::after {
  z-index: 2;
  inset: calc((var(--fo) + var(--rg-sp)) * -1);
  width: auto;
  height: auto;
  padding: 0;
  border-radius: 0;
  -webkit-mask: none;
  mask: none;
  background:
    radial-gradient(circle at 14% 10%, #fff 0 1px, color-mix(in srgb, var(--_r1) 80%, transparent) 1.5px, transparent 3.5px),
    radial-gradient(circle at 90% 18%, var(--_r2) 0 1px, transparent 3px),
    radial-gradient(circle at 97% 64%, #fff 0 0.8px, color-mix(in srgb, var(--_r1) 70%, transparent) 1.5px, transparent 3px),
    radial-gradient(circle at 68% 97%, var(--_r1) 0 1px, transparent 3px),
    radial-gradient(circle at 20% 92%, #fff 0 1px, color-mix(in srgb, var(--_r2) 70%, transparent) 1.5px, transparent 3.5px),
    radial-gradient(circle at 3% 44%, var(--_r2) 0 0.8px, transparent 2.6px),
    radial-gradient(circle at 50% 2%, var(--_r1) 0 0.8px, transparent 2.6px);
  animation: rg-sparkle 1.3s steps(4) infinite;
}
@keyframes rg-sparkle {
  0% { opacity: 1; transform: rotate(0deg) scale(1); }
  50% { opacity: 0.45; transform: rotate(14deg) scale(1.05); }
  100% { opacity: 1; transform: rotate(28deg) scale(0.97); }
}

/* sala de voz: borda, brilho, cantos e o anel da foto grande */
.tile.speaking.rg { border-color: var(--_r1); box-shadow: 0 0 0 1px var(--_r1), 0 0 28px color-mix(in srgb, var(--_r1) 38%, transparent), 0 10px 30px rgba(0, 0, 0, 0.35); }
.tile.speaking.rg .tile-frame { --frame: var(--_r1); opacity: 1; }
.tile.rg .tile-avatar { position: relative; }
.tile.speaking.rg .tile-avatar .avatar { animation: none; box-shadow: 0 0 0 3px var(--_r1), 0 0 26px color-mix(in srgb, var(--_r1) 55%, transparent); }

.tile.speaking.rg-fixo .tile-frame { --frame: var(--_r2); }
.tile.speaking.rg-fixo .tile-avatar .avatar { box-shadow: 0 0 0 3px var(--_r1), 0 0 0 6px color-mix(in srgb, var(--_r2) 35%, transparent), 0 0 26px color-mix(in srgb, var(--_r2) 50%, transparent); }

.tile.speaking.rg-pulso { animation: rg-tile-pulse 0.9s ease-in-out infinite alternate; }
@keyframes rg-tile-pulse {
  from { border-color: var(--_r1); box-shadow: 0 0 0 1px var(--_r1), 0 0 12px color-mix(in srgb, var(--_r1) 25%, transparent), 0 10px 30px rgba(0, 0, 0, 0.35); }
  to { border-color: var(--_r2); box-shadow: 0 0 0 2px var(--_r2), 0 0 44px color-mix(in srgb, var(--_r2) 55%, transparent), 0 10px 30px rgba(0, 0, 0, 0.35); }
}
.tile.speaking.rg-pulso .tile-avatar .avatar { animation: rg-tile-av-pulse 0.9s ease-in-out infinite alternate; }
@keyframes rg-tile-av-pulse {
  from { box-shadow: 0 0 0 3px var(--_r1), 0 0 10px color-mix(in srgb, var(--_r1) 40%, transparent); }
  to { box-shadow: 0 0 0 4px var(--_r2), 0 0 42px color-mix(in srgb, var(--_r2) 75%, transparent); }
}

.tile.speaking.rg-onda { animation: rg-tile-wave 1.3s ease-out infinite; }
@keyframes rg-tile-wave {
  from { box-shadow: 0 0 0 1px var(--_r1), 0 0 0 1px color-mix(in srgb, var(--_r1) 70%, transparent), 0 0 22px color-mix(in srgb, var(--_r1) 30%, transparent), 0 10px 30px rgba(0, 0, 0, 0.35); }
  to { box-shadow: 0 0 0 1px var(--_r1), 0 0 0 14px color-mix(in srgb, var(--_r1) 0%, transparent), 0 0 22px color-mix(in srgb, var(--_r1) 30%, transparent), 0 10px 30px rgba(0, 0, 0, 0.35); }
}
.tile.speaking.rg-onda .tile-avatar .avatar { animation: rg-tile-av-wave 1.3s ease-out infinite; }
@keyframes rg-tile-av-wave {
  from { box-shadow: 0 0 0 3px var(--_r1), 0 0 0 3px color-mix(in srgb, var(--_r1) 60%, transparent), 0 0 0 3px color-mix(in srgb, var(--_r2) 45%, transparent); }
  to { box-shadow: 0 0 0 3px var(--_r1), 0 0 0 22px color-mix(in srgb, var(--_r1) 0%, transparent), 0 0 0 36px color-mix(in srgb, var(--_r2) 0%, transparent); }
}

.tile.speaking:is(.rg-arco, .rg-faisca) { border-color: color-mix(in srgb, var(--_r1) 35%, transparent); }
.tile.speaking:is(.rg-arco, .rg-faisca)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 2px;
  border-radius: inherit;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: fx-spin 1.6s linear infinite;
}
.tile.speaking.rg-arco::before { padding: 3px; background: conic-gradient(from var(--fx-a), color-mix(in srgb, var(--_r1) 18%, transparent) 0 22%, var(--_r2) 58%, var(--_r1) 86%, #fff 89%, color-mix(in srgb, var(--_r1) 18%, transparent) 90%); }
.tile.speaking.rg-arco .tile-frame { --frame: var(--_r2); }
.tile.speaking.rg-faisca::before {
  padding: 2px;
  background: repeating-conic-gradient(from var(--fx-a), transparent 0 11deg, var(--_r1) 12deg, #fff 13deg, var(--_r2) 14deg, transparent 15deg 24deg);
  animation-duration: 4s;
}
.tile.speaking.rg-faisca .tile-frame { animation: rg-corner-twinkle 0.8s steps(2) infinite; }
@keyframes rg-corner-twinkle { 50% { --frame: var(--_r2); opacity: 0.55; } }

.tile.speaking:is(.rg-arco, .rg-faisca) .tile-avatar::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: calc(28% + 3px);
  padding: 3px;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: fx-spin 1.1s linear infinite;
}
.tile.speaking.rg-arco .tile-avatar::before { background: conic-gradient(from var(--fx-a), color-mix(in srgb, var(--_r1) 25%, transparent) 0 30%, var(--_r2) 68%, var(--_r1) 94%, #fff 96%, color-mix(in srgb, var(--_r1) 25%, transparent) 97%); }
.tile.speaking.rg-arco .tile-avatar .avatar { box-shadow: 0 0 30px color-mix(in srgb, var(--_r1) 45%, transparent); }
.tile.speaking.rg-faisca .tile-avatar::before { background: repeating-conic-gradient(from var(--fx-a), transparent 0 16deg, var(--_r1) 18deg, #fff 19deg, var(--_r2) 21deg, transparent 23deg 36deg); animation-duration: 3s; }
.tile.speaking.rg-faisca .tile-avatar::after {
  content: "";
  position: absolute;
  inset: -16px;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 14%, #fff 0 1.2px, color-mix(in srgb, var(--_r1) 80%, transparent) 2px, transparent 5px),
    radial-gradient(circle at 92% 8%, var(--_r2) 0 1.2px, transparent 4px),
    radial-gradient(circle at 98% 70%, #fff 0 1px, color-mix(in srgb, var(--_r2) 70%, transparent) 2px, transparent 4.5px),
    radial-gradient(circle at 60% 99%, var(--_r1) 0 1.2px, transparent 4px),
    radial-gradient(circle at 4% 62%, #fff 0 1px, color-mix(in srgb, var(--_r1) 70%, transparent) 2px, transparent 4.5px);
  animation: rg-sparkle 1.3s steps(4) infinite;
}

/* ================================================================ banners de perfil */

:where(.bn) { position: relative; }
.bn {
  --_b1: var(--b1, #ff7a18);
  --_b2: var(--b2, var(--_b1));
  --_b3: var(--b3, var(--_b2));
  --bk: #06070b;
  --d1: color-mix(in srgb, var(--_b1) 52%, var(--bk));
  --d2: color-mix(in srgb, var(--_b2) 46%, var(--bk));
  --d3: color-mix(in srgb, var(--_b3) 42%, var(--bk));
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(125deg, var(--d1), var(--d2) 55%, var(--d3));
}
.bn::before, .bn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: none;
  mix-blend-mode: normal;
  -webkit-mask: none;
  mask: none;
}
/* no Início o texto fica à esquerda: o banner apaga desse lado.
   (.home-hero > * deixaria o fundo com altura zero, por isso reposiciona aqui) */
.home-hero > .home-hero-bg.bn { position: absolute; inset: 0; z-index: 0; }
.home-hero-bg.bn {
  -webkit-mask: linear-gradient(90deg, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.62) 40%, #000 80%);
  mask: linear-gradient(90deg, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.62) 40%, #000 80%);
}

/* liso */
.bn-liso {
  background:
    radial-gradient(90% 130% at 96% 0%, color-mix(in srgb, var(--_b1) 62%, transparent), transparent 62%),
    radial-gradient(80% 120% at 0% 100%, color-mix(in srgb, var(--_b3) 45%, transparent), transparent 60%),
    linear-gradient(125deg, var(--d1), var(--d2) 50%, var(--d3));
}
.bn-liso::after { background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, 0.08) 48%, rgba(255, 255, 255, 0.02) 56%, transparent 64%), linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 35%, rgba(0, 0, 0, 0.22)); }

/* diagonal */
.bn-diagonal::before {
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--_b2) 55%, #fff 8%) 0 2px, transparent 2px 11px);
  opacity: 0.45;
  -webkit-mask: linear-gradient(90deg, transparent 8%, #000 75%);
  mask: linear-gradient(90deg, transparent 8%, #000 75%);
}
.bn-diagonal::after { background: linear-gradient(110deg, transparent 0 63%, color-mix(in srgb, var(--_b1) 85%, transparent) 63% 68%, transparent 68% 70.5%, color-mix(in srgb, var(--_b3) 85%, transparent) 70.5% 73%, transparent 73% 75%, color-mix(in srgb, var(--_b2) 60%, transparent) 75% 76%, transparent 76%); }

/* grade: chão de grade em perspectiva */
.bn-grade { background: linear-gradient(180deg, color-mix(in srgb, var(--_b1) 20%, var(--bk)) 0%, color-mix(in srgb, var(--_b2) 42%, var(--bk)) 58%, color-mix(in srgb, var(--_b3) 26%, var(--bk)) 100%); }
.bn-grade::before {
  inset: 58% -60% -50%;
  background:
    linear-gradient(color-mix(in srgb, var(--_b3) 85%, #fff 15%) 1.5px, transparent 1.5px) 0 0 / 34px 24px,
    linear-gradient(90deg, color-mix(in srgb, var(--_b3) 85%, #fff 15%) 1.5px, transparent 1.5px) 0 0 / 34px 24px;
  transform: perspective(130px) rotateX(58deg);
  transform-origin: 50% 0;
  opacity: 0.75;
  -webkit-mask: linear-gradient(180deg, transparent, #000 45%);
  mask: linear-gradient(180deg, transparent, #000 45%);
}
.bn-grade::after {
  background:
    linear-gradient(90deg, transparent 4%, var(--_b1) 32%, var(--_b3) 68%, transparent 96%) 0 58% / 100% 2px no-repeat,
    radial-gradient(45% 55% at 50% 58%, color-mix(in srgb, var(--_b1) 38%, transparent), transparent 72%),
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 100% 7px;
}

/* pontos: meio-tom */
.bn-pontos::before {
  background: radial-gradient(circle, color-mix(in srgb, var(--_b3) 80%, #fff 20%) 1.1px, transparent 1.7px) 0 0 / 12px 12px;
  opacity: 0.6;
  -webkit-mask: linear-gradient(100deg, transparent 12%, #000 80%);
  mask: linear-gradient(100deg, transparent 12%, #000 80%);
}
.bn-pontos::after {
  background: radial-gradient(circle, color-mix(in srgb, var(--_b1) 90%, #fff) 2.4px, transparent 3px) 6px 6px / 12px 12px;
  opacity: 0.75;
  -webkit-mask: radial-gradient(75% 130% at 100% 0%, #000 8%, transparent 70%);
  mask: radial-gradient(75% 130% at 100% 0%, #000 8%, transparent 70%);
}

/* ondas */
.bn-ondas::before {
  background: linear-gradient(90deg, var(--_b1), var(--_b2), var(--_b3));
  opacity: 0.55;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='24'%3E%3Cpath d='M0 12Q40 0 80 12T160 12' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") 0 0 / 160px 24px, linear-gradient(90deg, transparent 5%, #000 70%);
  -webkit-mask-composite: source-in;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='24'%3E%3Cpath d='M0 12Q40 0 80 12T160 12' fill='none' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") 0 0 / 160px 24px, linear-gradient(90deg, transparent 5%, #000 70%);
  mask-composite: intersect;
}
.bn-ondas::after {
  background: linear-gradient(90deg, color-mix(in srgb, var(--_b1) 70%, transparent), color-mix(in srgb, var(--_b3) 80%, transparent));
  opacity: 0.6;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M0 58C70 18 130 22 200 52S330 92 400 40V100H0Z' fill-opacity='.55'/%3E%3Cpath d='M0 80C80 52 150 62 220 78S340 92 400 66V100H0Z'/%3E%3C/svg%3E") 0 100% / 100% 62% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M0 58C70 18 130 22 200 52S330 92 400 40V100H0Z' fill-opacity='.55'/%3E%3Cpath d='M0 80C80 52 150 62 220 78S340 92 400 66V100H0Z'/%3E%3C/svg%3E") 0 100% / 100% 62% no-repeat;
}

/* hexágonos */
.bn-hexagonos::before {
  background: linear-gradient(120deg, var(--_b2), var(--_b3));
  opacity: 0.7;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='45'%3E%3Cpath d='M13 7.5L26 15V30L13 37.5L0 30V15ZM13 0V7.5M13 37.5V45' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") 0 0 / 26px 45px, radial-gradient(90% 150% at 100% 25%, #000 12%, transparent 75%);
  -webkit-mask-composite: source-in;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='45'%3E%3Cpath d='M13 7.5L26 15V30L13 37.5L0 30V15ZM13 0V7.5M13 37.5V45' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") 0 0 / 26px 45px, radial-gradient(90% 150% at 100% 25%, #000 12%, transparent 75%);
  mask-composite: intersect;
}
.bn-hexagonos::after { background: radial-gradient(45% 90% at 90% 15%, color-mix(in srgb, var(--_b1) 42%, transparent), transparent 70%), radial-gradient(30% 70% at 70% 100%, color-mix(in srgb, var(--_b3) 30%, transparent), transparent 70%); }

/* circuito */
.bn-circuito { background: linear-gradient(125deg, color-mix(in srgb, var(--_b1) 30%, var(--bk)), color-mix(in srgb, var(--_b2) 36%, var(--bk)) 60%, color-mix(in srgb, var(--_b3) 30%, var(--bk))); }
.bn-circuito::before {
  background: linear-gradient(90deg, var(--_b1), color-mix(in srgb, var(--_b2) 70%, #fff), var(--_b3));
  opacity: 0.75;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M0 20H52L60 28H85M108 20H120M0 92H22L34 104H63M120 92H108L96 80V64M100 0V40L86 54H62M100 120V112M44 104V120M44 0V8M14 20V40L24 50M76 28V12M62 66V61M68 66V61M74 66V61M62 80V85M68 80V85M74 80V85'/%3E%3Crect x='57' y='66' width='22' height='14' rx='2'/%3E%3Cg fill='%23000' stroke='none'%3E%3Ccircle cx='88' cy='28' r='3'/%3E%3Ccircle cx='105' cy='20' r='3'/%3E%3Ccircle cx='66' cy='104' r='3'/%3E%3Ccircle cx='96' cy='61' r='3'/%3E%3Ccircle cx='59' cy='54' r='3'/%3E%3Ccircle cx='100' cy='109' r='3'/%3E%3Ccircle cx='44' cy='11' r='3'/%3E%3Ccircle cx='26' cy='52' r='2.6'/%3E%3Ccircle cx='76' cy='9' r='2.6'/%3E%3C/g%3E%3Ccircle cx='28' cy='80' r='4.5'/%3E%3Ccircle cx='112' cy='42' r='4.5'/%3E%3C/svg%3E") 0 0 / 120px 120px, linear-gradient(95deg, transparent 6%, #000 70%);
  -webkit-mask-composite: source-in;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M0 20H52L60 28H85M108 20H120M0 92H22L34 104H63M120 92H108L96 80V64M100 0V40L86 54H62M100 120V112M44 104V120M44 0V8M14 20V40L24 50M76 28V12M62 66V61M68 66V61M74 66V61M62 80V85M68 80V85M74 80V85'/%3E%3Crect x='57' y='66' width='22' height='14' rx='2'/%3E%3Cg fill='%23000' stroke='none'%3E%3Ccircle cx='88' cy='28' r='3'/%3E%3Ccircle cx='105' cy='20' r='3'/%3E%3Ccircle cx='66' cy='104' r='3'/%3E%3Ccircle cx='96' cy='61' r='3'/%3E%3Ccircle cx='59' cy='54' r='3'/%3E%3Ccircle cx='100' cy='109' r='3'/%3E%3Ccircle cx='44' cy='11' r='3'/%3E%3Ccircle cx='26' cy='52' r='2.6'/%3E%3Ccircle cx='76' cy='9' r='2.6'/%3E%3C/g%3E%3Ccircle cx='28' cy='80' r='4.5'/%3E%3Ccircle cx='112' cy='42' r='4.5'/%3E%3C/svg%3E") 0 0 / 120px 120px, linear-gradient(95deg, transparent 6%, #000 70%);
  mask-composite: intersect;
}
.bn-circuito::after { background: radial-gradient(55% 100% at 88% 40%, color-mix(in srgb, var(--_b2) 34%, transparent), transparent 70%), linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.025) 1px, transparent 2px) 0 0 / 6px 100%; }

/* estrelas */
.bn-estrelas, .bn-galaxia {
  --stars-a:
    radial-gradient(circle at 17px 23px, #fff 0 0.8px, transparent 1.5px) 0 0 / 97px 61px,
    radial-gradient(circle at 71px 9px, rgba(255, 255, 255, 0.85) 0 0.7px, transparent 1.3px) 0 0 / 131px 83px,
    radial-gradient(circle at 40px 70px, #fff 0 1px, transparent 1.8px) 0 0 / 157px 113px,
    radial-gradient(circle at 120px 40px, rgba(255, 255, 255, 0.7) 0 0.6px, transparent 1.2px) 0 0 / 181px 71px,
    radial-gradient(circle at 9px 44px, rgba(255, 255, 255, 0.75) 0 0.6px, transparent 1.1px) 0 0 / 59px 53px;
  --stars-b:
    radial-gradient(circle at 30px 30px, color-mix(in srgb, var(--_b3) 40%, #fff) 0 1.2px, transparent 2.3px) 0 0 / 173px 97px,
    radial-gradient(circle at 90px 14px, #fff 0 1.1px, transparent 2.1px) 0 0 / 223px 131px,
    radial-gradient(circle at 60px 60px, color-mix(in srgb, var(--_b1) 45%, #fff) 0 0.9px, transparent 1.8px) 0 0 / 139px 79px,
    radial-gradient(circle at 7px 7px, rgba(255, 255, 255, 0.8) 0 0.7px, transparent 1.3px) 0 0 / 67px 47px;
}
.bn-estrelas {
  background:
    radial-gradient(70% 120% at 85% 10%, color-mix(in srgb, var(--_b1) 42%, transparent), transparent 65%),
    radial-gradient(60% 100% at 10% 100%, color-mix(in srgb, var(--_b3) 34%, transparent), transparent 70%),
    linear-gradient(160deg, color-mix(in srgb, var(--_b2) 24%, #04050a), #04050a);
}
.bn-estrelas::before { background: var(--stars-a); }
.bn-estrelas::after {
  background:
    radial-gradient(0.8px 7px at 78% 30%, #fff, transparent),
    radial-gradient(7px 0.8px at 78% 30%, #fff, transparent),
    radial-gradient(circle at 78% 30%, color-mix(in srgb, var(--_b1) 50%, #fff) 0 1.4px, transparent 4px),
    radial-gradient(0.8px 5px at 34% 64%, #fff, transparent),
    radial-gradient(5px 0.8px at 34% 64%, #fff, transparent),
    var(--stars-b);
}

/* raios */
.bn-raios::before {
  background: repeating-conic-gradient(from 0deg at 82% 118%, color-mix(in srgb, var(--_b1) 50%, transparent) 0 4deg, transparent 4deg 11deg);
  -webkit-mask: radial-gradient(circle at 82% 118%, #000 18%, transparent 78%);
  mask: radial-gradient(circle at 82% 118%, #000 18%, transparent 78%);
}
.bn-raios::after { background: radial-gradient(16% 34% at 82% 108%, rgba(255, 255, 255, 0.5), transparent 70%), radial-gradient(55% 95% at 82% 112%, color-mix(in srgb, var(--_b3) 62%, transparent), transparent 70%); }

/* xadrez */
.bn-xadrez::before {
  background: repeating-conic-gradient(color-mix(in srgb, var(--_b2) 60%, #fff 6%) 0 25%, transparent 0 50%) 0 0 / 22px 22px;
  opacity: 0.55;
  -webkit-mask: linear-gradient(105deg, transparent 22%, #000 92%);
  mask: linear-gradient(105deg, transparent 22%, #000 92%);
}
.bn-xadrez::after { background: linear-gradient(105deg, transparent 0 54%, color-mix(in srgb, var(--_b3) 70%, transparent) 54% 55.2%, transparent 55.2% 57%, color-mix(in srgb, var(--_b1) 60%, transparent) 57% 57.8%, transparent 57.8%), radial-gradient(50% 100% at 100% 0%, color-mix(in srgb, var(--_b1) 30%, transparent), transparent 70%); }

/* scanlines: tela de tubo */
.bn-scanlines { background: linear-gradient(115deg, color-mix(in srgb, var(--_b1) 68%, var(--bk)), color-mix(in srgb, var(--_b2) 58%, var(--bk)) 50%, color-mix(in srgb, var(--_b3) 66%, var(--bk))); }
.bn-scanlines::before { background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.42) 0 1px, transparent 1px 3px), radial-gradient(130% 150% at 50% 50%, transparent 45%, rgba(0, 0, 0, 0.6)); }
.bn-scanlines::after {
  top: -40%;
  bottom: auto;
  height: 40%;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.07) 70%, rgba(255, 255, 255, 0.16) 72%, transparent 75%);
  animation: bn-scan 6s linear infinite;
}
@keyframes bn-scan { to { transform: translateY(350%); } }

/* topográfico */
.bn-topografico::before {
  background: linear-gradient(100deg, var(--_b1), var(--_b2) 50%, var(--_b3));
  opacity: 0.6;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='180'%3E%3Cpath d='M24 101l0 0M27 96l0 0M330 54l0 0M24 93l0 0M234 143l0 0M267 0l6 2l6-1l4-1M327 45l0 0M21 90l0 0M283 180l6-3l3-3l1-3l0-3l-1-3l-2-3l-4-3l-13-7l-18-12l-6-3l-9-1l-10 2l-32 17l-4 4l-2 3l-1 3l0 3l4 4l6 1l6 1l15 1l24-2l6 1l6 1l9 5M144 3l0 0M233 0l7 1l6 3l6 5l9 10l3 2l6 2l3 0l4-2l8-9l12-12M0 54l3-6l1-3l-1-3l-3-3M360 39l-6-2l-9 0l-27 4l-10 4l-2 3l-1 3l0 3l3 6l6 6l5 3l5 2l9 2l9-1l6-3l3-3l9-12M165 77l0 0M0 130l12 2l24-1l15-1l9-3l6-4l3-5l5-13l2-9l0-3l-2-3l-2-3l-7-3l-11-1l-30 3l-12 2l-4 2l-4 3l-4 6M360 99l-3 12l-3 12l1 3l2 3l3 1M297 180l4-6l0-6l-1-5l-3-4l-4-3l-17-9l-21-12l-9-3l-6 0l-6 0l-8 3l-31 17l-8 7l-2 3l-3 6l0 3l1 3l6 2l44 4M135 0l-7 3l-5 5l-9 19l0 3l0 5l3 3l3 1l3-1l11-5l25-9l8-6l10-11l3-2l6-3l9-1l24 1l9 2l6 2l9 5l12 13l6 5l6 2l6 2l12 1l3-1l1-3l3-12l13-18M117 21l0 0M0 65l10-14l2-6l0-3l-1-3l-2-2l-3-2l-6-2M360 33l-6-1l-9 0l-42 5l-6 2l-1 3l2 9l2 6l5 6l7 7l9 4l15 3l12 0l3-1l3-2l6-9M162 72l0 0M0 136l54-3l6-1l6-2l3-2l4-5l5-10l6-11l2-6l-1-6l-4-6l-6-4l-9-2l-12 0l-21 3l-24 3l-6 1l-3 2M360 87l-3 6l-5 18l-7 18l1 3l4 3l10 1M305 180l2-6l0-9l-2-6l-3-3l-5-3l-18-9l-21-11l-9-4l-9-1l-9 1l-6 2l-33 19l-8 6l-10 13l-6 5l-6 2l-18 2l-9 2M121 0l-6 6l-12 18l-1 3l-1 6l2 6l4 6l4 3l3 1l6 2l6-1l3-2l10-9l4-3l22-11l6-4l12-11l6-3l9-2l15 0l12 2l9 4l5 4l10 11l6 6l8 4l16 6l6 3l6 6l11 15l7 6l12 6l23 6l5 3l1 3l1 6l-2 12l-4 9l-9 12l-1 3l0 3l2 3l5 2l6 1l12-1M310 0l-8 18l0 3l1 3l3 4l6 2l6 0l27-2l15 1M0 140l27-4l15 0l24 1l9-2l3-3l6-14l3-4l9-9l3-3l0-3l-2-6l-7-10l-7-5l-8-3l-9-2l-9 0l-24 4l-12 1l-9-1l-4-2l-2-3l1-6l10-15l2-6l0-3l-1-3l-2-3l-3-3l-7-3l-6-1M153 69l0 0M310 180l2-9l0-9l-2-6l-3-3l-5-3l-20-8l-24-13l-9-3l-12-1l-9 1l-6 2l-15 10l-18 10l-7 5l-11 12l-6 4l-9 3l-27 5l-8 3M108 0l-6 9l-7 9l-2 3l-1 3l1 6l2 9l3 6l4 6l3 2l9 5l21 4l2 1l-1 12l-3 9l-4 6l-6 3l-6 0l-6-1l-6-4l-14-13l-6-3l-7-2l-9-1l-9 0l-30 3l-6 0l-3-1l-3-2l0-3l0-3l5-9l2-6l0-6l-2-6l-2-3l-6-4l-7-2l-8-1M315 0l-3 15l1 3l2 4l3 1l6 1l36 2M360 143l-15 2l-12 0l-8-1l-1-3l0-3l2-6l5-6l8-9l6-9l1-9l-1-6l-2-3l-7-4l-21-7l-9-5l-6-5l-12-14l-6-5l-6-4l-18-7l-6-3l-6-5l-11-13l-7-5l-9-4l-12-1l-9 0l-9 3l-5 4l-14 12l-21 12l-3 3l-4 6l-3 9l0 3l2 1l9 1l27 0l30-4l3 0l3 2l1 3l-1 3l-6 11l-6 13l-4 6l-4 3l-10 4l-33 6l-21 7l-9 1l-15 1l-6 1l-5 4l-2 6l-1 6l1 12l0 3l-2 3l-3 0l-3-1l-12-7l-6-2l-15-4l-12 0l-12 0l-27 4M315 180l3-24l-1-6l-2-2l-27-8l-24-12l-9-3l-9-3l-9 0l-9 1l-9 3l-18 12l-18 11l-6 4l-9 9l-9 5l-12 3l-30 3l-6 3l-3 4M82 0l-8 6l-2 3l1 3l8 11l3 6l15 35l3 2l13 3l5 3l2 3l-1 3l-1 2l-3 1l-3-1l-5-2l-10-12l-21-1l-36 0l-8-2l-3-3l0-18l-2-6l-2-4l-3-3l-6-3l-9-2l-9-1M320 0l-1 6l1 6l1 3l4 3l5 2l6 1l24 2M201 12l0 0M82 180l1-3l0-3l-6-12l-7-9l-4-4l-6-3l-12-4l-15-1l-15 2l-18 3M360 146l-24 5l-6 2l-3 1l-3 4l-2 4l-2 18M56 0l-2 3l-2 6l0 3l2 3l4 3l11 6l6 5l5 7l3 6l2 6l-1 6l-3 3l-3 1l-9 2l-12 0l-9-1l-4-2l-4-3l-1-2l-4-19l-2-3l-2-3l-4-2l-6-2l-21-3M324 0l2 9l2 3l4 3l10 3l18 2M198 17l0 0M249 51l0 0M56 180l8-9l2-6l-1-6l-1-3l-3-3l-4-4l-9-3l-6-1l-9-1l-12 1l-21 4M360 149l-21 5l-5 2l-4 3l-2 3l-3 6l-1 12M46 0l-7 14l-3 3l-2 1l-10 1l-24-2M328 0l2 6l2 3l4 3l9 3l15 2M204 21l0 0M48 27l0 0M252 59l0 0M171 117l0 0M46 180l10-12l1-3l0-6l-1-3l-5-4l-3-2l-6-2l-9-1l-12 1l-21 4M360 152l-18 4l-5 3l-4 3l-2 3l-2 6l-1 9M39 0l-6 9l-6 4l-6 2l-6 0l-15 0M332 0l3 6l4 3l9 4l12 2M57 42l0 0M258 66l0 0M171 123l0 0M39 180l9-15l1-3l-1-3l-3-4l-6-3l-9-1l-12 1l-18 3M360 155l-12 3l-9 4l-3 3l-3 5l-1 4l0 6M33 0l-5 6l-7 4l-9 2l-12 0M337 0l1 3l3 3l4 3l6 2l9 1M252 78l0 0M33 180l4-9l2-6l0-4l-1-2l-2-1l-4-2l-8-1l-12 1l-12 2M360 158l-12 3l-7 4l-3 3l-1 3l-1 6l1 3M26 0l-5 5l-6 3l-6 1l-9 0M342 0l2 3l4 3l6 2l6 1M243 92l0 0M26 180l3-6l1-6l0-3l-3-3l-3-1l-6-1l-9 0l-9 1M360 161l-9 3l-3 1l-4 3l-2 3l-1 3l0 3l1 3M19 0l-4 3l-3 1l-6 2l-6 0M348 0l3 3l9 3M19 180l2-3l1-3l0-3l-1-3l-4-3l-5-1l-12 1M360 165l-9 3l-3 3l-2 3l0 3l2 3' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E") 0 0 / 360px 180px, linear-gradient(90deg, rgba(0, 0, 0, 0.3), #000 70%);
  -webkit-mask-composite: source-in;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='180'%3E%3Cpath d='M24 101l0 0M27 96l0 0M330 54l0 0M24 93l0 0M234 143l0 0M267 0l6 2l6-1l4-1M327 45l0 0M21 90l0 0M283 180l6-3l3-3l1-3l0-3l-1-3l-2-3l-4-3l-13-7l-18-12l-6-3l-9-1l-10 2l-32 17l-4 4l-2 3l-1 3l0 3l4 4l6 1l6 1l15 1l24-2l6 1l6 1l9 5M144 3l0 0M233 0l7 1l6 3l6 5l9 10l3 2l6 2l3 0l4-2l8-9l12-12M0 54l3-6l1-3l-1-3l-3-3M360 39l-6-2l-9 0l-27 4l-10 4l-2 3l-1 3l0 3l3 6l6 6l5 3l5 2l9 2l9-1l6-3l3-3l9-12M165 77l0 0M0 130l12 2l24-1l15-1l9-3l6-4l3-5l5-13l2-9l0-3l-2-3l-2-3l-7-3l-11-1l-30 3l-12 2l-4 2l-4 3l-4 6M360 99l-3 12l-3 12l1 3l2 3l3 1M297 180l4-6l0-6l-1-5l-3-4l-4-3l-17-9l-21-12l-9-3l-6 0l-6 0l-8 3l-31 17l-8 7l-2 3l-3 6l0 3l1 3l6 2l44 4M135 0l-7 3l-5 5l-9 19l0 3l0 5l3 3l3 1l3-1l11-5l25-9l8-6l10-11l3-2l6-3l9-1l24 1l9 2l6 2l9 5l12 13l6 5l6 2l6 2l12 1l3-1l1-3l3-12l13-18M117 21l0 0M0 65l10-14l2-6l0-3l-1-3l-2-2l-3-2l-6-2M360 33l-6-1l-9 0l-42 5l-6 2l-1 3l2 9l2 6l5 6l7 7l9 4l15 3l12 0l3-1l3-2l6-9M162 72l0 0M0 136l54-3l6-1l6-2l3-2l4-5l5-10l6-11l2-6l-1-6l-4-6l-6-4l-9-2l-12 0l-21 3l-24 3l-6 1l-3 2M360 87l-3 6l-5 18l-7 18l1 3l4 3l10 1M305 180l2-6l0-9l-2-6l-3-3l-5-3l-18-9l-21-11l-9-4l-9-1l-9 1l-6 2l-33 19l-8 6l-10 13l-6 5l-6 2l-18 2l-9 2M121 0l-6 6l-12 18l-1 3l-1 6l2 6l4 6l4 3l3 1l6 2l6-1l3-2l10-9l4-3l22-11l6-4l12-11l6-3l9-2l15 0l12 2l9 4l5 4l10 11l6 6l8 4l16 6l6 3l6 6l11 15l7 6l12 6l23 6l5 3l1 3l1 6l-2 12l-4 9l-9 12l-1 3l0 3l2 3l5 2l6 1l12-1M310 0l-8 18l0 3l1 3l3 4l6 2l6 0l27-2l15 1M0 140l27-4l15 0l24 1l9-2l3-3l6-14l3-4l9-9l3-3l0-3l-2-6l-7-10l-7-5l-8-3l-9-2l-9 0l-24 4l-12 1l-9-1l-4-2l-2-3l1-6l10-15l2-6l0-3l-1-3l-2-3l-3-3l-7-3l-6-1M153 69l0 0M310 180l2-9l0-9l-2-6l-3-3l-5-3l-20-8l-24-13l-9-3l-12-1l-9 1l-6 2l-15 10l-18 10l-7 5l-11 12l-6 4l-9 3l-27 5l-8 3M108 0l-6 9l-7 9l-2 3l-1 3l1 6l2 9l3 6l4 6l3 2l9 5l21 4l2 1l-1 12l-3 9l-4 6l-6 3l-6 0l-6-1l-6-4l-14-13l-6-3l-7-2l-9-1l-9 0l-30 3l-6 0l-3-1l-3-2l0-3l0-3l5-9l2-6l0-6l-2-6l-2-3l-6-4l-7-2l-8-1M315 0l-3 15l1 3l2 4l3 1l6 1l36 2M360 143l-15 2l-12 0l-8-1l-1-3l0-3l2-6l5-6l8-9l6-9l1-9l-1-6l-2-3l-7-4l-21-7l-9-5l-6-5l-12-14l-6-5l-6-4l-18-7l-6-3l-6-5l-11-13l-7-5l-9-4l-12-1l-9 0l-9 3l-5 4l-14 12l-21 12l-3 3l-4 6l-3 9l0 3l2 1l9 1l27 0l30-4l3 0l3 2l1 3l-1 3l-6 11l-6 13l-4 6l-4 3l-10 4l-33 6l-21 7l-9 1l-15 1l-6 1l-5 4l-2 6l-1 6l1 12l0 3l-2 3l-3 0l-3-1l-12-7l-6-2l-15-4l-12 0l-12 0l-27 4M315 180l3-24l-1-6l-2-2l-27-8l-24-12l-9-3l-9-3l-9 0l-9 1l-9 3l-18 12l-18 11l-6 4l-9 9l-9 5l-12 3l-30 3l-6 3l-3 4M82 0l-8 6l-2 3l1 3l8 11l3 6l15 35l3 2l13 3l5 3l2 3l-1 3l-1 2l-3 1l-3-1l-5-2l-10-12l-21-1l-36 0l-8-2l-3-3l0-18l-2-6l-2-4l-3-3l-6-3l-9-2l-9-1M320 0l-1 6l1 6l1 3l4 3l5 2l6 1l24 2M201 12l0 0M82 180l1-3l0-3l-6-12l-7-9l-4-4l-6-3l-12-4l-15-1l-15 2l-18 3M360 146l-24 5l-6 2l-3 1l-3 4l-2 4l-2 18M56 0l-2 3l-2 6l0 3l2 3l4 3l11 6l6 5l5 7l3 6l2 6l-1 6l-3 3l-3 1l-9 2l-12 0l-9-1l-4-2l-4-3l-1-2l-4-19l-2-3l-2-3l-4-2l-6-2l-21-3M324 0l2 9l2 3l4 3l10 3l18 2M198 17l0 0M249 51l0 0M56 180l8-9l2-6l-1-6l-1-3l-3-3l-4-4l-9-3l-6-1l-9-1l-12 1l-21 4M360 149l-21 5l-5 2l-4 3l-2 3l-3 6l-1 12M46 0l-7 14l-3 3l-2 1l-10 1l-24-2M328 0l2 6l2 3l4 3l9 3l15 2M204 21l0 0M48 27l0 0M252 59l0 0M171 117l0 0M46 180l10-12l1-3l0-6l-1-3l-5-4l-3-2l-6-2l-9-1l-12 1l-21 4M360 152l-18 4l-5 3l-4 3l-2 3l-2 6l-1 9M39 0l-6 9l-6 4l-6 2l-6 0l-15 0M332 0l3 6l4 3l9 4l12 2M57 42l0 0M258 66l0 0M171 123l0 0M39 180l9-15l1-3l-1-3l-3-4l-6-3l-9-1l-12 1l-18 3M360 155l-12 3l-9 4l-3 3l-3 5l-1 4l0 6M33 0l-5 6l-7 4l-9 2l-12 0M337 0l1 3l3 3l4 3l6 2l9 1M252 78l0 0M33 180l4-9l2-6l0-4l-1-2l-2-1l-4-2l-8-1l-12 1l-12 2M360 158l-12 3l-7 4l-3 3l-1 3l-1 6l1 3M26 0l-5 5l-6 3l-6 1l-9 0M342 0l2 3l4 3l6 2l6 1M243 92l0 0M26 180l3-6l1-6l0-3l-3-3l-3-1l-6-1l-9 0l-9 1M360 161l-9 3l-3 1l-4 3l-2 3l-1 3l0 3l1 3M19 0l-4 3l-3 1l-6 2l-6 0M348 0l3 3l9 3M19 180l2-3l1-3l0-3l-1-3l-4-3l-5-1l-12 1M360 165l-9 3l-3 3l-2 3l0 3l2 3' fill='none' stroke='%23000' stroke-width='1.1'/%3E%3C/svg%3E") 0 0 / 360px 180px, linear-gradient(90deg, rgba(0, 0, 0, 0.3), #000 70%);
  mask-composite: intersect;
}
.bn-topografico::after { background: radial-gradient(60% 110% at 85% 20%, color-mix(in srgb, var(--_b1) 26%, transparent), transparent 70%); }

/* glitch */
.bn-glitch { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 24px), linear-gradient(120deg, color-mix(in srgb, var(--_b1) 34%, var(--bk)), color-mix(in srgb, var(--_b2) 24%, var(--bk)) 50%, color-mix(in srgb, var(--_b3) 34%, var(--bk))); }
.bn-glitch::before {
  inset: 0 -8%;
  background:
    linear-gradient(180deg, transparent 0 18%, color-mix(in srgb, var(--_b1) 80%, transparent) 18% 21%, transparent 21% 47%, color-mix(in srgb, var(--_b3) 85%, transparent) 47% 49%, transparent 49% 70%, rgba(255, 255, 255, 0.5) 70% 70.8%, transparent 70.8% 84%, color-mix(in srgb, var(--_b2) 70%, transparent) 84% 88%, transparent 88%),
    linear-gradient(90deg, transparent 0 58%, color-mix(in srgb, var(--_b3) 40%, transparent) 58% 74%, transparent 74% 80%, color-mix(in srgb, var(--_b1) 35%, transparent) 80% 86%, transparent 86%) 0 30% / 100% 12% no-repeat;
  opacity: 0.55;
  animation: bn-glitch 3.4s steps(1) infinite;
}
@keyframes bn-glitch {
  0% { transform: none; clip-path: inset(0); opacity: 0.55; }
  6% { transform: translateX(-5%); clip-path: inset(15% 0 58% 0); opacity: 1; }
  8% { transform: translateX(4%); clip-path: inset(44% 0 28% 0); opacity: 1; }
  10% { transform: translateX(-2%); clip-path: inset(66% 0 10% 0); opacity: 0.9; }
  12% { transform: none; clip-path: inset(0); opacity: 0.55; }
  61% { transform: translateX(3%); clip-path: inset(80% 0 6% 0); opacity: 1; }
  63% { transform: none; clip-path: inset(0); opacity: 0.55; }
}
.bn-glitch::after {
  inset: 0 -6%;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.28) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, transparent 0 66%, color-mix(in srgb, var(--_b3) 55%, transparent) 66% 84%, transparent 84%) 0 62% / 100% 7% no-repeat,
    linear-gradient(90deg, transparent 0 10%, color-mix(in srgb, var(--_b1) 50%, transparent) 10% 28%, transparent 28%) 0 82% / 100% 4% no-repeat;
  animation: bn-tear 2.7s steps(1) infinite;
}
@keyframes bn-tear {
  0% { transform: none; }
  31% { transform: translateX(-4%); }
  34% { transform: translateX(5%); }
  36% { transform: none; }
  83% { transform: translateX(-3%); }
  85% { transform: none; }
}

/* galáxia */
.bn-galaxia {
  background:
    radial-gradient(26% 20% at 72% 46%, rgba(255, 255, 255, 0.5), color-mix(in srgb, var(--_b3) 65%, transparent) 40%, transparent 75%),
    radial-gradient(60% 70% at 70% 45%, color-mix(in srgb, var(--_b1) 52%, transparent), transparent 70%),
    radial-gradient(55% 80% at 28% 72%, color-mix(in srgb, var(--_b2) 44%, transparent), transparent 70%),
    radial-gradient(40% 60% at 96% 92%, color-mix(in srgb, var(--_b3) 34%, transparent), transparent 70%),
    linear-gradient(160deg, #05060d, color-mix(in srgb, var(--_b2) 18%, #04050a));
}
.bn-galaxia::before { background: var(--stars-a); animation: bn-twinkle 3.2s ease-in-out infinite alternate; }
.bn-galaxia::after {
  background:
    radial-gradient(0.8px 7px at 22% 30%, #fff, transparent),
    radial-gradient(7px 0.8px at 22% 30%, #fff, transparent),
    radial-gradient(0.8px 6px at 88% 70%, #fff, transparent),
    radial-gradient(6px 0.8px at 88% 70%, #fff, transparent),
    var(--stars-b);
  animation: bn-twinkle 2.3s ease-in-out -1.2s infinite alternate-reverse;
}
@keyframes bn-twinkle { from { opacity: 1; } to { opacity: 0.2; } }

/* aurora */
.bn-aurora {
  background:
    radial-gradient(90% 60% at 50% 120%, color-mix(in srgb, var(--_b1) 30%, transparent), transparent 70%),
    linear-gradient(180deg, #04060b 0%, color-mix(in srgb, var(--_b2) 16%, #05070c) 60%, color-mix(in srgb, var(--_b1) 20%, var(--bk)) 100%);
}
.bn-aurora::before {
  inset: -30% -50% -10%;
  background:
    radial-gradient(20% 55% at 30% 45%, color-mix(in srgb, var(--_b1) 75%, transparent), transparent 70%),
    radial-gradient(16% 60% at 46% 35%, color-mix(in srgb, var(--_b2) 70%, transparent), transparent 70%),
    radial-gradient(24% 50% at 63% 50%, color-mix(in srgb, var(--_b3) 72%, transparent), transparent 70%),
    radial-gradient(18% 55% at 80% 40%, color-mix(in srgb, var(--_b1) 55%, transparent), transparent 70%);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 3px, rgba(0, 0, 0, 0.55) 3px 7px);
  mask: repeating-linear-gradient(90deg, #000 0 3px, rgba(0, 0, 0, 0.55) 3px 7px);
  opacity: 0.85;
  animation: bn-aurora 16s ease-in-out infinite alternate;
}
@keyframes bn-aurora {
  0% { transform: translateX(-8%) skewX(-12deg); }
  50% { transform: translateX(3%) skewX(7deg) scaleY(1.12); }
  100% { transform: translateX(9%) skewX(-4deg) scaleY(0.94); }
}
.bn-aurora::after { background: var(--stars-a, none); opacity: 0.5; }
.bn-aurora {
  --stars-a:
    radial-gradient(circle at 17px 23px, #fff 0 0.7px, transparent 1.4px) 0 0 / 97px 61px,
    radial-gradient(circle at 71px 9px, rgba(255, 255, 255, 0.8) 0 0.6px, transparent 1.2px) 0 0 / 131px 83px,
    radial-gradient(circle at 40px 50px, #fff 0 0.8px, transparent 1.5px) 0 0 / 157px 113px;
}

/* chuva */
.bn-chuva { background: radial-gradient(70% 60% at 50% 120%, color-mix(in srgb, var(--_b3) 34%, transparent), transparent 70%), linear-gradient(170deg, color-mix(in srgb, var(--_b2) 30%, #05070c), color-mix(in srgb, var(--_b1) 22%, var(--bk)) 60%, color-mix(in srgb, var(--_b3) 28%, var(--bk))); }
.bn-chuva::before {
  inset: -160px -80px 0 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--_b3) 65%, #fff), color-mix(in srgb, var(--_b1) 75%, #fff));
  opacity: 0.5;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' stroke='%23000' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M72 3l-6 12M31 17l-7 14M56 39l-6 12M15 50l-6 12M43 63l-5 10'/%3E%3C/svg%3E") 0 0 / 80px 80px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' stroke='%23000' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M72 3l-6 12M31 17l-7 14M56 39l-6 12M15 50l-6 12M43 63l-5 10'/%3E%3C/svg%3E") 0 0 / 80px 80px;
  animation: bn-rain-near 0.7s linear infinite;
}
.bn-chuva::after {
  inset: -120px -60px 0 0;
  background: color-mix(in srgb, var(--_b2) 50%, #fff);
  opacity: 0.28;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' stroke='%23000' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M52 5l-4 8M22 22l-4 8M45 38l-3 6M10 46l-4 8'/%3E%3C/svg%3E") 0 0 / 60px 60px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' stroke='%23000' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M52 5l-4 8M22 22l-4 8M45 38l-3 6M10 46l-4 8'/%3E%3C/svg%3E") 0 0 / 60px 60px;
  animation: bn-rain-far 1.15s linear infinite;
}
@keyframes bn-rain-near { to { transform: translate(-80px, 160px); } }
@keyframes bn-rain-far { to { transform: translate(-60px, 120px); } }

/* ================================================================ estilos de nome */

.nm { --_n1: var(--n1, #ff7a18); --_n2: var(--n2, var(--_n1)); --_n3: var(--n3, var(--_n2)); }
.nm.nm-solida { color: var(--_n1) !important; }

.nm:is(.nm-degrade, .nm-animada, .nm-metal, .nm-fogo, .nm-arco-iris) {
  color: var(--_n1) !important;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.nm:is(.nm-degrade, .nm-animada, .nm-metal, .nm-fogo, .nm-arco-iris) > * { -webkit-text-fill-color: currentColor; }

.nm.nm-degrade { background-image: linear-gradient(90deg, var(--_n1), var(--_n2) 50%, var(--_n3)); }

.nm.nm-animada { background-image: linear-gradient(90deg, var(--_n1), var(--_n2), var(--_n3), var(--_n1)); background-size: 200% 100%; animation: nm-flow 3.2s linear infinite; }
@keyframes nm-flow { to { background-position: 200% 0; } }

.nm.nm-neon {
  color: color-mix(in srgb, var(--_n1) 45%, #fff) !important;
  text-shadow: 0 0 0.05em rgba(255, 255, 255, 0.6), 0 0 0.18em var(--_n1), 0 0 0.42em color-mix(in srgb, var(--_n1) 70%, transparent), 0 0 0.8em color-mix(in srgb, var(--_n1) 22%, transparent);
}

.nm.nm-metal {
  background-image:
    linear-gradient(102deg, transparent 40%, rgba(255, 255, 255, 0.9) 49%, transparent 58%),
    linear-gradient(180deg, color-mix(in srgb, var(--_n1) 30%, #fff) 8%, var(--_n1) 44%, color-mix(in srgb, var(--_n2) 70%, #000) 53%, var(--_n2) 62%, color-mix(in srgb, var(--_n1) 45%, #fff) 96%);
  background-size: 250% 100%, 100% 100%;
  background-repeat: no-repeat;
  background-position: 160% 0, 0 0;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.55));
  animation: nm-shine 3.8s ease-in-out infinite;
}
@keyframes nm-shine {
  0% { background-position: 160% 0, 0 0; }
  55%, 100% { background-position: -60% 0, 0 0; }
}

.nm.nm-fogo {
  background-image: linear-gradient(0deg, var(--_n1), var(--_n2) 28%, var(--_n3) 52%, var(--_n2) 76%, var(--_n1));
  background-size: 100% 200%;
  filter: drop-shadow(0 0 0.16em color-mix(in srgb, var(--_n2) 60%, transparent));
  animation: nm-burn 1.4s linear infinite;
}
@keyframes nm-burn { to { background-position: 0 200%; } }

.nm.nm-glitch {
  color: var(--_n1) !important;
  text-shadow: -0.05em 0 color-mix(in srgb, var(--_n2) 75%, transparent), 0.05em 0 color-mix(in srgb, var(--_n3) 75%, transparent);
  animation: nm-glitch 3s steps(1) infinite;
}
@keyframes nm-glitch {
  0% { text-shadow: -0.05em 0 color-mix(in srgb, var(--_n2) 75%, transparent), 0.05em 0 color-mix(in srgb, var(--_n3) 75%, transparent); }
  4% { text-shadow: 0.1em 0 color-mix(in srgb, var(--_n2) 85%, transparent), -0.09em 0.03em color-mix(in srgb, var(--_n3) 85%, transparent); }
  6% { text-shadow: -0.13em -0.02em color-mix(in srgb, var(--_n2) 85%, transparent), 0.07em 0 color-mix(in srgb, var(--_n3) 85%, transparent); }
  8% { text-shadow: -0.05em 0 color-mix(in srgb, var(--_n2) 75%, transparent), 0.05em 0 color-mix(in srgb, var(--_n3) 75%, transparent); }
  56% { text-shadow: 0.08em 0.02em color-mix(in srgb, var(--_n2) 85%, transparent), -0.12em 0 color-mix(in srgb, var(--_n3) 85%, transparent); }
  58% { text-shadow: -0.05em 0 color-mix(in srgb, var(--_n2) 75%, transparent), 0.05em 0 color-mix(in srgb, var(--_n3) 75%, transparent); }
}

.nm.nm-arco-iris { background-image: linear-gradient(90deg, #ff5f6d, #ffa94d, #ffe66d, #63ff9e, #4dd2ff, #9d8bff, #ff6bd6, #ff5f6d); background-size: 200% 100%; animation: nm-flow 4s linear infinite; }

/* ================================================================ raridade (cartas da loja) */

:where(.rar) { position: relative; }
.rar {
  --rar-glow: 0px;
  isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--rar, #9aa3b5) 42%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--rar) 10%, transparent), 0 0 var(--rar-glow) color-mix(in srgb, var(--rar) 30%, transparent), 0 12px 28px rgba(0, 0, 0, 0.35);
  transition: box-shadow 0.18s, border-color 0.18s, transform 0.18s;
}
.rar-comum, .rar-text-comum { --rar: #9aa3b5; }
.rar-incomum, .rar-text-incomum { --rar: #2bff9a; }
.rar-raro, .rar-text-raro { --rar: #29a3ff; }
.rar-epico, .rar-text-epico { --rar: #b06bff; }
.rar-lendario, .rar-text-lendario { --rar: #ffb31a; }
.rar-mitico, .rar-text-mitico { --rar: #ff3d6e; }
.rar:hover { border-color: color-mix(in srgb, var(--rar) 70%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--rar) 22%, transparent), 0 0 calc(var(--rar-glow) + 14px) color-mix(in srgb, var(--rar) 40%, transparent), 0 16px 34px rgba(0, 0, 0, 0.4); }
.rar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--rar) 65%, transparent), color-mix(in srgb, var(--rar) 50%, #fff), color-mix(in srgb, var(--rar) 65%, transparent)) 0 0 / 100% 3px no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--rar) 15%, transparent), transparent 46%);
}
.rar-comum::before { background: linear-gradient(90deg, color-mix(in srgb, var(--rar) 45%, transparent), color-mix(in srgb, var(--rar) 70%, transparent), color-mix(in srgb, var(--rar) 45%, transparent)) 0 0 / 100% 2px no-repeat, linear-gradient(180deg, color-mix(in srgb, var(--rar) 7%, transparent), transparent 40%); }
.rar-incomum { --rar-glow: 10px; }
.rar-raro { --rar-glow: 16px; }
.rar-epico { --rar-glow: 22px; }
.rar-lendario { --rar-glow: 26px; }
.rar-mitico { --rar-glow: 32px; border-color: color-mix(in srgb, var(--rar) 60%, transparent); }
.rar-mitico::before {
  background:
    linear-gradient(90deg, #ff3d6e, #ffb31a, #b06bff, #ff3d6e) 0 0 / 200% 3px repeat-x,
    radial-gradient(80% 50% at 50% 0%, color-mix(in srgb, var(--rar) 20%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, #b06bff 10%, transparent), transparent 50%);
  animation: rar-flow 4s linear infinite;
}
@keyframes rar-flow { to { background-position: 200% 0, 0 0, 0 0; } }
.rar:is(.rar-lendario, .rar-mitico)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.14) 48%, rgba(255, 255, 255, 0.04) 53%, transparent 60%) 0 0 / 260% 100% no-repeat;
  background-position: 130% 0;
  animation: rar-shine 5s ease-in-out infinite;
}
.rar-mitico::after { animation-duration: 3.8s; }
@keyframes rar-shine {
  0% { background-position: 130% 0; }
  55%, 100% { background-position: -30% 0; }
}

[class*="rar-text-"] { color: var(--rar); text-shadow: 0 0 10px color-mix(in srgb, var(--rar) 45%, transparent); }

/* ================================================================ super reações e entrada */

.spx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.spx-e {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: var(--fs, 40px);
  line-height: 1;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.45));
  will-change: transform, opacity;
}
.spx-name { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); white-space: nowrap; color: #fff; animation: spx-name 2.4s ease both; }
@keyframes spx-name { 0% { opacity: 0; transform: translate(-50%, 6px); } 12%, 80% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

/* gigante */
.spx-gigante .spx-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--fs) * 2.2);
  height: calc(var(--fs) * 2.2);
  margin: calc(var(--fs) * -1.1) 0 0 calc(var(--fs) * -1.1);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 236, 190, 0.45), rgba(255, 140, 60, 0.15) 40%, transparent 68%);
  animation: spx-glow 2.5s ease-out both;
}
@keyframes spx-glow { 0% { transform: scale(0.2); opacity: 0; } 15% { transform: scale(1.1); opacity: 1; } 70% { transform: scale(0.95); opacity: 0.8; } 100% { transform: scale(1.3); opacity: 0; } }
.spx-gigante .spx-giant { filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.55)); animation: spx-giant 2.5s cubic-bezier(0.2, 0.8, 0.3, 1) both; }
@keyframes spx-giant {
  0% { transform: translate(-50%, -50%) scale(0) rotate(-25deg); opacity: 0; }
  14% { transform: translate(-50%, -50%) scale(1.25) rotate(9deg); opacity: 1; }
  24% { transform: translate(-50%, -50%) scale(0.92) rotate(-7deg); }
  34% { transform: translate(-50%, -50%) scale(1.07) rotate(5deg); }
  44% { transform: translate(-50%, -50%) scale(0.98) rotate(-3deg); }
  54% { transform: translate(-50%, -50%) scale(1.02) rotate(2deg); }
  78% { transform: translate(-50%, -50%) scale(1) rotate(0deg); opacity: 1; }
  100% { transform: translate(-50%, -75%) scale(1.2) rotate(0deg); opacity: 0; }
}
.spx-gigante .spx-name { top: calc(50% + var(--fs) * 0.6); }

/* chuva */
.spx-drop { left: var(--x); top: 0; animation: spx-fall var(--d) cubic-bezier(0.45, 0, 0.85, 0.55) var(--delay) both; }
@keyframes spx-fall {
  0% { transform: translate(-50%, -110%) rotate(0deg); opacity: 0; }
  8% { opacity: 1; }
  86% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), var(--fall)) rotate(var(--rot)); opacity: 0; }
}

/* espiral */
.spx-core { animation: spx-core 2.4s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
@keyframes spx-core {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  14% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
  28% { transform: translate(-50%, -50%) scale(1); }
  75% { transform: translate(-50%, -50%) scale(1) rotate(-8deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0.4) rotate(20deg); opacity: 0; }
}
.spx-spin { animation: spx-spiral 2.3s cubic-bezier(0.25, 0.6, 0.35, 1) var(--delay) both; }
@keyframes spx-spiral {
  0% { transform: translate(-50%, -50%) rotate(var(--a0)) translateX(0) rotate(calc(var(--a0) * -1)) scale(0.2); opacity: 0; }
  10% { opacity: 1; }
  78% { opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(calc(var(--a0) + 420deg)) translateX(var(--r)) rotate(calc(var(--a0) * -1 - 420deg)) scale(1.05); opacity: 0; }
}
.spx-espiral .spx-name, .spx-explosao .spx-name { top: calc(50% + var(--m) * 0.16); }

/* explosão */
.spx-flash {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--m) * 0.9);
  height: calc(var(--m) * 0.9);
  margin: calc(var(--m) * -0.45) 0 0 calc(var(--m) * -0.45);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(255, 214, 140, 0.5) 22%, rgba(255, 90, 60, 0.18) 45%, transparent 66%);
  animation: spx-flash 0.75s ease-out both;
}
@keyframes spx-flash { 0% { transform: scale(0.15); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
.spx-wave {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--ws);
  height: var(--ws);
  margin: calc(var(--ws) / -2) 0 0 calc(var(--ws) / -2);
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 18px rgba(255, 190, 110, 0.85), inset 0 0 18px rgba(255, 190, 110, 0.6);
  animation: spx-wave 0.95s cubic-bezier(0.1, 0.7, 0.3, 1) both;
}
.spx-wave2 { border-width: 2px; animation-delay: 0.14s; animation-duration: 1.2s; }
@keyframes spx-wave { 0% { transform: scale(0.05); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.spx-boom { animation: spx-boom 1.9s cubic-bezier(0.2, 1, 0.3, 1) both; }
@keyframes spx-boom {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  10% { transform: translate(-50%, -50%) scale(1.5); opacity: 1; }
  24% { transform: translate(-50%, -50%) scale(1.15); }
  70% { opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.3); opacity: 0; }
}
.spx-shard { animation: spx-shard 2s cubic-bezier(0.1, 0.8, 0.25, 1) var(--delay) both; }
@keyframes spx-shard {
  0% { transform: translate(-50%, -50%) scale(0.2) rotate(0deg); opacity: 0; }
  6% { opacity: 1; }
  55% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1) rotate(var(--rot)); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--tx) * 1.08), calc(-50% + var(--ty) * 1.08 + 46px)) scale(0.7) rotate(var(--rot)); opacity: 0; }
}

/* rastro */
.spx-fly {
  left: 0;
  top: 0;
  transform: none;
  offset-anchor: 50% 50%;
  offset-rotate: 0deg;
  offset-distance: 0%;
  scale: calc(var(--s, 1) * var(--flip, 1)) var(--s, 1);
  opacity: var(--o, 1);
  animation: spx-fly 1.8s cubic-bezier(0.45, 0.05, 0.4, 1) var(--delay, 0s) both;
}
.spx-ghost { filter: none; }
@keyframes spx-fly {
  0% { offset-distance: 0%; opacity: 0; rotate: -12deg; }
  7% { opacity: var(--o, 1); }
  50% { rotate: 10deg; }
  92% { opacity: var(--o, 1); }
  100% { offset-distance: 100%; opacity: 0; rotate: -6deg; }
}
.spx-fly .spx-name { top: 100%; margin-top: 6px; transform: none; translate: -50% 0; scale: var(--flip, 1) 1; animation: none; }
.spx-rastro .spx-trail {
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px 2px rgba(255, 220, 150, 0.9);
  offset-anchor: 50% 50%;
  offset-rotate: 0deg;
  animation: spx-fly 1.8s cubic-bezier(0.45, 0.05, 0.4, 1) var(--delay, 0s) both;
}

/* entrada: faixa passando com o nome + estouro de emojis */
.spx-entry { --c: #ff7a18; }
.spx-entry-band {
  position: absolute;
  left: -12%;
  right: -12%;
  top: 50%;
  height: calc(var(--fs) * 2.7);
  margin-top: calc(var(--fs) * -1.35);
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85) 30%, rgba(255, 255, 255, 0.85) 70%, transparent) 0 0 / 100% 2px no-repeat,
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--c) 70%, #fff) 30%, color-mix(in srgb, var(--c) 70%, #fff) 70%, transparent) 0 100% / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 2px, transparent 2px 10px),
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--c) 45%, #06070b) 14%, color-mix(in srgb, var(--c) 80%, #06070b) 50%, color-mix(in srgb, var(--c) 45%, #06070b) 86%, transparent);
  box-shadow: 0 0 40px color-mix(in srgb, var(--c) 35%, transparent);
  transform: skewX(-16deg);
  animation: spx-band 3.1s cubic-bezier(0.7, 0, 0.2, 1) both;
}
.spx-entry-band::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 26%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: translateX(-100%);
  animation: spx-streak 1.1s 0.55s ease-in-out both;
}
@keyframes spx-band {
  0% { transform: translateX(-108%) skewX(-16deg); }
  16% { transform: translateX(0) skewX(-16deg); }
  82% { transform: translateX(0) skewX(-16deg); opacity: 1; }
  100% { transform: translateX(108%) skewX(-16deg); opacity: 0; }
}
@keyframes spx-streak { to { transform: translateX(480%); } }
.spx-entry-text {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--fs) * 0.12);
  text-align: center;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  animation: spx-entry-text 3.1s ease both;
}
.spx-entry-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font: 700 var(--fs) / 1 var(--font-display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 18px var(--c), 0 2px 0 rgba(0, 0, 0, 0.35);
}
.spx-entry-sub { padding-left: 0.4em; font: 700 max(11px, calc(var(--fs) * 0.3)) / 1.2 var(--font-display); letter-spacing: 0.4em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 28%, #fff); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
@keyframes spx-entry-text {
  0%, 9% { opacity: 0; transform: translate(-25%, -50%) skewX(-14deg); }
  22% { opacity: 1; transform: translate(-50%, -50%); }
  80% { opacity: 1; transform: translate(-50%, -50%); }
  100% { opacity: 0; transform: translate(-75%, -50%) skewX(14deg); }
}
.spx-entry .spx-shard { filter: drop-shadow(0 0 8px var(--c)) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4)); animation-duration: 2.1s; }
.spx-bit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--bs, 8px);
  height: var(--bs, 8px);
  background: var(--bc, var(--c));
  box-shadow: 0 0 10px var(--c);
  transform: translate(-50%, -50%);
  animation: spx-shard 1.8s cubic-bezier(0.1, 0.8, 0.25, 1) var(--delay) both;
}

/* movimento reduzido: só aparece e some */
.spx-calm { animation: spx-calm 2s ease both !important; }
@keyframes spx-calm { 0% { opacity: 0; } 15%, 78% { opacity: 1; } 100% { opacity: 0; } }
.spx-calm .spx-e { left: 50%; top: 46%; transform: translate(-50%, -50%); }
.spx-calm .spx-name { top: calc(46% + var(--fs, 60px) * 0.62); transform: translateX(-50%); }
.spx-entry.spx-calm { animation-duration: 2.6s !important; }

/* ================================================================ movimento reduzido */

@media (prefers-reduced-motion: reduce) {
  .fr-orbita::after { offset-distance: 12%; }
  .fr-cristal::after { transform: scale(0.75) rotate(15deg); opacity: 1; }
  .fr-pulsante::after { opacity: 0.7; transform: none; }
  .bn-scanlines::after { transform: translateY(160%); }
  .rar:is(.rar-lendario, .rar-mitico)::after { background-position: 130% 0; }
}