/* ============================================================
   Just Ball · o busto animado do Jordan no perfil (31/10/2026, js/avatar-jb.js).
   Ocupa a mesma caixa da foto (100% do .pc__ph, do .jg-av--lg e do .av da folha), com o recorte da moldura,
   e a foto continua por baixo até as imagens descerem. Só transform e opacity se mexem.
   ============================================================ */
.jbav{position:relative;display:grid;place-items:center;width:100%;height:100%;overflow:hidden;border-radius:inherit;isolation:isolate;pointer-events:none}
.jbav__cena{position:absolute;inset:0;display:block;opacity:0;transition:opacity .25s linear;background:radial-gradient(80% 80% at 50% 30%,#1d2a0c,#0a0a0a)}
.jbav.is-pronto .jbav__cena{opacity:1}
.jbav__cab{position:absolute;display:block;overflow:hidden}
.jbav .jbav__folha,.jbav .jbav__corpo{position:absolute;display:block;max-width:none;object-fit:fill;-webkit-user-drag:none}
.jbav .jbav__folha{left:0;top:0;will-change:transform}
.jbav .jbav__corpo{will-change:transform}
/* caixa:ini */.jbav .jbav__corpo{left:-4.167%;top:0%;width:108.333%;height:104.167%;transform-origin:49.615% 104.800%}.jbav__cab{left:0;top:0;width:42.382%;height:68.424%;transform:translate3d(67.9993%,-0.5075%,0)}.jbav .jbav__folha{width:900%;height:600%}/* caixa:fim */

/* ============================================================
   03/11/2026 (Jordan): fundo do busto com mais textura e luz. Três propostas atrás da chave 'avfundo'
   (só Visualização Teste); o busto por cima não muda nada. As camadas ficam ATRÁS das imagens
   (::before e ::after da cena, que nascem antes dos filhos). Só transform e opacity animam.
   ============================================================ */
.jbav[class*="jbav--f"] .jbav__cena::before,.jbav[class*="jbav--f"] .jbav__cena::after{content:"";position:absolute;pointer-events:none}
/* A · quadra: o círculo do lance livre como anel atrás da cabeça e as linhas do garrafão descendo, lima apagado, grão, luz parada de cima */
.jbav--fquadra .jbav__cena{background:
  radial-gradient(70% 55% at 50% 0%,rgba(197,255,26,.16),rgba(197,255,26,0) 70%),
  url("../assets/visual3/grao-suave.webp") 0 0/64px 64px,
  linear-gradient(180deg,#121a0a 0%,#0b0e07 55%,#070806 100%)}
.jbav--fquadra .jbav__cena::before{inset:0;opacity:.55;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23c5ff1a' stroke-opacity='.6' stroke-width='1.2'><circle cx='50' cy='31' r='27'/><path d='M23 31V100M77 31V100' stroke-dasharray='0'/></svg>") center/100% 100% no-repeat}
/* B · refletor: um feixe de arena que balança devagar sobre a cabeça, e o chão respondendo */
.jbav--frefletor .jbav__cena{background:
  url("../assets/visual3/grao-suave.webp") 0 0/64px 64px,
  radial-gradient(90% 60% at 50% 100%,#13200a,#080907 70%)}
.jbav--frefletor .jbav__cena::before{left:-30%;right:-30%;top:-40%;height:120%;transform-origin:50% 0;
  background:conic-gradient(from 166deg at 50% 0%,rgba(230,255,170,0) 0deg,rgba(230,255,170,.20) 14deg,rgba(230,255,170,0) 28deg);
  animation:jbavFeixe 11s cubic-bezier(.45,0,.55,1) infinite alternate}
.jbav--frefletor .jbav__cena::after{left:10%;right:10%;bottom:-8%;height:30%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(197,255,26,.22),rgba(197,255,26,0));animation:jbavChao 11s cubic-bezier(.45,0,.55,1) infinite alternate}
@keyframes jbavFeixe{from{transform:rotate(-9deg)}to{transform:rotate(9deg)}}
@keyframes jbavChao{from{transform:translateX(-7%);opacity:.7}to{transform:translateX(7%);opacity:1}}
/* C · janela 7: o 7 da marca inteiro (contorno lima e preenchimento leve, geometria do sete do logo) com a barra atrás da testa, e um brilho que corre devagar pela diagonal */
.jbav--fsete .jbav__cena{background:
  url("../assets/visual3/grao-suave.webp") 0 0/64px 64px,
  radial-gradient(80% 80% at 50% 30%,#18240b,#080907)}
.jbav--fsete .jbav__cena::before{inset:0;opacity:.9;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-70 -8 370 376'><path d='M-60 0H288L163 360H25L115 100H-60Z' fill='%23c5ff1a' fill-opacity='.17' stroke='%23c5ff1a' stroke-opacity='.85' stroke-width='3' stroke-linejoin='miter'/></svg>") 80% 12%/auto 88% no-repeat}
.jbav--fsete .jbav__cena::after{left:-60%;top:-60%;width:80%;height:220%;opacity:0;
  background:linear-gradient(90deg,rgba(197,255,26,0),rgba(214,255,120,.20),rgba(197,255,26,0));
  transform:translate3d(0,0,0) rotate(28deg);animation:jbavBrilho 7s cubic-bezier(.45,0,.55,1) infinite}
@keyframes jbavBrilho{0%{transform:translate3d(0,0,0) rotate(28deg);opacity:0}15%{opacity:1}55%{opacity:1}70%,100%{transform:translate3d(260%,0,0) rotate(28deg);opacity:0}}
@media (prefers-reduced-motion:reduce){.jbav[class*="jbav--f"] .jbav__cena::before,.jbav[class*="jbav--f"] .jbav__cena::after{animation:none}.jbav--fsete .jbav__cena::after{opacity:0}}
.jbav[class*="jbav--f"] .jbav__cena::before,.jbav[class*="jbav--f"] .jbav__cena::after{z-index:0}
.jbav[class*="jbav--f"] .jbav__cab,.jbav[class*="jbav--f"] .jbav__corpo{z-index:1}

/* 03/11/2026: convite "quero o meu" no perfil público de quem tem personagem (chave 'quero') */
.jbqm{margin:14px 0 2px;padding:12px 14px;border-radius:var(--rs,10px);border:1px solid rgba(197,255,26,.18);background:rgba(197,255,26,.05);display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center}
.jbqm__k{grid-column:1;font:700 9.5px/1 var(--mono,monospace);letter-spacing:.16em;text-transform:uppercase;color:var(--lime,#c5ff1a)}
.jbqm__t{grid-column:1;margin:0;font:500 13px/1.4 var(--body,system-ui);color:#d6d6d6}
.jbqm__b{grid-column:2;grid-row:1/3;height:36px;padding:0 14px;border-radius:999px;border:0;background:var(--lime,#c5ff1a);color:#050505;font:800 12.5px/1 var(--body,system-ui);white-space:nowrap;cursor:pointer}
.jbqm__b:active{transform:scale(.97)}
.jbqm__d{grid-column:1/-1;margin:6px 0 0;font:500 12px/1.45 var(--body,system-ui);color:var(--mute,#8f8f8f)}
.jbqm__d[hidden]{display:none}