/* ================================================================ Coleção Lendária: Ascensão
   Molduras (.fr-<estilo>) e capas animadas (.bn-<padrão>) da coleção nova, mais a foto de capa (.bn-foto).
   Mesmo contrato do cosmetics.css: cores por --f1..3 / --b1..3. As peças extras vêm de um <i class="frx">
   dentro do .avatar-wrap e de um <i class="bnx"> dentro do banner (o catalog.js põe quando precisa).
   Para pesar pouco: quase só transform/opacity animando, nada de blur, e nos avatares pequenos (chat, voz,
   listas apertadas) as peças extras somem. Com movimento reduzido o style.css para tudo e fica um quadro bonito.
   As formas (chamas, runas, raios, prédios…) são SVG gerados por código e guardados em variáveis. */

@property --asc-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes asc-angle { to { --asc-a: 360deg; } }
@keyframes asc-spin { to { transform: rotate(360deg); } }
@keyframes asc-spin-r { to { transform: rotate(-360deg); } }
@keyframes asc-pulse { from { opacity: 0.35; } to { opacity: 1; } }
@keyframes asc-twinkle { from { opacity: 1; } to { opacity: 0.25; } }

/* ---------------------------------------------------------------- base das peças extras */
.avatar-wrap > .frx {
  position: absolute;
  inset: calc(var(--fo) * -1);
  z-index: 2;
  border-radius: calc(var(--fr-r) + var(--fo) * var(--fr-k));
  pointer-events: none;
}
.avatar-wrap > .frx::before, .avatar-wrap > .frx::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.avatar-wrap:is(.xs, .sm, :has(> .avatar.xs), :has(> .avatar.sm)) > .frx { display: none; }
/* tamanho normal (listas): as peças grandes encolhem um pouco para não invadir a linha do lado */
.avatar-wrap.fr:not(.md, .xl, :has(> .avatar.md), :has(> .avatar.xl)) { --asc-k: 0.72; }

/* anel com o miolo recortado */
.fr:is(.fr-constelacao, .fr-miragem, .fr-estilhacos, .fr-cometa, .fr-inferno, .fr-tempestade)::before {
  padding: var(--ft);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/* ================================================================ molduras */

/* ---------------- Fliperama: moldura de pixel com o letreiro de lâmpadas correndo e um coração 8-bit pulando */
.fr-fliperama { --px: max(3px, calc(var(--ft) * 1.6)); --fr-av: 0 0 0 1px rgba(0, 0, 0, 0.55); }
.fr-fliperama::before, .fr-fliperama > .frx {
  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)));
}
/* gabinete: claro em cima, escuro embaixo */
.fr-fliperama::before { background: conic-gradient(from -45deg, color-mix(in srgb, var(--_f2) 55%, #2a2d3d) 0 25%, color-mix(in srgb, var(--_f2) 40%, #1a1c28) 0 50%, color-mix(in srgb, var(--_f2) 26%, #0c0d14) 0 75%, color-mix(in srgb, var(--_f2) 40%, #1a1c28) 0); }
/* lâmpadas: uma acesa a cada três, andando em volta (cima → direita → baixo → esquerda) */
.fr-fliperama > .frx {
  --on: radial-gradient(circle calc(var(--px) * 0.42) at calc(var(--px) * 0.5) 50%, #fff 0 30%, color-mix(in srgb, var(--_f1) 50%, #fff) 55%, var(--_f1) 85%, transparent);
  --onv: radial-gradient(circle calc(var(--px) * 0.42) at 50% calc(var(--px) * 0.5), #fff 0 30%, color-mix(in srgb, var(--_f1) 50%, #fff) 55%, var(--_f1) 85%, transparent);
  --off: radial-gradient(circle calc(var(--px) * 0.3) at calc(var(--px) * 1.5) 50%, color-mix(in srgb, var(--_f3) 55%, #000) 0 70%, transparent), radial-gradient(circle calc(var(--px) * 0.3) at calc(var(--px) * 2.5) 50%, color-mix(in srgb, var(--_f3) 55%, #000) 0 70%, transparent);
  background:
    var(--on) 0 0 / calc(var(--px) * 3) var(--px) repeat-x,
    var(--on) 0 100% / calc(var(--px) * 3) var(--px) repeat-x,
    var(--onv) 0 0 / var(--px) calc(var(--px) * 3) repeat-y,
    var(--onv) 100% 0 / var(--px) calc(var(--px) * 3) repeat-y;
  animation: asc-chase 0.75s steps(3) infinite;
}
@keyframes asc-chase {
  to { background-position: calc(var(--px) * 3) 0, calc(var(--px) * -3) 100%, 0 calc(var(--px) * -3), 100% calc(var(--px) * 3); }
}
.fr-fliperama::after {
  inset: auto;
  z-index: 3;
  top: calc((var(--fg) + var(--px)) * -1 - 12%);
  right: calc((var(--fg) + var(--px)) * -1 - 10%);
  width: 32%;
  height: auto;
  aspect-ratio: 7 / 6;
  border-radius: 0;
  background: linear-gradient(135deg, #fff 0 22%, var(--_f1) 22% 68%, color-mix(in srgb, var(--_f1) 55%, #000) 68%);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 6' shape-rendering='crispEdges' fill='%23000'%3E%3Crect x='1' y='0' width='2' height='1'/%3E%3Crect x='4' y='0' width='2' height='1'/%3E%3Crect x='0' y='1' width='7' height='1'/%3E%3Crect x='0' y='2' width='7' height='1'/%3E%3Crect x='1' y='3' width='5' height='1'/%3E%3Crect x='2' y='4' width='3' height='1'/%3E%3Crect x='3' y='5' width='1' height='1'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  animation: asc-hop 1.2s steps(1) infinite;
}
@keyframes asc-hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16%); } }
.avatar-wrap.fr-fliperama:is(.xs, .sm, :has(> .avatar.xs), :has(> .avatar.sm))::after { display: none; }

/* ---------------- Constelação: anel fino, órbita inclinada que passa por trás da foto e estrelas girando */
.fr-constelacao { --orb: calc(var(--fo) * -1 - 18% * var(--asc-k, 1)); }
.fr-constelacao::before {
  padding: max(1px, calc(var(--ft) * 0.7));
  background: conic-gradient(from 200deg, var(--_f1), color-mix(in srgb, var(--_f2) 60%, #fff), var(--_f3), var(--_f1));
}
/* fio da órbita inclinada e o halo ficam atrás da foto (só aparecem dos lados) */
.fr-constelacao::after {
  inset: var(--orb);
  border-radius: 50%;
  rotate: -24deg;
  background:
    radial-gradient(50% 23% at 50% 50%, transparent calc(100% - 1.6px), color-mix(in srgb, var(--_f1) 75%, #fff) calc(100% - 0.8px), transparent 100%),
    radial-gradient(closest-side, color-mix(in srgb, var(--_f2) 30%, transparent), transparent 100%);
}
.fr-constelacao > .frx {
  inset: var(--orb);
  border-radius: 50%;
  rotate: -24deg;
  background:
    radial-gradient(closest-side, transparent calc(100% - 1.2px), color-mix(in srgb, var(--_f3) 50%, transparent) calc(100% - 0.6px), transparent 100%),
    radial-gradient(3% 3% at 6% 34%, #fff, transparent),
    radial-gradient(2.4% 2.4% at 90% 20%, color-mix(in srgb, var(--_f1) 50%, #fff), transparent),
    radial-gradient(2.6% 2.6% at 84% 88%, #fff, transparent),
    radial-gradient(2% 2% at 18% 86%, color-mix(in srgb, var(--_f3) 50%, #fff), transparent);
}
.fr-constelacao > .frx::before, .fr-constelacao > .frx::after {
  inset: auto;
  left: 0;
  top: 0;
  width: var(--st);
  height: var(--st);
  border-radius: 50%;
  offset-anchor: 50% 50%;
  offset-rotate: 0deg;
}
/* estrela da órbita inclinada: some quando passa por trás da foto */
.fr-constelacao > .frx::before {
  --st: calc(var(--ft) * 3.4 + 6px);
  background:
    radial-gradient(50% 7% at 50% 50%, #fff, transparent), radial-gradient(7% 50% at 50% 50%, #fff, transparent),
    radial-gradient(circle, #fff 0 13%, var(--_f1) 26%, color-mix(in srgb, var(--_f1) 30%, transparent) 40%, transparent 58%);
  offset-path: ellipse(50% 23% at 50% 50%);
  offset-distance: 4%; /* parado (movimento reduzido): na ponta da órbita, fora da foto */
  animation: asc-orbit-front 4.4s linear infinite;
}
@keyframes asc-orbit-front {
  0% { offset-distance: 0%; opacity: 1; scale: 1.15; }
  22% { opacity: 1; scale: 1; }
  27% { opacity: 0; scale: 0.6; }
  48% { opacity: 0; scale: 0.6; }
  53% { opacity: 1; scale: 1; }
  100% { offset-distance: 100%; opacity: 1; scale: 1.15; }
}
/* estrela da órbita redonda, por fora */
.fr-constelacao > .frx::after {
  --st: calc(var(--ft) * 2.6 + 4px);
  background:
    radial-gradient(50% 6% at 50% 50%, #fff, transparent), radial-gradient(6% 50% at 50% 50%, #fff, transparent),
    radial-gradient(circle, #fff 0 14%, var(--_f3) 28%, transparent 56%);
  offset-path: circle(50% at 50% 50%);
  offset-distance: 35%;
  animation: asc-orbit 7s linear infinite reverse;
}
@keyframes asc-orbit { from { offset-distance: 0%; } to { offset-distance: 100%; } }

/* ---------------- Miragem: película holográfica girando no anel e um reflexo furta-cor passando pela foto */
.fr-miragem { --fr-av: 0 0 calc(var(--fo) * 1.6) color-mix(in srgb, var(--_f2) 40%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.fr-miragem::before {
  padding: calc(var(--ft) * 1.2);
  background: conic-gradient(from var(--asc-a),
    color-mix(in srgb, var(--_f1) 75%, #fff), #ffc4ee, color-mix(in srgb, var(--_f2) 75%, #fff), #b4fff0,
    color-mix(in srgb, var(--_f3) 75%, #fff), #fff0a8, color-mix(in srgb, var(--_f1) 75%, #fff));
  animation: asc-angle 5s linear infinite;
}
.fr-miragem::after {
  inset: calc(var(--fo) * -1 - 16%);
  border-radius: 0;
  background:
    radial-gradient(1.4% 13% at 88% 12%, #fff, transparent), radial-gradient(13% 1.4% at 88% 12%, #fff, transparent),
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--_f2) 60%, #fff) 0 1.6%, transparent 5%),
    radial-gradient(1.1% 9% at 10% 84%, #fff, transparent), radial-gradient(9% 1.1% at 10% 84%, #fff, transparent),
    radial-gradient(circle at 10% 84%, color-mix(in srgb, var(--_f1) 60%, #fff) 0 1.2%, transparent 4%);
  animation: asc-glint 3s ease-in-out infinite;
}
@keyframes asc-glint { 0%, 100% { opacity: 0.2; transform: scale(0.92); } 50% { opacity: 1; transform: scale(1.04); } }
.fr-miragem > .frx { inset: 0; border-radius: var(--fr-r); overflow: hidden; z-index: 1; }
.fr-miragem > .frx::before {
  inset: -20% -160%;
  background: linear-gradient(105deg, transparent 41%, rgba(255, 196, 238, 0.35) 45.5%, rgba(255, 255, 255, 0.62) 47.5%, rgba(180, 255, 240, 0.4) 49.5%, rgba(255, 240, 168, 0.3) 52%, transparent 56%);
  animation: asc-sheen 3.6s ease-in-out infinite;
}
@keyframes asc-sheen { 0% { transform: translateX(-15%); } 60%, 100% { transform: translateX(15%); } }
.fr-miragem > .frx::after { background: linear-gradient(135deg, color-mix(in srgb, var(--_f1) 16%, transparent), transparent 42%, transparent 62%, color-mix(in srgb, var(--_f3) 18%, transparent)); }

/* ---------------- Estilhaços: anel lapidado e cristais de duas faces saindo dele, flutuando */
.fr-estilhacos { --fr-av: 0 0 0 1px color-mix(in srgb, var(--_f1) 35%, #fff), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.fr-estilhacos::before {
  padding: calc(var(--ft) * 1.1);
  background: conic-gradient(from 14deg,
    #fff 0 4%, color-mix(in srgb, var(--_f1) 55%, #fff) 0 13%, var(--_f1) 0 21%, color-mix(in srgb, var(--_f2) 70%, #000) 0 29%,
    color-mix(in srgb, var(--_f3) 45%, #fff) 0 37%, color-mix(in srgb, var(--_f1) 80%, #000) 0 46%, #fff 0 49%, color-mix(in srgb, var(--_f2) 55%, #fff) 0 58%,
    var(--_f3) 0 66%, color-mix(in srgb, var(--_f1) 30%, #fff) 0 75%, color-mix(in srgb, var(--_f2) 80%, #000) 0 84%, color-mix(in srgb, var(--_f1) 60%, #fff) 0 93%, var(--_f2) 0);
}
.fr-estilhacos > .frx {
  inset: calc(var(--fo) * -1 - 26% * var(--asc-k, 1));
  border-radius: 50%;
  background: radial-gradient(closest-side, transparent 54%, color-mix(in srgb, var(--_f2) 30%, transparent) 64%, transparent 84%);
}
.fr-estilhacos > .frx::before, .fr-estilhacos > .frx::after {
  mask: var(--facet) center / 100% 100% no-repeat;
  animation: asc-float 3.6s ease-in-out infinite alternate;
}
.fr-estilhacos > .frx::before { --facet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M121.9 39.9L130.8 20.1L141.2 15.5L128.1 42.5ZM136.2 47.3L154.3 24.8L169.6 22.7L142.8 52.4ZM150.1 60.2L164.5 50.5L173.8 52.1L153.7 65.1ZM162.6 86.7L174.1 85.2L179.2 88.9L163.4 91.1ZM77.6 159.9L69.7 177L60.5 180.9L71.9 157.5ZM64.2 153.1L48.1 173.4L34.4 175.5L58 148.3ZM50.3 140.3L38.3 148.4L30.4 147L46.9 135.8ZM36.2 104.5L26 104.2L22 100L36 100ZM133.9 154.3L138.5 163.3L136.6 168.9L130 156.5ZM42.2 72.4L31 65.9L29 59L44.6 68ZM66.6 45.4L62.4 37L63.9 32L70 43.5Z'/%3E%3C/svg%3E"); background: linear-gradient(150deg, #fff 10%, color-mix(in srgb, var(--_f1) 45%, #fff) 40%, color-mix(in srgb, var(--_f3) 40%, #fff) 80%); }
.fr-estilhacos > .frx::after { --facet: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M128.1 42.5L141.2 15.5L144 26.6L133.9 45.7ZM142.8 52.4L169.6 22.7L169.1 38.1L148.7 58.4ZM153.7 65.1L173.8 52.1L171.4 61.2L156.8 70.4ZM163.4 91.1L179.2 88.9L175.3 93.8L163.8 95.5ZM71.9 157.5L60.5 180.9L58 171.3L66.6 154.6ZM58 148.3L34.4 175.5L34.5 161.6L52.4 142.8ZM46.9 135.8L30.4 147L32 139.1L44 131ZM36 100L22 100L26 95.8L36.2 95.5ZM130 156.5L136.6 168.9L131 167.3L126 158.5ZM44.6 68L29 59L36 57.3L47.3 63.8ZM70 43.5L63.9 32L68.8 33.6L73.5 41.8Z'/%3E%3C/svg%3E"); background: linear-gradient(150deg, var(--_f1) 10%, var(--_f2) 50%, color-mix(in srgb, var(--_f2) 55%, #000) 90%); }
@keyframes asc-float { from { transform: translateY(2%) rotate(-2.5deg) scale(0.985); } to { transform: translateY(-2%) rotate(2.5deg) scale(1.025); } }
.fr-estilhacos::after {
  --gs: calc(var(--fo) * 2.4 + 9px);
  inset: auto;
  z-index: 3;
  width: var(--gs);
  height: var(--gs);
  top: calc(var(--fo) * -1 - var(--gs) * 0.55);
  right: calc(var(--fo) * -1 - var(--gs) * 0.1);
  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%);
  animation: fx-glint 3.2s ease-in-out infinite;
}

/* ---------------- Cometa: medalhão de neon pulsando e dois cometas com rastro girando nele */
.fr-cometa { --cm: calc(var(--fo) * -1 - 9%); }
.fr-cometa::before {
  inset: var(--cm);
  border-radius: 50%;
  background: linear-gradient(140deg, color-mix(in srgb, var(--_f3) 45%, #1a1d2c), color-mix(in srgb, var(--_f2) 30%, #10121c));
}
.fr-cometa::after {
  inset: var(--cm);
  border-radius: 50%;
  box-shadow: 0 0 calc(var(--fo) * 1.1) color-mix(in srgb, var(--_f1) 80%, transparent), 0 0 calc(var(--fo) * 3) color-mix(in srgb, var(--_f2) 45%, transparent), inset 0 0 calc(var(--fo) * 1.2) color-mix(in srgb, var(--_f1) 55%, transparent);
  animation: asc-pulse 1.3s ease-in-out infinite alternate;
}
/* a peça gira inteira (barato): rastros curvos no anel e as cabeças brilhando */
.fr-cometa > .frx { inset: var(--cm); border-radius: 50%; animation: asc-spin 2.4s linear infinite; }
.fr-cometa > .frx::before {
  border-radius: 50%;
  padding: calc(var(--ft) * 1.15);
  background:
    conic-gradient(from 0deg, transparent 0 70%, color-mix(in srgb, var(--_f1) 75%, transparent) 92%, color-mix(in srgb, var(--_f1) 30%, #fff) 99%, #fff 100%),
    conic-gradient(from 180deg, transparent 0 70%, color-mix(in srgb, var(--_f2) 75%, transparent) 92%, color-mix(in srgb, var(--_f2) 30%, #fff) 99%, #fff 100%);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.fr-cometa > .frx::after {
  inset: calc(var(--ft) * -1.6);
  background:
    radial-gradient(circle calc(var(--ft) * 2.4 + 2px) at 50% calc(var(--ft) * 2.18), #fff 0 26%, color-mix(in srgb, var(--_f1) 50%, #fff) 42%, color-mix(in srgb, var(--_f1) 50%, transparent) 64%, transparent),
    radial-gradient(circle calc(var(--ft) * 2.4 + 2px) at 50% calc(100% - var(--ft) * 2.18), #fff 0 26%, color-mix(in srgb, var(--_f2) 50%, #fff) 42%, color-mix(in srgb, var(--_f2) 50%, transparent) 64%, transparent);
}

/* ---------------- Inferno: anel de lava e duas camadas de labaredas rugindo em volta, com brasas subindo */
.fr-inferno { --fr-av: 0 0 calc(var(--fo) * 2) color-mix(in srgb, var(--_f1) 55%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.25); --fl: calc(-50% * var(--asc-k, 1)); }
.fr-inferno::before {
  padding: calc(var(--ft) * 1.1);
  background: linear-gradient(0deg, var(--_f3), var(--_f2) 25%, color-mix(in srgb, var(--_f1) 45%, #fff) 50%, var(--_f2) 75%, var(--_f3)) 0 0 / 100% 200%;
  animation: fx-rise 0.9s linear infinite;
}
.fr-inferno::after, .fr-inferno > .frx::before {
  mask: var(--flames) center / 100% 100% no-repeat;
  transform-origin: 50% 62%;
}
.fr-inferno::after {
  --flames: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='53'/%3E%3Cpath d='M89 51.2C85.7 29.1 95.6 4.1 97.3 -17C101.6 4.1 114.1 29.1 110.8 51.2ZM109.6 50.9C115.2 30.2 133 13.2 142.6 -5.9C139 13.2 140.6 41.2 129.3 59.5ZM129 59.3C141.4 44.7 160 39.6 172.3 26C166 39.6 160.4 66.5 144.3 76.8ZM142.9 74.3C156.3 68.2 167.1 74.5 176.6 67.7C173.1 74.5 164.5 96.2 150 98.3ZM149.6 93.8C161.5 94 166 106.3 175.5 104.2C172 106.3 157.7 122.2 146.2 119.2ZM149.2 108.7C157.7 112 157.3 127.3 167.1 127.5C163.3 127.3 143.9 139.3 136.3 134.4ZM141.7 127.5C147.7 133.5 136.3 147.5 140.7 149.5C142.3 147.5 124.3 152.9 119.5 146ZM123.6 144.1C125.6 151.1 109.6 159.3 112.4 162C115.6 159.3 99 157.2 97.8 150ZM104.8 149.8C104.2 158.9 85.8 162.9 86.7 166.4C91.8 162.9 78.4 154.9 80.5 146ZM79.9 145.8C75.7 152.1 61.2 148.9 63.1 150.9C67.2 148.9 57.3 138.5 62.1 132.6ZM64 134.7C56.1 140.5 42.7 132.5 43.2 133.3C48.7 132.5 44 120.7 52.7 116.3ZM54 119.5C39.6 123.8 21.6 107.4 15 104.8C27.6 107.4 35.2 95.1 50.3 95ZM50.1 97.2C33.8 94.4 24.6 69.7 19.7 61.6C30.6 69.7 44.4 63.6 59 71.4ZM54.4 79.6C38.7 70.7 32.3 44.3 25.5 31.9C38.3 44.3 57.4 47.1 69.6 60.3ZM65.3 64C52.3 47.8 57.4 18 55.6 0.1C63.4 18 82.1 31.6 88.7 51.3Z'/%3E%3C/svg%3E");
  inset: var(--fl);
  border-radius: 0;
  background: radial-gradient(closest-side, #fff 0 44%, color-mix(in srgb, var(--_f1) 55%, #fff) 50%, var(--_f1) 58%, var(--_f2) 72%, color-mix(in srgb, var(--_f3) 80%, transparent) 88%, transparent 100%);
  animation: asc-flame 0.8s ease-in-out infinite alternate;
}
.fr-inferno > .frx { inset: var(--fl); border-radius: 0; z-index: -1; }
.fr-inferno > .frx::before {
  --flames: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='51'/%3E%3Cpath d='M88.7 53.3C85 31 95.7 5.5 98.1 -15.8C101.7 5.5 113.7 30.7 110.4 53.1ZM107 52.5C111.6 33.8 130.2 19.7 137.9 2.7C136.2 19.7 141.9 47.4 130.9 63.3ZM134.3 66.4C150 53.2 165.7 51 176.7 38.3C171.7 51 164.8 77.9 145.8 85.6ZM144.8 82.7C160.7 78.2 172 85.2 184.3 79.3C178 85.2 164.3 105.1 147.8 104.9ZM147.9 102.6C160.7 105 162.4 119.4 171.9 118.7C168.4 119.4 151.1 133.1 139.5 127.2ZM138.3 128.9C143.9 134.9 132.8 146.8 136.3 148.9C138.8 146.8 123.8 150.8 119.2 144ZM127.1 139.6C128.7 144.6 117.2 152.6 123.5 154.5C123.2 152.6 103.8 152.9 102.1 148ZM102.8 147.9C101.7 154.8 86.3 157 90.1 159.6C92.3 157 76.2 149.4 78 142.6ZM79.8 143.5C74.6 150.8 54.5 145.1 53.5 147.1C60.5 145.1 52.4 131 59 125ZM58.5 124.1C48.4 128.2 33.1 115.9 29.7 115C39.1 115.9 41.4 104 52 102.1ZM52.1 102.3C34.1 101.7 19.9 80.8 12.5 73.8C25.9 80.8 38.9 75.2 56 80.9ZM55.7 81.5C37.2 72.1 31.3 44.6 26.1 30.9C37.3 44.6 53.9 49.1 68.6 63.7ZM69.3 63.1C56.1 44.4 60.8 13 58.1 -7.2C66.8 13 86.8 30.4 92.4 52.6Z'/%3E%3C/svg%3E");
  background: radial-gradient(closest-side, color-mix(in srgb, var(--_f2) 70%, #fff) 0 46%, var(--_f2) 58%, color-mix(in srgb, var(--_f3) 85%, #000) 80%, transparent 100%);
  rotate: 11deg;
  opacity: 0.95;
  animation: asc-flame 0.62s ease-in-out -0.3s infinite alternate-reverse;
}
@keyframes asc-flame {
  0% { transform: scale(0.97, 0.94); }
  35% { transform: scale(1.02, 1.05) translateX(-1%); }
  70% { transform: scale(0.99, 0.98) translateX(1%); }
  100% { transform: scale(1.03, 1.08); }
}
.fr-inferno > .frx::after {
  inset: 6% 16% 24%;
  background:
    radial-gradient(circle at 20% 70%, #fff 0 1.2%, var(--_f1) 2%, transparent 3.6%),
    radial-gradient(circle at 76% 60%, #fff 0 1%, var(--_f1) 1.8%, transparent 3.2%),
    radial-gradient(circle at 54% 84%, color-mix(in srgb, var(--_f1) 50%, #fff) 0 1%, transparent 3%),
    radial-gradient(circle at 36% 50%, var(--_f1) 0 0.9%, transparent 2.8%),
    radial-gradient(circle at 88% 82%, #fff 0 0.8%, var(--_f2) 1.6%, transparent 3%);
  animation: asc-embers 1.9s linear infinite;
}
@keyframes asc-embers { 0% { transform: translateY(18%); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-34%); opacity: 0; } }

/* ---------------- Tempestade: anel elétrico girando, faíscas coladas nele e raios com galhos estourando */
.fr-tempestade { --fr-av: 0 0 calc(var(--fo) * 1.6) color-mix(in srgb, var(--_f1) 50%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.25); --tz: calc(var(--fo) * -1 - 30% * var(--asc-k, 1)); }
.fr-tempestade::before {
  padding: var(--ft);
  background: conic-gradient(from var(--asc-a), #fff 0 1.5%, var(--_f1) 4%, color-mix(in srgb, var(--_f2) 55%, #0a0f24) 14%, color-mix(in srgb, var(--_f1) 70%, #0a0f24) 30%, #fff 33%, var(--_f1) 36%, color-mix(in srgb, var(--_f3) 55%, #0a0f24) 52%, color-mix(in srgb, var(--_f1) 60%, #0a0f24) 68%, #fff 70%, var(--_f2) 74%, color-mix(in srgb, var(--_f2) 50%, #0a0f24) 90%, #fff 100%);
  animation: asc-angle 2.8s linear infinite;
}
.fr-tempestade::after {
  inset: var(--tz);
  z-index: 2;
  border-radius: 0;
  background: linear-gradient(#fff, color-mix(in srgb, var(--_f1) 45%, #fff));
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M161.3 114.4L159.9 117.7L162.9 122.4L158.5 124.6L158.5 128.6L154.7 130.6L156.5 135.9M81.4 160.2L77.9 159.5L74.3 158.7L69.8 159.7L67.2 156.7L65.3 153L61.4 152.3M44.4 70.5L47.5 68.3L45 62.4L48 60L49.7 56.7L55.3 56.8L57.4 54.1M113.9 38.6L118.2 36.3L121.3 38.7L125.1 39L127.3 42.9L130.4 44.7L134.7 44.4' stroke-width='5' stroke-opacity='.25'/%3E%3Cpath d='M161.3 114.4L159.9 117.7L162.9 122.4L158.5 124.6L158.5 128.6L154.7 130.6L156.5 135.9M81.4 160.2L77.9 159.5L74.3 158.7L69.8 159.7L67.2 156.7L65.3 153L61.4 152.3M44.4 70.5L47.5 68.3L45 62.4L48 60L49.7 56.7L55.3 56.8L57.4 54.1M113.9 38.6L118.2 36.3L121.3 38.7L125.1 39L127.3 42.9L130.4 44.7L134.7 44.4' stroke-width='1.5'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  animation: asc-crackle 1.1s steps(1) infinite;
}
@keyframes asc-crackle {
  0% { opacity: 1; transform: rotate(0deg); }
  18% { opacity: 0.2; }
  24% { opacity: 1; transform: rotate(40deg); }
  52% { opacity: 0; }
  58% { opacity: 1; transform: rotate(150deg); }
  80% { opacity: 0.4; transform: rotate(220deg); }
}
.fr-tempestade > .frx { inset: var(--tz); border-radius: 50%; background: radial-gradient(closest-side, transparent 50%, color-mix(in srgb, var(--_f1) 24%, transparent) 60%, transparent 78%); }
.fr-tempestade > .frx::before, .fr-tempestade > .frx::after {
  background: radial-gradient(closest-side, #fff 40%, color-mix(in srgb, var(--_f1) 40%, #fff) 70%, var(--_f1));
  mask: var(--bolts) center / 100% 100% no-repeat;
  animation: asc-bolt 2.6s steps(1) infinite;
}
.fr-tempestade > .frx::before { --bolts: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M130 48L136.5 44.9L141.4 38.5L140.1 32.8L140.7 27.3L149.1 23.7L157.5 21.9M115.5 158L115.1 167.1L111.9 174.8L112.5 182.9L115.8 188.3L111.5 196L110 196.5M40.9 89.6L35.2 83.8L30 84.6L24.8 88.1L17.9 83L12.4 78.3L5.4 78.4' stroke-width='8' stroke-opacity='.22'/%3E%3Cpath d='M140.1 32.8L137 25.4L144.4 23.1M111.9 174.8L89.8 181.8L96 187.2' stroke-width='4.5' stroke-opacity='.18'/%3E%3Cpath d='M130 48L136.5 44.9L141.4 38.5L140.1 32.8L140.7 27.3L149.1 23.7L157.5 21.9M115.5 158L115.1 167.1L111.9 174.8L112.5 182.9L115.8 188.3L111.5 196L110 196.5M40.9 89.6L35.2 83.8L30 84.6L24.8 88.1L17.9 83L12.4 78.3L5.4 78.4' stroke-width='2.8'/%3E%3Cpath d='M140.1 32.8L137 25.4L144.4 23.1M111.9 174.8L89.8 181.8L96 187.2' stroke-width='1.5'/%3E%3C/svg%3E"); }
.fr-tempestade > .frx::after { --bolts: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M159.1 110.4L166.5 116.3L171 122.3L176.6 124L182.9 120.7L192 118.2L196 114.2M57.6 142.4L52 144.9L51.3 150.5L44.4 149.4L38.2 153.2L36.5 162.4L27.9 164.2L24.5 160.9M79.5 43.6L77.1 37.1L80.4 31.6L78.6 23.7L80.5 18.7L78.3 10.1L71.3 7.3' stroke-width='8' stroke-opacity='.22'/%3E%3Cpath d='M182.9 120.7L189.5 99.3L193.6 95.2M38.2 153.2L42.6 164.2L43.9 171.2M77.1 37.1L65.7 37.4L69.9 31.1L68.8 27M80.5 18.7L58.9 20.8L50.2 18.5L57.7 10.5' stroke-width='4.5' stroke-opacity='.18'/%3E%3Cpath d='M159.1 110.4L166.5 116.3L171 122.3L176.6 124L182.9 120.7L192 118.2L196 114.2M57.6 142.4L52 144.9L51.3 150.5L44.4 149.4L38.2 153.2L36.5 162.4L27.9 164.2L24.5 160.9M79.5 43.6L77.1 37.1L80.4 31.6L78.6 23.7L80.5 18.7L78.3 10.1L71.3 7.3' stroke-width='2.8'/%3E%3Cpath d='M182.9 120.7L189.5 99.3L193.6 95.2M38.2 153.2L42.6 164.2L43.9 171.2M77.1 37.1L65.7 37.4L69.9 31.1L68.8 27M80.5 18.7L58.9 20.8L50.2 18.5L57.7 10.5' stroke-width='1.5'/%3E%3C/svg%3E"); animation-duration: 3.4s; animation-delay: -1.5s; }
@keyframes asc-bolt {
  0% { opacity: 1; transform: rotate(0deg); }
  4% { opacity: 0.3; }
  6% { opacity: 1; }
  11% { opacity: 0; }
  36% { opacity: 1; transform: rotate(118deg); }
  41% { opacity: 0; }
  68% { opacity: 1; transform: rotate(236deg); }
  71% { opacity: 0.4; }
  73% { opacity: 1; }
  78% { opacity: 0; }
  100% { opacity: 0; transform: rotate(236deg); }
}

/* ---------------- Runas: círculo de runas girando devagar e um selo girando ao contrário atrás da foto */
.fr-runas { --fr-av: 0 0 calc(var(--fo) * 1.8) color-mix(in srgb, var(--_f1) 40%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.fr-runas::before {
  inset: calc(var(--fo) * -1 - 9%);
  border-radius: 50%;
  border: max(1px, calc(var(--ft) * 0.6)) solid color-mix(in srgb, var(--_f1) 75%, #fff);
  box-shadow: 0 0 calc(var(--fo) * 1.2) color-mix(in srgb, var(--_f1) 55%, transparent), inset 0 0 calc(var(--fo) * 0.8) color-mix(in srgb, var(--_f1) 35%, transparent);
}
.fr-runas::after {
  inset: calc(-20% * var(--asc-k, 1));
  border-radius: 0;
  background: conic-gradient(from 0deg, var(--_f2), color-mix(in srgb, var(--_f3) 70%, #fff), var(--_f2), var(--_f1), var(--_f2));
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M100 8L179.7 146L20.3 146Z'/%3E%3Cpath d='M179.7 54L100 192L20.3 54Z'/%3E%3Ccircle cx='100' cy='100' r='92' stroke-width='1.4'/%3E%3Ccircle cx='100' cy='100' r='46' stroke-width='1.4'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  opacity: 0.8;
  animation: asc-spin-r 40s linear infinite;
}
.fr-runas > .frx { inset: calc(var(--fo) * -1 - 27% * var(--asc-k, 1)); border-radius: 50%; }
.fr-runas > .frx::before {
  background: conic-gradient(from 30deg, color-mix(in srgb, var(--_f1) 55%, #fff), var(--_f1), color-mix(in srgb, var(--_f2) 75%, #fff), var(--_f1), color-mix(in srgb, var(--_f1) 55%, #fff));
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke-width='5.5' stroke-opacity='.16'%3E%3Cpath transform='translate(100 14) rotate(0) scale(1.35)' d='M0-5V5M0-5L3-2'/%3E%3Cpath transform='translate(137.3 22.5) rotate(25.7) scale(1.35)' d='M-3-5V5M-3-5L3 0L-3 5'/%3E%3Cpath transform='translate(167.2 46.4) rotate(51.4) scale(1.35)' d='M-3 5V-5L3 5V-5'/%3E%3Cpath transform='translate(183.8 80.9) rotate(77.1) scale(1.35)' d='M0-5V5M-3-2L3 2'/%3E%3Cpath transform='translate(183.8 119.1) rotate(102.9) scale(1.35)' d='M-3-5L3 5M3-5L-3 5'/%3E%3Cpath transform='translate(167.2 153.6) rotate(128.6) scale(1.35)' d='M-3-5H3L-3 5H3'/%3E%3Cpath transform='translate(137.3 177.5) rotate(154.3) scale(1.35)' d='M0-5L3 0L0 5L-3 0Z'/%3E%3Cpath transform='translate(100 186) rotate(180) scale(1.35)' d='M-3 5V-5L0-1L3-5V5'/%3E%3Cpath transform='translate(62.7 177.5) rotate(205.7) scale(1.35)' d='M-3-5V5H3'/%3E%3Cpath transform='translate(32.8 153.6) rotate(231.4) scale(1.35)' d='M0-5V5M-3 1L0-2L3 1'/%3E%3Cpath transform='translate(16.2 119.1) rotate(257.1) scale(1.35)' d='M-3-4L3-4L0 5Z'/%3E%3Cpath transform='translate(16.2 80.9) rotate(282.9) scale(1.35)' d='M-3 0H3M0-5V5M-2-5H2'/%3E%3Cpath transform='translate(32.8 46.4) rotate(308.6) scale(1.35)' d='M3-5L-3-1L3 3L-3 5'/%3E%3Cpath transform='translate(62.7 22.5) rotate(334.3) scale(1.35)' d='M-3-5V5M3-5V5M-3 0H3'/%3E%3C/g%3E%3Ccircle cx='100' cy='100' r='74.5' stroke-width='1.2'/%3E%3Ccircle cx='100' cy='100' r='97' stroke-width='1.3'/%3E%3Ccircle cx='100' cy='100' r='78.5' stroke-width='0.7' stroke-dasharray='2 4'/%3E%3Cpath transform='translate(100 14) rotate(0) scale(1.35)' d='M0-5V5M0-5L3-2'/%3E%3Cpath transform='translate(137.3 22.5) rotate(25.7) scale(1.35)' d='M-3-5V5M-3-5L3 0L-3 5'/%3E%3Cpath transform='translate(167.2 46.4) rotate(51.4) scale(1.35)' d='M-3 5V-5L3 5V-5'/%3E%3Cpath transform='translate(183.8 80.9) rotate(77.1) scale(1.35)' d='M0-5V5M-3-2L3 2'/%3E%3Cpath transform='translate(183.8 119.1) rotate(102.9) scale(1.35)' d='M-3-5L3 5M3-5L-3 5'/%3E%3Cpath transform='translate(167.2 153.6) rotate(128.6) scale(1.35)' d='M-3-5H3L-3 5H3'/%3E%3Cpath transform='translate(137.3 177.5) rotate(154.3) scale(1.35)' d='M0-5L3 0L0 5L-3 0Z'/%3E%3Cpath transform='translate(100 186) rotate(180) scale(1.35)' d='M-3 5V-5L0-1L3-5V5'/%3E%3Cpath transform='translate(62.7 177.5) rotate(205.7) scale(1.35)' d='M-3-5V5H3'/%3E%3Cpath transform='translate(32.8 153.6) rotate(231.4) scale(1.35)' d='M0-5V5M-3 1L0-2L3 1'/%3E%3Cpath transform='translate(16.2 119.1) rotate(257.1) scale(1.35)' d='M-3-4L3-4L0 5Z'/%3E%3Cpath transform='translate(16.2 80.9) rotate(282.9) scale(1.35)' d='M-3 0H3M0-5V5M-2-5H2'/%3E%3Cpath transform='translate(32.8 46.4) rotate(308.6) scale(1.35)' d='M3-5L-3-1L3 3L-3 5'/%3E%3Cpath transform='translate(62.7 22.5) rotate(334.3) scale(1.35)' d='M-3-5V5M3-5V5M-3 0H3'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  animation: asc-spin 26s linear infinite;
}
.fr-runas > .frx::after {
  border-radius: 50%;
  background: radial-gradient(closest-side, transparent 66%, color-mix(in srgb, var(--_f1) 22%, transparent) 76%, transparent 88%, color-mix(in srgb, var(--_f1) 16%, transparent) 96%, transparent);
  animation: asc-pulse 2.6s ease-in-out infinite alternate;
}

/* molduras grandes na foto grande (perfil, Início, chamada): um respiro em volta para não cobrir o nome */
.avatar-wrap.xl:is(.fr-runas, .fr-constelacao, .fr-tempestade, .fr-cometa, .fr-estilhacos, .fr-inferno) { margin-inline: 15px; }
.profile-head > .avatar-wrap.xl:is(.fr-runas, .fr-constelacao, .fr-tempestade, .fr-inferno) { margin-bottom: 14px; }

/* ================================================================ capas (banner animado) */

.bn > .bnx { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.bn > .bnx::before, .bn > .bnx::after { content: ""; position: absolute; inset: 0; pointer-events: none; }

/* ---------------- foto de capa (a sua) */
.bn.bn-foto { background: var(--cover, none) center / cover no-repeat, linear-gradient(125deg, var(--d1), var(--d2) 55%, var(--d3)); }
.bn.bn-foto::before { background: linear-gradient(180deg, rgba(0, 0, 0, 0.22), transparent 32%, transparent 62%, rgba(0, 0, 0, 0.32)); }
.bn.bn-foto.bn-foto-vazia { background: radial-gradient(80% 120% at 85% 0%, color-mix(in srgb, var(--_b2) 40%, transparent), transparent 65%), linear-gradient(125deg, var(--d1), var(--d2) 55%, var(--d3)); }
.bn.bn-foto.bn-foto-vazia::after {
  content: "📷  Sua foto de capa";
  inset: 8px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1.5px dashed rgba(255, 255, 255, 0.32);
  font: 700 10.5px/1.2 var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.045) 0 8px, transparent 8px 16px);
}

/* ---------------- Céu estrelado: estrelas piscando, estrelas cadentes e colinas com pinheiros */
.bn-ceu-estrelado {
  --stars:
    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 50px, #fff 0 1px, transparent 1.8px) 0 0 / 157px 113px,
    radial-gradient(circle at 120px 30px, 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;
  background:
    linear-gradient(162deg, transparent 28%, color-mix(in srgb, var(--_b3) 20%, transparent) 44%, color-mix(in srgb, var(--_b1) 16%, transparent) 52%, transparent 68%),
    radial-gradient(120% 80% at 50% 125%, color-mix(in srgb, var(--_b1) 45%, transparent), transparent 62%),
    linear-gradient(180deg, #02030a, color-mix(in srgb, var(--_b2) 24%, #03040c) 68%, color-mix(in srgb, var(--_b1) 22%, #05060e));
}
.bn-ceu-estrelado::before { background: var(--stars); animation: asc-twinkle 3.2s ease-in-out infinite alternate; }
.bn-ceu-estrelado > .bnx {
  background:
    radial-gradient(circle at 23% 30%, #fff 0 1.1px, transparent 2.4px),
    radial-gradient(0.7px 6px at 23% 30%, #fff, transparent), radial-gradient(6px 0.7px at 23% 30%, #fff, transparent),
    radial-gradient(circle at 81% 22%, color-mix(in srgb, var(--_b3) 40%, #fff) 0 1.3px, transparent 3px),
    radial-gradient(0.8px 8px at 81% 22%, #fff, transparent), radial-gradient(8px 0.8px at 81% 22%, #fff, transparent),
    radial-gradient(circle at 58% 14%, #fff 0 0.9px, transparent 2px);
}
.bn-ceu-estrelado > .bnx::before, .bn-ceu-estrelado > .bnx::after {
  inset: auto;
  left: 18%;
  top: 8%;
  width: 110px;
  height: 1.6px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--_b3) 50%, #fff) 72%, #fff);
  box-shadow: 0 0 6px color-mix(in srgb, var(--_b3) 60%, #fff);
  rotate: 16deg;
  opacity: 0;
  animation: asc-shoot 7s ease-in infinite;
}
.bn-ceu-estrelado > .bnx::after { left: 52%; top: 4%; width: 80px; rotate: 24deg; animation-duration: 9s; animation-delay: 3.8s; }
@keyframes asc-shoot {
  0% { transform: translateX(-80px); opacity: 0; }
  2% { opacity: 1; }
  11% { transform: translateX(240px); opacity: 0; }
  100% { transform: translateX(240px); opacity: 0; }
}
.bn-ceu-estrelado::after {
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--_b1) 22%, #070812), #020306 70%);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60L0 40Q50 22 110 34T230 30T330 36T400 28V60ZM4.1 46L11.4 23.3L18.6 46ZM14.6 46L22.5 21.4L30.4 46ZM32.4 46L38.3 27.7L44.1 46ZM47.7 46L54.9 23.6L62.1 46ZM67.5 46L72.8 29.3L78.2 46ZM75.3 46L81.5 26.8L87.6 46ZM92.6 46L97.5 30.7L102.4 46ZM107.5 46L112.4 30.6L117.3 46ZM125.8 46L133.5 22L141.2 46ZM136.2 46L141.8 28.6L147.4 46ZM152.1 46L159.9 21.4L167.8 46ZM165 46L173 21.2L180.9 46ZM183.8 46L190.4 25.2L197.1 46ZM194.3 46L202.1 21.7L209.8 46ZM210.5 46L218.6 20.6L226.7 46ZM232.6 46L238.1 28.6L243.7 46ZM243.5 46L249.4 27.3L255.4 46ZM259.3 46L265.1 28.1L270.8 46ZM272.1 46L279.5 22.8L286.9 46ZM289.2 46L296.7 22.5L304.3 46ZM301.2 46L307 27.7L312.9 46ZM319.5 46L325.3 27.8L331.1 46ZM332.5 46L338.6 27L344.7 46ZM349.2 46L355.1 27.4L361 46ZM364.2 46L370.1 27.6L376 46ZM379.1 46L385.8 25.1L392.5 46Z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
}

/* ---------------- Mar aberto: sol no horizonte, brilho na água e três camadas de onda andando */
.bn-mar-aberto {
  background:
    radial-gradient(circle 15px at 76% 55%, #fff 0 36%, color-mix(in srgb, var(--_b1) 65%, #fff) 54%, transparent 74%),
    radial-gradient(42% 75% at 76% 57%, color-mix(in srgb, var(--_b1) 55%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--_b3) 42%, #03040b) 0%, color-mix(in srgb, var(--_b2) 42%, #070814) 40%, color-mix(in srgb, var(--_b1) 50%, #160b18) 57%, color-mix(in srgb, var(--_b2) 40%, #04050c) 58%, color-mix(in srgb, var(--_b3) 30%, #03040a));
}
.bn-mar-aberto::before {
  inset: 58% 14% 0 62%;
  background: repeating-linear-gradient(180deg, transparent 0 4px, color-mix(in srgb, var(--_b1) 45%, #fff) 4px 5.5px);
  mask: radial-gradient(50% 100% at 50% 0%, #000, transparent);
  animation: asc-glitter 1.4s steps(3) infinite;
}
@keyframes asc-glitter { 0% { opacity: 0.9; transform: translateX(0); } 33% { opacity: 0.5; transform: translateX(2px); } 66% { opacity: 1; transform: translateX(-2px); } }
/* cada onda: uma peça de largura --wv e altura --wh no topo, e água cheia embaixo dela */
.bn-mar-aberto > .bnx::before, .bn-mar-aberto > .bnx::after, .bn-mar-aberto::after {
  right: calc(var(--wv) * -1);
  left: 0;
  bottom: 0;
  mask: var(--wave) 0 0 / var(--wv) var(--wh) repeat-x, linear-gradient(#000 0 0) 0 calc(var(--wh) - 1px) / 100% 100% no-repeat;
  animation: asc-wave var(--wt) linear infinite;
}
@keyframes asc-wave { to { transform: translateX(calc(var(--wv) * -1)); } }
.bn-mar-aberto > .bnx::before { --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 22Q25 13 50 22T100 22T150 22T200 22V40H0Z'/%3E%3C/svg%3E"); --wv: 150px; --wh: 10px; --wt: 12s; top: 57%; background: linear-gradient(180deg, color-mix(in srgb, var(--_b2) 45%, #2a3550), color-mix(in srgb, var(--_b2) 30%, #070a16) 30%); }
.bn-mar-aberto > .bnx::after { --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 20Q25 8 50 20T100 20T150 20T200 20V40H0Z'/%3E%3C/svg%3E"); --wv: 220px; --wh: 14px; --wt: 8s; top: 66%; background: linear-gradient(180deg, color-mix(in srgb, var(--_b2) 50%, #c9e8ff) 0, color-mix(in srgb, var(--_b2) 52%, #0d1426) 4px, color-mix(in srgb, var(--_b3) 34%, #04060c)); }
.bn-mar-aberto::after { --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 18Q25 8 50 18T100 18T150 18T200 18V40H0Z'/%3E%3C/svg%3E"); --wv: 300px; --wh: 18px; --wt: 6s; top: 78%; background: linear-gradient(180deg, color-mix(in srgb, var(--_b1) 20%, #eaf8ff) 0, color-mix(in srgb, var(--_b2) 45%, #3a5878) 3px, color-mix(in srgb, var(--_b2) 50%, #0c1424) 9px, color-mix(in srgb, var(--_b3) 40%, #03050a)); }

/* ---------------- Chuva no vidro: luzes da cidade desfocadas, gotas no vidro e trilhas escorrendo */
.bn-chuva-vidro {
  background:
    radial-gradient(circle 15px at 9% 64%, color-mix(in srgb, var(--_b1) 70%, transparent), transparent),
    radial-gradient(circle 9px at 17% 38%, color-mix(in srgb, var(--_b2) 70%, transparent), transparent),
    radial-gradient(circle 22px at 31% 72%, rgba(255, 210, 122, 0.42), transparent),
    radial-gradient(circle 12px at 44% 30%, color-mix(in srgb, var(--_b3) 65%, transparent), transparent),
    radial-gradient(circle 18px at 57% 60%, color-mix(in srgb, var(--_b1) 55%, transparent), transparent),
    radial-gradient(circle 10px at 66% 24%, rgba(255, 255, 255, 0.32), transparent),
    radial-gradient(circle 26px at 79% 66%, color-mix(in srgb, var(--_b2) 50%, transparent), transparent),
    radial-gradient(circle 13px at 90% 36%, rgba(255, 196, 110, 0.4), transparent),
    linear-gradient(180deg, color-mix(in srgb, var(--_b3) 26%, #05070d), color-mix(in srgb, var(--_b2) 24%, #070912) 60%, color-mix(in srgb, var(--_b1) 20%, #0a0b12));
}
.bn-chuva-vidro::before {
  inset: -10% -14%;
  background:
    radial-gradient(circle 20px at 22% 52%, color-mix(in srgb, var(--_b3) 40%, transparent), transparent),
    radial-gradient(circle 14px at 48% 78%, rgba(255, 230, 180, 0.3), transparent),
    radial-gradient(circle 30px at 70% 40%, color-mix(in srgb, var(--_b1) 34%, transparent), transparent),
    radial-gradient(circle 16px at 94% 70%, color-mix(in srgb, var(--_b2) 40%, transparent), transparent);
  animation: asc-drift 16s ease-in-out infinite alternate;
}
@keyframes asc-drift { from { transform: translateX(-4%); } to { transform: translateX(4%); } }
.bn-chuva-vidro > .bnx { background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.05) 46%, transparent 60%); }
.bn-chuva-vidro > .bnx::before {
  top: -90px;
  background: linear-gradient(180deg, rgba(230, 244, 255, 0.06), rgba(230, 244, 255, 0.28));
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 90' fill='none' stroke='%23000' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M22 0L20.9 8.6L22 17.7L20.5 28.7L23.3 37.7L22.1 48.1L22.7 61.4L22.7 75.4L23.5 86.3L20.6 99.9M61 0L62.1 13.6L60.2 26.3L60 40.1L61.5 49.9L61.2 61.6L61.1 71.6L60.8 82.2L60.5 92.3M118 0L117.9 10.1L118.1 22.1L119.1 31.9L117.3 42L117.3 52.1L118 64.7L117.3 76.9L116.6 89.6L118.3 98.4M143 0L143.9 12.1L141.8 22.1L142.8 34.4L142.2 46.4L144 56.2L142.6 69.3L144.2 83.1L143.1 91.4'/%3E%3C/svg%3E") 0 0 / 160px 90px repeat;
  animation: asc-run 7s linear infinite;
}
@keyframes asc-run { to { transform: translateY(90px); } }
.bn-chuva-vidro > .bnx::after {
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.85), rgba(220, 238, 255, 0.35) 40%, rgba(160, 190, 230, 0.2));
  background-size: 8px 8px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 90'%3E%3Ccircle cx='145.8' cy='25.8' r='2.8'/%3E%3Ccircle cx='40' cy='52.3' r='1.1'/%3E%3Ccircle cx='101.4' cy='81.7' r='1.2'/%3E%3Ccircle cx='108.8' cy='56.4' r='1.3'/%3E%3Ccircle cx='155.1' cy='55.1' r='3.7'/%3E%3Ccircle cx='42.7' cy='13.4' r='1.2'/%3E%3Ccircle cx='65.9' cy='43.6' r='1'/%3E%3Ccircle cx='139.9' cy='4.6' r='2'/%3E%3Ccircle cx='155.9' cy='31.8' r='3.3'/%3E%3Ccircle cx='123.8' cy='47.6' r='1.6'/%3E%3Ccircle cx='100.9' cy='50.7' r='1.5'/%3E%3Ccircle cx='67.5' cy='16.8' r='1.2'/%3E%3Ccircle cx='69' cy='38.1' r='1'/%3E%3Ccircle cx='144.9' cy='73.5' r='0.8'/%3E%3Ccircle cx='44.4' cy='28.5' r='1.4'/%3E%3Ccircle cx='8.3' cy='75.4' r='0.9'/%3E%3Ccircle cx='58.6' cy='43' r='0.9'/%3E%3Ccircle cx='33.1' cy='36.9' r='2.8'/%3E%3Ccircle cx='48.4' cy='39.3' r='1.4'/%3E%3Ccircle cx='108.5' cy='19.1' r='3.1'/%3E%3Ccircle cx='140.3' cy='11.9' r='0.9'/%3E%3Ccircle cx='135.9' cy='79.9' r='1'/%3E%3Ccircle cx='81.4' cy='62' r='3.3'/%3E%3Ccircle cx='152.7' cy='13.6' r='0.9'/%3E%3Ccircle cx='57.4' cy='77.2' r='2.4'/%3E%3Ccircle cx='83.9' cy='51.4' r='1.5'/%3E%3C/svg%3E") 0 0 / 160px 90px repeat;
}
.bn-chuva-vidro::after {
  inset: -60px -40px 0 0;
  background: repeating-linear-gradient(105deg, transparent 0 14px, rgba(200, 225, 255, 0.12) 14px 15px, transparent 15px 31px);
  animation: asc-rain 0.9s linear infinite;
}
@keyframes asc-rain { to { transform: translate(-16px, 60px); } }

/* ---------------- Brasas: fogueira embaixo, calor pulsando e fagulhas subindo */
.bn-brasas {
  background:
    radial-gradient(70% 90% at 50% 132%, color-mix(in srgb, var(--_b1) 90%, #fff), color-mix(in srgb, var(--_b2) 72%, transparent) 38%, transparent 70%),
    radial-gradient(38% 60% at 12% 122%, color-mix(in srgb, var(--_b2) 60%, transparent), transparent 70%),
    radial-gradient(38% 60% at 90% 125%, color-mix(in srgb, var(--_b2) 55%, transparent), transparent 70%),
    linear-gradient(180deg, #050307, color-mix(in srgb, var(--_b3) 42%, #0a0406) 66%, color-mix(in srgb, var(--_b2) 46%, #120607));
}
.bn-brasas::before {
  background: radial-gradient(60% 70% at 50% 120%, color-mix(in srgb, var(--_b1) 60%, transparent), transparent 70%);
  animation: asc-pulse 1.8s ease-in-out infinite alternate;
}
.bn-brasas > .bnx {
  mask: linear-gradient(0deg, #000 20%, rgba(0, 0, 0, 0.6) 60%, transparent 96%);
}
.bn-brasas > .bnx::before {
  bottom: -96px;
  background:
    radial-gradient(circle at 20px 70px, #fff 0 0.9px, var(--_b1) 1.6px, transparent 3px),
    radial-gradient(circle at 74px 20px, color-mix(in srgb, var(--_b1) 40%, #fff) 0 1px, color-mix(in srgb, var(--_b1) 80%, transparent) 1.8px, transparent 3.2px),
    radial-gradient(circle at 112px 58px, #fff 0 0.8px, var(--_b2) 1.5px, transparent 2.8px),
    radial-gradient(circle at 48px 40px, var(--_b1) 0 0.9px, transparent 2.4px),
    radial-gradient(circle at 128px 88px, color-mix(in srgb, var(--_b1) 50%, #fff) 0 1.2px, transparent 3px);
  background-size: 140px 96px;
  animation: asc-rise-a 4.6s linear infinite;
}
@keyframes asc-rise-a { to { transform: translateY(-96px); } }
.bn-brasas > .bnx::after {
  bottom: -128px;
  right: -90px;
  background:
    radial-gradient(circle at 14px 30px, #fff 0 0.6px, var(--_b1) 1.2px, transparent 2.2px),
    radial-gradient(circle at 60px 50px, color-mix(in srgb, var(--_b1) 50%, #fff) 0 0.7px, transparent 2px),
    radial-gradient(circle at 40px 8px, var(--_b2) 0 0.7px, transparent 2px);
  background-size: 90px 64px;
  opacity: 0.8;
  animation: asc-rise-b 6s linear infinite;
}
@keyframes asc-rise-b { to { transform: translate(-90px, -128px); } }
/* labaredas na beirada de baixo */
.bn-brasas::after {
  inset: auto -120px -2px 0;
  height: 30%;
  background: linear-gradient(0deg, color-mix(in srgb, var(--_b1) 55%, #fff) 0%, var(--_b1) 30%, color-mix(in srgb, var(--_b2) 80%, transparent) 70%, transparent);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40C2.1 33.1 5.4 29 6.9 26.2C8 30.3 8.7 33.8 10.3 40C12.3 25.8 16.5 17.3 18 11.7C19.1 20.2 19.1 27.2 20.6 40C22.4 31.3 25.6 26 27 22.5C27.9 27.8 28.2 32.1 29.5 40C31.4 32.4 34.9 27.8 36.3 24.7C37.2 29.3 37.3 33.1 38.7 40C41.6 24.2 43.8 14.7 46 8.4C47.4 17.8 51.1 25.8 53.3 40C55.8 25.7 55.3 17.1 57.2 11.4C58.5 20 63.9 27.1 65.7 40C68.5 31.9 68.5 27 70.6 23.8C72 28.6 77.6 32.7 79.7 40C82.7 25.8 82 17.2 84.2 11.5C85.7 20.1 92.2 27.2 94.4 40C96.4 26.4 95.6 18.2 97.1 12.7C98.1 20.9 102.7 27.7 104.2 40C106.3 28.6 110.4 21.8 112 17.3C113.1 24.1 113.2 29.8 114.8 40C117.3 27.6 120.9 20.2 122.8 15.2C124 22.7 125.5 28.9 120 40V40H0Z'/%3E%3C/svg%3E") 0 100% / 120px 100% repeat-x;
  transform-origin: 50% 100%;
  animation: asc-row-flicker 0.7s ease-in-out infinite alternate;
}
@keyframes asc-row-flicker { from { transform: translateX(0) scaleY(0.88); opacity: 0.85; } to { transform: translateX(-12px) scaleY(1.06); opacity: 1; } }

/* ---------------- Sinal perdido: barras de cor, chiado, faixa rolando, cortes de glitch e "▶ PLAY" */
.bn-sinal-perdido {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.42)),
    linear-gradient(90deg, color-mix(in srgb, var(--_b1) 80%, #000) 0 14.3%, color-mix(in srgb, var(--_b2) 80%, #000) 0 28.6%, color-mix(in srgb, var(--_b3) 80%, #000) 0 42.9%, #3a3c46 0 57.2%, color-mix(in srgb, var(--_b1) 62%, #000) 0 71.5%, color-mix(in srgb, var(--_b3) 62%, #000) 0 85.8%, color-mix(in srgb, var(--_b2) 62%, #000) 0) 0 0 / 100% 76% no-repeat,
    linear-gradient(90deg, color-mix(in srgb, var(--_b3) 50%, #000) 0 14.3%, #101116 0 28.6%, color-mix(in srgb, var(--_b2) 50%, #000) 0 42.9%, #101116 0 57.2%, color-mix(in srgb, var(--_b1) 50%, #000) 0 71.5%, #101116 0) 0 100% / 100% 24% no-repeat;
}
.bn-sinal-perdido::before {
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.42) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px),
    radial-gradient(130% 150% at 50% 50%, transparent 46%, rgba(0, 0, 0, 0.65));
}
.bn-sinal-perdido > .bnx::before {
  inset: 0 -8%;
  background:
    linear-gradient(180deg, transparent 0 22%, color-mix(in srgb, var(--_b1) 85%, #fff) 22% 25%, transparent 25% 51%, color-mix(in srgb, var(--_b3) 85%, #fff) 51% 53%, transparent 53% 72%, rgba(255, 255, 255, 0.75) 72% 73%, transparent 73%),
    linear-gradient(90deg, transparent 0 40%, rgba(255, 40, 90, 0.5) 40% 58%, transparent 58% 64%, rgba(40, 240, 255, 0.45) 64% 78%, transparent 78%) 0 36% / 100% 14% no-repeat;
  opacity: 0;
  animation: asc-glitch 3s steps(1) infinite;
}
@keyframes asc-glitch {
  0% { opacity: 0; }
  8% { opacity: 1; transform: translateX(-6%); clip-path: inset(18% 0 60% 0); }
  10% { transform: translateX(5%); clip-path: inset(46% 0 30% 0); }
  12% { transform: translateX(-2%); clip-path: inset(68% 0 12% 0); }
  14% { opacity: 0; transform: none; clip-path: inset(0); }
  57% { opacity: 1; transform: translateX(4%); clip-path: inset(30% 0 52% 0); }
  60% { opacity: 0; transform: none; clip-path: inset(0); }
}
.bn-sinal-perdido > .bnx::after {
  content: "▶ PLAY";
  inset: auto 12px 7px auto;
  font: 700 12px/1 var(--font-display);
  letter-spacing: 0.14em;
  color: #fff;
  text-shadow: 1.5px 0 rgba(255, 40, 90, 0.85), -1.5px 0 rgba(40, 240, 255, 0.85), 0 0 8px rgba(255, 255, 255, 0.5);
  animation: asc-osd 2s steps(1) infinite;
}
@keyframes asc-osd { 0%, 70% { opacity: 1; } 71%, 100% { opacity: 0.35; } }
.bn-sinal-perdido::after {
  top: -34%;
  bottom: auto;
  height: 34%;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.06) 40%, rgba(255, 255, 255, 0.24) 70%, rgba(0, 0, 0, 0.4) 74%, transparent),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0 2px, transparent 2px 5px);
  animation: asc-roll 4.5s linear infinite;
}
@keyframes asc-roll { to { transform: translateY(400%); } }

/* ---------------- Cidade 8-bit: lua de pixel, estrelas, prédios ao longe andando e janelas acendendo */
.bn-cidade-8bit {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges' fill='%23d9c79c'%3E%3Crect x='3' y='2' width='2' height='1'/%3E%3Crect x='3' y='3' width='2' height='1'/%3E%3Crect x='7' y='3' width='1' height='1'/%3E%3Crect x='7' y='4' width='2' height='1'/%3E%3Crect x='2' y='5' width='1' height='1'/%3E%3Crect x='5' y='6' width='1' height='1'/%3E%3C/svg%3E") right 22% top 12% / 30px 30px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' shape-rendering='crispEdges' fill='%23fff3d1'%3E%3Crect x='3' y='0' width='4' height='1'/%3E%3Crect x='2' y='1' width='6' height='1'/%3E%3Crect x='1' y='2' width='8' height='1'/%3E%3Crect x='1' y='3' width='8' height='1'/%3E%3Crect x='0' y='4' width='10' height='1'/%3E%3Crect x='0' y='5' width='10' height='1'/%3E%3Crect x='0' y='6' width='10' height='1'/%3E%3Crect x='1' y='7' width='8' height='1'/%3E%3Crect x='1' y='8' width='8' height='1'/%3E%3Crect x='2' y='9' width='6' height='1'/%3E%3C/svg%3E") right 22% top 12% / 30px 30px no-repeat,
    radial-gradient(circle 46px at calc(78% - 8px) calc(12% + 11px), color-mix(in srgb, var(--_b3) 34%, transparent), transparent),
    linear-gradient(180deg, color-mix(in srgb, var(--_b3) 30%, #04040c) 0%, color-mix(in srgb, var(--_b2) 36%, #070718) 62%, color-mix(in srgb, var(--_b1) 46%, #140a1c) 100%);
  image-rendering: pixelated;
}
.bn-cidade-8bit::before {
  background:
    linear-gradient(#fff 0 0) 8% 16% / 2px 2px no-repeat,
    linear-gradient(#fff 0 0) 22% 34% / 2px 2px no-repeat,
    linear-gradient(#fff 0 0) 37% 10% / 2px 2px no-repeat,
    linear-gradient(color-mix(in srgb, var(--_b1) 40%, #fff) 0 0) 46% 28% / 2px 2px no-repeat,
    linear-gradient(#fff 0 0) 58% 14% / 2px 2px no-repeat,
    linear-gradient(#fff 0 0) 68% 38% / 2px 2px no-repeat,
    linear-gradient(color-mix(in srgb, var(--_b3) 40%, #fff) 0 0) 76% 8% / 2px 2px no-repeat,
    linear-gradient(#fff 0 0) 96% 40% / 2px 2px no-repeat,
    linear-gradient(#fff 0 0) 14% 46% / 2px 2px no-repeat,
    linear-gradient(#fff 0 0) 30% 22% / 2px 2px no-repeat;
  animation: asc-blink 2.4s steps(1) infinite;
}
@keyframes asc-blink { 0%, 60% { opacity: 1; } 61%, 80% { opacity: 0.4; } 81% { opacity: 1; } }
.bn-cidade-8bit > .bnx::before {
  top: auto;
  height: 50px;
  right: -200px;
  background: color-mix(in srgb, var(--_b3) 30%, #0e0c22);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 50' shape-rendering='crispEdges'%3E%3Crect x='0' y='20' width='10' height='30'/%3E%3Crect x='10' y='36' width='22' height='14'/%3E%3Crect x='32' y='24' width='26' height='26'/%3E%3Crect x='58' y='20' width='26' height='30'/%3E%3Crect x='84' y='12' width='18' height='38'/%3E%3Crect x='102' y='16' width='18' height='34'/%3E%3Crect x='120' y='20' width='22' height='30'/%3E%3Crect x='142' y='28' width='10' height='22'/%3E%3Crect x='152' y='20' width='22' height='30'/%3E%3Crect x='174' y='12' width='18' height='38'/%3E%3Crect x='192' y='28' width='26' height='22'/%3E%3C/svg%3E") 0 100% / 200px 50px repeat-x;
  animation: asc-scroll 40s steps(100) infinite;
}
@keyframes asc-scroll { to { transform: translateX(-200px); } }
.bn-cidade-8bit > .bnx::after, .bn-cidade-8bit::after { top: auto; height: 64px; }
.bn-cidade-8bit > .bnx::after {
  background: linear-gradient(180deg, color-mix(in srgb, var(--_b2) 22%, #0a0914), #05050b);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 64' shape-rendering='crispEdges'%3E%3Crect x='0' y='42' width='16' height='22'/%3E%3Crect x='18' y='18' width='16' height='46'/%3E%3Crect x='36' y='22' width='20' height='42'/%3E%3Crect x='58' y='18' width='20' height='46'/%3E%3Crect x='80' y='38' width='16' height='26'/%3E%3Crect x='87' y='32' width='2' height='6'/%3E%3Crect x='98' y='10' width='12' height='54'/%3E%3Crect x='112' y='30' width='24' height='34'/%3E%3Crect x='123' y='24' width='2' height='6'/%3E%3Crect x='138' y='18' width='20' height='46'/%3E%3Crect x='160' y='22' width='24' height='42'/%3E%3Crect x='186' y='42' width='20' height='22'/%3E%3Crect x='195' y='36' width='2' height='6'/%3E%3Crect x='208' y='22' width='12' height='42'/%3E%3Crect x='222' y='34' width='20' height='30'/%3E%3Crect x='231' y='28' width='2' height='6'/%3E%3C/svg%3E") 0 100% / 240px 64px repeat-x;
}
.bn-cidade-8bit::after {
  background: color-mix(in srgb, var(--_b1) 70%, #fff3b0);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 64' shape-rendering='crispEdges'%3E%3Crect x='3' y='46' width='2' height='3'/%3E%3Crect x='8' y='46' width='2' height='3'/%3E%3Crect x='3' y='52' width='2' height='3'/%3E%3Crect x='3' y='58' width='2' height='3'/%3E%3Crect x='8' y='58' width='2' height='3'/%3E%3Crect x='21' y='28' width='2' height='3'/%3E%3Crect x='26' y='40' width='2' height='3'/%3E%3Crect x='26' y='46' width='2' height='3'/%3E%3Crect x='26' y='52' width='2' height='3'/%3E%3Crect x='26' y='58' width='2' height='3'/%3E%3Crect x='44' y='32' width='2' height='3'/%3E%3Crect x='39' y='44' width='2' height='3'/%3E%3Crect x='44' y='44' width='2' height='3'/%3E%3Crect x='49' y='44' width='2' height='3'/%3E%3Crect x='39' y='50' width='2' height='3'/%3E%3Crect x='39' y='56' width='2' height='3'/%3E%3Crect x='71' y='22' width='2' height='3'/%3E%3Crect x='61' y='28' width='2' height='3'/%3E%3Crect x='61' y='34' width='2' height='3'/%3E%3Crect x='61' y='40' width='2' height='3'/%3E%3Crect x='66' y='40' width='2' height='3'/%3E%3Crect x='61' y='52' width='2' height='3'/%3E%3Crect x='71' y='52' width='2' height='3'/%3E%3Crect x='66' y='58' width='2' height='3'/%3E%3Crect x='101' y='20' width='2' height='3'/%3E%3Crect x='101' y='44' width='2' height='3'/%3E%3Crect x='106' y='44' width='2' height='3'/%3E%3Crect x='106' y='50' width='2' height='3'/%3E%3Crect x='120' y='34' width='2' height='3'/%3E%3Crect x='115' y='40' width='2' height='3'/%3E%3Crect x='115' y='46' width='2' height='3'/%3E%3Crect x='125' y='46' width='2' height='3'/%3E%3Crect x='120' y='58' width='2' height='3'/%3E%3Crect x='125' y='58' width='2' height='3'/%3E%3Crect x='141' y='22' width='2' height='3'/%3E%3Crect x='146' y='28' width='2' height='3'/%3E%3Crect x='151' y='28' width='2' height='3'/%3E%3Crect x='146' y='34' width='2' height='3'/%3E%3Crect x='151' y='34' width='2' height='3'/%3E%3Crect x='151' y='52' width='2' height='3'/%3E%3Crect x='141' y='58' width='2' height='3'/%3E%3Crect x='151' y='58' width='2' height='3'/%3E%3Crect x='168' y='26' width='2' height='3'/%3E%3Crect x='163' y='32' width='2' height='3'/%3E%3Crect x='168' y='38' width='2' height='3'/%3E%3Crect x='178' y='44' width='2' height='3'/%3E%3Crect x='168' y='50' width='2' height='3'/%3E%3Crect x='178' y='56' width='2' height='3'/%3E%3Crect x='194' y='52' width='2' height='3'/%3E%3Crect x='194' y='58' width='2' height='3'/%3E%3Crect x='216' y='26' width='2' height='3'/%3E%3Crect x='211' y='32' width='2' height='3'/%3E%3Crect x='211' y='44' width='2' height='3'/%3E%3Crect x='216' y='50' width='2' height='3'/%3E%3Crect x='230' y='56' width='2' height='3'/%3E%3Crect x='235' y='56' width='2' height='3'/%3E%3C/svg%3E") 0 100% / 240px 64px repeat-x, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 64' shape-rendering='crispEdges'%3E%3Crect x='21' y='34' width='2' height='3'/%3E%3Crect x='21' y='46' width='2' height='3'/%3E%3Crect x='44' y='38' width='2' height='3'/%3E%3Crect x='44' y='50' width='2' height='3'/%3E%3Crect x='101' y='26' width='2' height='3'/%3E%3Crect x='101' y='32' width='2' height='3'/%3E%3Crect x='106' y='32' width='2' height='3'/%3E%3Crect x='106' y='56' width='2' height='3'/%3E%3Crect x='120' y='40' width='2' height='3'/%3E%3Crect x='130' y='46' width='2' height='3'/%3E%3Crect x='120' y='52' width='2' height='3'/%3E%3Crect x='151' y='22' width='2' height='3'/%3E%3Crect x='141' y='46' width='2' height='3'/%3E%3Crect x='141' y='52' width='2' height='3'/%3E%3Crect x='163' y='26' width='2' height='3'/%3E%3Crect x='168' y='32' width='2' height='3'/%3E%3Crect x='163' y='38' width='2' height='3'/%3E%3Crect x='168' y='44' width='2' height='3'/%3E%3Crect x='199' y='52' width='2' height='3'/%3E%3Crect x='211' y='38' width='2' height='3'/%3E%3Crect x='216' y='38' width='2' height='3'/%3E%3Crect x='225' y='38' width='2' height='3'/%3E%3Crect x='225' y='44' width='2' height='3'/%3E%3Crect x='225' y='50' width='2' height='3'/%3E%3C/svg%3E") 0 100% / 240px 64px repeat-x;
  animation: asc-windows 3.2s steps(1) infinite;
}
@keyframes asc-windows { 0%, 100% { mask-position: 0 100%, 0 100%; } 50% { mask-position: 0 100%, 0 300%; } }

/* ---------------- Aurora boreal: duas cortinas de luz ondulando sobre montanhas nevadas */
.bn-aurora-boreal {
  background:
    radial-gradient(circle at 12% 18%, #fff 0 0.7px, transparent 1.5px), radial-gradient(circle at 34% 9%, #fff 0 0.6px, transparent 1.3px),
    radial-gradient(circle at 63% 15%, #fff 0 0.8px, transparent 1.6px), radial-gradient(circle at 88% 8%, #fff 0 0.6px, transparent 1.3px),
    radial-gradient(circle at 47% 26%, rgba(255, 255, 255, 0.7) 0 0.6px, transparent 1.2px), radial-gradient(circle at 76% 30%, rgba(255, 255, 255, 0.7) 0 0.6px, transparent 1.2px),
    linear-gradient(180deg, #02040a, color-mix(in srgb, var(--_b2) 12%, #040611) 55%, color-mix(in srgb, var(--_b1) 18%, #050812));
}
.bn-aurora-boreal::before { background: radial-gradient(90% 60% at 50% 105%, color-mix(in srgb, var(--_b1) 28%, transparent), transparent 70%); }
.bn-aurora-boreal > .bnx::before, .bn-aurora-boreal > .bnx::after {
  inset: -14% -30% 24%;
  mask: var(--curtain) center / 100% 100% no-repeat, repeating-linear-gradient(90deg, #000 0 2px, rgba(0, 0, 0, 0.7) 2px 3px, rgba(0, 0, 0, 0.88) 3px 5px, rgba(0, 0, 0, 0.6) 5px 7px);
  mask-composite: intersect;
  animation: asc-aurora 15s ease-in-out infinite alternate;
}
/* a borda de baixo da cortina é a mais forte e o topo some no céu */
.bn-aurora-boreal > .bnx::before {
  --curtain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M0 21.6S13 24 25 24S38 25.2 50 25.2S63 21.7 75 21.7S88 14.8 100 14.8S113 8.8 125 8.8S138 0.9 150 0.9S163 -0.2 175 -0.2S188 -0.2 200 -0.2S213 7.4 225 7.4S238 12 250 12S263 21.2 275 21.2S288 21.5 300 21.5S313 28 325 28S338 22.6 350 22.6S363 17.7 375 17.7S388 14 400 14L400 84.8L375 86.3L350 87.8L325 87.1L300 85.1L275 77.8L250 75.2L225 70.2L200 60.3L175 60.6L150 60.9L125 65.1L100 68.4L75 75L50 77.2L25 87.1L0 88Z'/%3E%3C/svg%3E");
  background: linear-gradient(0deg, transparent 6%, color-mix(in srgb, var(--_b1) 70%, #fff) 14%, color-mix(in srgb, var(--_b1) 85%, transparent) 22%, color-mix(in srgb, var(--_b1) 45%, transparent) 42%, color-mix(in srgb, var(--_b3) 30%, transparent) 64%, transparent 86%);
}
.bn-aurora-boreal > .bnx::after {
  --curtain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath d='M0 13.8S13 12.5 25 12.5S38 18.1 50 18.1S63 23.5 75 23.5S88 28.2 100 28.2S113 31.8 125 31.8S138 35.6 150 35.6S163 40 175 40S188 37.9 200 37.9S213 34.3 225 34.3S238 31.3 250 31.3S263 27.6 275 27.6S288 19.4 300 19.4S313 16.3 325 16.3S338 9.5 350 9.5S363 9.7 375 9.7S388 14.2 400 14.2L400 90.7L375 93.4L350 95.2L325 99.1L300 99L275 92.8L250 84.4L225 82.6L200 76.9L175 75.7L150 74.9L125 82.4L100 90.8L75 94.7L50 97.6L25 97.4L0 96.9Z'/%3E%3C/svg%3E");
  background: linear-gradient(0deg, transparent 10%, color-mix(in srgb, var(--_b2) 75%, #fff) 20%, color-mix(in srgb, var(--_b2) 60%, transparent) 32%, color-mix(in srgb, var(--_b3) 34%, transparent) 58%, transparent 84%);
  opacity: 0.75;
  animation-duration: 21s;
  animation-direction: alternate-reverse;
}
@keyframes asc-aurora {
  0% { transform: translateX(-7%) skewX(-10deg) scaleY(0.95); }
  50% { transform: translateX(2%) skewX(6deg) scaleY(1.1); }
  100% { transform: translateX(8%) skewX(-4deg) scaleY(1); }
}
.bn-aurora-boreal::after {
  inset: auto 0 0 0;
  height: 48%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100' preserveAspectRatio='none'%3E%3Cpath fill='%23e6f4ff' fill-opacity='.8' d='M56 37.2L64 30L72 36.4L67.2 34L64 37.6L60.4 34.4ZM151 42.3L158 36L165 41.6L160.8 39.5L158 42.65L154.85 39.85ZM187 34.1L196 26L205 33.2L199.6 30.5L196 34.55L191.95 30.95ZM288 41.2L296 34L304 40.4L299.2 38L296 41.6L292.4 38.4ZM99 44.5L104 40L109 44L106 42.5L104 44.75L101.75 42.75ZM18 51.6L22 48L26 51.2L23.6 50L22 51.8L20.2 50.2Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat, linear-gradient(180deg, color-mix(in srgb, var(--_b1) 16%, #121a2c) 0%, #04060c 70%);
  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 100L0 62L22 48L38 60L64 30L82 52L104 40L130 66L158 36L176 50L196 26L222 54L246 44L270 64L296 34L318 52L344 42L372 62L400 46L400 100Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}

/* ---------------- Synthwave: sol listrado no horizonte, montanhas e o chão de grade vindo na sua direção */
.bn-synthwave {
  background:
    radial-gradient(30% 60% at 72% 46%, color-mix(in srgb, var(--_b1) 55%, transparent), transparent 70%),
    radial-gradient(circle at 18% 14%, #fff 0 0.7px, transparent 1.4px), radial-gradient(circle at 36% 30%, #fff 0 0.6px, transparent 1.2px), radial-gradient(circle at 52% 10%, #fff 0 0.7px, transparent 1.4px), radial-gradient(circle at 92% 18%, #fff 0 0.6px, transparent 1.3px),
    linear-gradient(180deg, color-mix(in srgb, var(--_b3) 65%, #07010f) 0%, color-mix(in srgb, var(--_b2) 50%, #170425) 40%, color-mix(in srgb, var(--_b1) 62%, #2c0623) 61.5%, #0b0214 62%);
}
.bn-synthwave::before {
  inset: auto;
  left: 64%;
  top: 6%;
  height: 66%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--_b1) 25%, #fff6c4) 0%, var(--_b1) 38%, color-mix(in srgb, var(--_b1) 45%, var(--_b2)) 70%, var(--_b2) 100%);
  mask: linear-gradient(#000 0 0) top / 100% 54% no-repeat, repeating-linear-gradient(180deg, #000 0 9%, transparent 9% 13%) bottom / 100% 46% no-repeat;
}
.bn-synthwave::after {
  inset: auto 0 38% 0;
  height: 22%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--_b2) 65%, #2a0a44) 0%, color-mix(in srgb, var(--_b3) 50%, #12021e) 45%, #0b0214);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60L0 44L40 30L70 42L110 18L150 40L190 28L230 44L270 14L310 38L350 26L400 42L400 60Z'/%3E%3C/svg%3E") 0 100% / 100% 100% no-repeat;
}
.bn-synthwave > .bnx {
  inset: 62% -70% -24%;
  overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--_b2) 30%, #0b0214), #0b0214 65%);
  transform: perspective(90px) rotateX(58deg);
  transform-origin: 50% 0;
}
.bn-synthwave > .bnx::before {
  top: -30px;
  background:
    linear-gradient(color-mix(in srgb, var(--_b1) 75%, #fff) 1.5px, transparent 1.5px) 0 0 / 34px 30px,
    linear-gradient(90deg, color-mix(in srgb, var(--_b2) 70%, #fff) 1.5px, transparent 1.5px) 0 0 / 34px 30px;
  animation: asc-grid 1s linear infinite;
}
@keyframes asc-grid { to { transform: translateY(30px); } }
.bn-synthwave > .bnx::after { background: linear-gradient(180deg, color-mix(in srgb, var(--_b1) 65%, transparent), transparent 22%); }

/* ================================================================ loja: na grade, a prévia só anima com o mouse em cima */
.shop-card:not(:hover, .selected) :is(.fr-fliperama, .fr-constelacao, .fr-miragem, .fr-estilhacos, .fr-cometa, .fr-inferno, .fr-tempestade, .fr-runas, .bn-ceu-estrelado, .bn-mar-aberto, .bn-chuva-vidro, .bn-brasas, .bn-sinal-perdido, .bn-cidade-8bit, .bn-aurora-boreal, .bn-synthwave),
.shop-card:not(:hover, .selected) :is(.fr-fliperama, .fr-constelacao, .fr-miragem, .fr-estilhacos, .fr-cometa, .fr-inferno, .fr-tempestade, .fr-runas, .bn-ceu-estrelado, .bn-mar-aberto, .bn-chuva-vidro, .bn-brasas, .bn-sinal-perdido, .bn-cidade-8bit, .bn-aurora-boreal, .bn-synthwave) :is(*, *::before, *::after),
.shop-card:not(:hover, .selected) :is(.fr-fliperama, .fr-constelacao, .fr-miragem, .fr-estilhacos, .fr-cometa, .fr-inferno, .fr-tempestade, .fr-runas, .bn-ceu-estrelado, .bn-mar-aberto, .bn-chuva-vidro, .bn-brasas, .bn-sinal-perdido, .bn-cidade-8bit, .bn-aurora-boreal, .bn-synthwave)::before,
.shop-card:not(:hover, .selected) :is(.fr-fliperama, .fr-constelacao, .fr-miragem, .fr-estilhacos, .fr-cometa, .fr-inferno, .fr-tempestade, .fr-runas, .bn-ceu-estrelado, .bn-mar-aberto, .bn-chuva-vidro, .bn-brasas, .bn-sinal-perdido, .bn-cidade-8bit, .bn-aurora-boreal, .bn-synthwave)::after {
  animation-play-state: paused;
}

/* movimento reduzido: o style.css já para tudo; aqui só arruma o quadro parado */
@media (prefers-reduced-motion: reduce) {
  .bn-ceu-estrelado > .bnx::before { opacity: 0.8; transform: translateX(60px); }
  .fr-tempestade > .frx::after { opacity: 0; }
}