/* Ponteiro-símbolo da Bessa (30/09/2026, rodada N1). Estilos do ponteiro (mouse), da palavra do botão, da cifra das letras e do toque (celular).
   O <link> do index.html só aplica este arquivo com mouse (media="(hover:hover) and (pointer:fine)"); no celular o ponteiro.js troca esse
   "media" por "all" (a regra comum abaixo vale em qualquer aparelho; o que é só do mouse fica dentro do @media do fim).
   O ponto dourado é a ponta do cursor (o "." do "B."): o símbolo de cada parte da página nasce dele. Símbolo e palavra em transform/opacity;
   o JS escreve a posição direto no evento do mouse (sem laço contínuo). Pausa do site: o JS desliga tudo (não depende deste arquivo).
   "Reduzir movimento": o JS usa o modo calmo (só troca de letras e opacidade); aqui as animações de CSS também são desligadas. */
.bp-anel{display:none!important}

/* ---------- comum a qualquer aparelho ---------- */
.bpt,.bpt-t-raiz,.bpt-cf-camada,.bpt-defs{
 --bp-ink:#F4ECDE;--bp-ink-hi:#FFFFFF;--bp-ink-lo:#D9CCB4;--bp-ouro:#E4C078;--bp-ouro-hi:#F2E0BC;--bp-ouro-spec:#FFF3D2;--bp-ouro-lo:#967E4F;
 --bp-halo:rgba(14,13,12,.55);--bp-sombra:rgba(0,0,0,.55);--bp-ouro-glow:rgba(228,192,120,.45);
 --bp-sel-bg:linear-gradient(180deg,rgba(36,32,27,.94),rgba(13,12,11,.96));--bp-sel-tx:#F4ECDE;--bp-fio:rgba(228,192,120,.9);--bp-sel-hi:rgba(255,244,214,.16);--bp-sel-sh:rgba(0,0,0,.4)}
.bpt-defs{position:absolute;width:0;height:0;overflow:hidden}
/* símbolo: caixa de 64 px (o desenho nasce em 48 e os traços crescem juntos); contorno de luz de meio pixel e sombra curta e nítida (sem desfoque) */
.bpt-p{position:absolute;left:-32px;top:-32px;width:64px;height:64px;overflow:visible;color:var(--bp-ink);shape-rendering:geometricPrecision;
 filter:drop-shadow(0 0 .5px var(--bp-halo)) drop-shadow(0 1px 0 var(--bp-sombra))}
.bpt-p .k{fill:none;stroke:url(#bptIs);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.bpt-p .o{fill:none;stroke:url(#bptOs);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.bpt-p .f{fill:url(#bptIb);stroke:none}
.bpt-p .fo{fill:url(#bptOb);stroke:none}
.bpt-p .g{stroke:var(--bp-ink-lo);stroke-width:.3;stroke-linejoin:round;paint-order:stroke}
.bpt-sym{position:absolute;left:0;top:0;width:0;height:0}
/* o ponto: hotspot exato de todos os símbolos; pérola de ouro de 8 px com reflexo, aro de luz e sombra curta */
.bpt-ponto,.bpt-t-ponto{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;
 background:radial-gradient(circle at 30% 26%,#FFFFFF 0 9%,rgba(255,255,255,0) 24%),radial-gradient(circle at 34% 30%,var(--bp-ouro-hi) 0 24%,var(--bp-ouro) 58%,var(--bp-ouro-lo) 100%);
 box-shadow:0 0 0 .75px var(--bp-halo),0 1px 0 var(--bp-sombra),0 0 8px var(--bp-ouro-glow)}
.bpt-onda,.bpt-t-anel{position:absolute;left:-22px;top:-22px;width:44px;height:44px;border-radius:50%;border:1px solid var(--bp-ouro);box-shadow:0 0 0 .5px var(--bp-halo);opacity:0}

/* a palavra do botão: selo de vidro escuro (ou marfim, sobre fundo claro), fio dourado, Instrument Sans em versalete espaçado */
.bpt-pal{position:absolute;left:0;top:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;height:30px;padding:0 13px 0 15px;border-radius:99px;
 font:600 14px/1 'Instrument Sans','Instrument Fallback',-apple-system,system-ui,'Segoe UI',sans-serif;letter-spacing:.17em;text-transform:uppercase;white-space:nowrap;font-variant-numeric:tabular-nums;
 color:var(--bp-sel-tx);background:var(--bp-sel-bg);
 box-shadow:0 0 0 1px var(--bp-fio),inset 0 1px 0 var(--bp-sel-hi),0 2px 0 var(--bp-sel-sh);
 opacity:0;transform:translate(calc(-50% + var(--pal-dx,0px)),calc(var(--pal-y,16px) + 6px));pointer-events:none;
 transition:opacity .16s,transform .3s cubic-bezier(.16,1,.3,1)}
.bpt.pal .bpt-pal{opacity:1;transform:translate(calc(-50% + var(--pal-dx,0px)),var(--pal-y,16px))}
.bpt-pal b{font-weight:inherit}

/* a cifra das letras do link: camada fora do DOM da página (as letras ficam num shadow root, com os estilos no ponteiro.js); o texto de verdade fica transparente só durante o efeito (a largura não muda) */
.bpt-cf-camada{position:fixed;left:0;top:0;width:0;height:0;z-index:2147482999;pointer-events:none;contain:layout style}
[data-bpt-cf],[data-bpt-cf] *{-webkit-text-fill-color:transparent!important;text-shadow:none!important}
[data-bpt-cf]::before,[data-bpt-cf]::after,[data-bpt-cf] *::before,[data-bpt-cf] *::after{-webkit-text-fill-color:currentColor!important}
/* S4 (07/10): onde há Highlight API, o texto real fica visível e só as 3 a 4 letras da onda ficam transparentes (o glifo de hash da camada fica no lugar delas) */
::highlight(bpt-cf){color:transparent;-webkit-text-fill-color:transparent;text-shadow:none}

/* toque (celular/iPhone): o símbolo da parte da página nasce no ponto do dedo, com anel, e se dissolve; tudo animado pelo JS (Web Animations) */
.bpt-t-raiz{position:fixed;left:0;top:0;width:0;height:0;z-index:2147483000;pointer-events:none;contain:layout style}
.bpt-t,.bpt-t-sim,.bpt-t .bpt-sym{position:absolute;left:0;top:0;width:0;height:0}
.bpt-t,.bpt-t .bpt-sym{display:none}.bpt-t.v,.bpt-t .bpt-sym.on{display:block}
.bpt-t-sim{opacity:0}
.bpt-t-ponto,.bpt-t-anel{opacity:0}
.bpt-t .p-b{animation:bttDa .24s .02s cubic-bezier(.16,1,.3,1) both}.bpt-t .p-esq{animation:bttDa .24s .01s cubic-bezier(.16,1,.3,1) both}
.bpt-t .p-dir{animation:bttDa .26s .06s cubic-bezier(.16,1,.3,1) both}.bpt-t .p-col{animation:bttTrava .24s .01s cubic-bezier(.16,1,.3,1) both}
.bpt-t .p-cruz{animation:bttDe .24s .05s cubic-bezier(.16,1,.3,1) both}.bpt-t .p-sel{animation:bttCarimbo .24s .01s cubic-bezier(.16,1,.3,1) both}
.bpt-t .p-r{animation:bttDa .24s .03s cubic-bezier(.16,1,.3,1) both}.bpt-t .p-estrela{animation:bttNasce .3s .01s cubic-bezier(.16,1,.3,1) both}
.bpt-t .p-sat{animation:bttDe .26s .1s cubic-bezier(.16,1,.3,1) both}.bpt-t .p-escudo{animation:bttDe .24s .01s cubic-bezier(.16,1,.3,1) both}
.bpt-t .p-corpo{animation:bttDe .22s .04s cubic-bezier(.16,1,.3,1) both}.bpt-t .p-gancho{transform-origin:28.5px 19px;animation:bttFecha .28s .07s cubic-bezier(.16,1,.3,1) both}
.bpt-t .p-int{animation:bttCai .24s .01s cubic-bezier(.16,1,.3,1) both}.bpt-t .p-seta{animation:bttDa .26s .07s cubic-bezier(.16,1,.3,1) both}
@keyframes bttDa{from{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:none}}
@keyframes bttDe{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
@keyframes bttTrava{from{opacity:0;transform:scale(1.22)}to{opacity:1;transform:none}}
@keyframes bttCarimbo{from{opacity:0;transform:scale(1.2) rotate(-8deg)}to{opacity:1;transform:rotate(-8deg)}}
@keyframes bttNasce{from{opacity:0;transform:scale(.5) rotate(-22deg)}to{opacity:1;transform:none}}
@keyframes bttFecha{0%{transform:translateY(-3px) rotate(-10deg)}100%{transform:none}}
@keyframes bttCai{0%{opacity:0;transform:translateY(-5px)}100%{opacity:1;transform:none}}

/* estouro de poeira de ouro ao escolher uma Rafa (mouse): transform e opacity via Web Animations */
.bpt-burst{position:fixed;left:0;top:0;width:0;height:0;z-index:2147483001;pointer-events:none}
.bpt-fr{position:absolute;left:0;top:0;pointer-events:none;will-change:transform,opacity}
.bpt-fr.d{background:linear-gradient(160deg,#FFF4D6,#E4C078 50%,#9C7A3C);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.bpt-fr.p{background:radial-gradient(circle,#FFF6E0 0 35%,rgba(228,192,120,.9) 60%,rgba(228,192,120,0));border-radius:50%}
.bpt-fr.r{height:1px;width:30px;transform-origin:0 50%;background:linear-gradient(90deg,rgba(255,244,214,.95),rgba(228,192,120,0))}
.bpt-fr.a{width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:1px solid rgba(241,220,160,.85)}
.bpt-fr.l{width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,240,205,.55),rgba(228,192,120,.14) 55%,rgba(228,192,120,0))}
.bpt-fr.g{font:500 10px/1 'JetBrains Mono',ui-monospace,monospace;color:#E9CF94;text-shadow:0 0 5px rgba(228,192,120,.45)}

/* "reduzir movimento": nada de CSS animado; a palavra e o símbolo só aparecem (opacidade) e as letras só trocam */
@media (prefers-reduced-motion:reduce){
 .bpt-t .bpt-p *,.bpt-sym .bpt-p *{animation:none!important}
 .bpt-pal{transition:none!important;transform:translate(calc(-50% + var(--pal-dx,0px)),var(--pal-y,16px))!important}
}

/* ---------- só mouse ---------- */
@media (hover:hover) and (pointer:fine){
 /* S5 (07/10): a PONTA é o cursor do sistema, a pérola em imagem com o ponto quente no centro: o sistema operacional a desenha, então ela
    nunca congela quando a página trabalha (antes a seta sumia e tudo dependia do JS). Ouro nas telas escuras; vinho nas claras (data-bpt-claro,
    posto pelo ponteiro.js). O símbolo grande e a palavra seguem desenhados pelo JS em volta dela. Onde se digita e na conversa por voz, volta o nativo. */
 html.bpt-ativo,html.bpt-ativo *{cursor:url(ponta-ouro.png) 16 16,default!important;cursor:-webkit-image-set(url(ponta-ouro.png) 1x,url(ponta-ouro@2x.png) 2x) 16 16,default!important;cursor:image-set(url(ponta-ouro.png) 1x,url(ponta-ouro@2x.png) 2x) 16 16,default!important}
 html.bpt-ativo [data-bpt-claro],html.bpt-ativo [data-bpt-claro] *{cursor:url(ponta-vinho.png) 16 16,default!important;cursor:-webkit-image-set(url(ponta-vinho.png) 1x,url(ponta-vinho@2x.png) 2x) 16 16,default!important;cursor:image-set(url(ponta-vinho.png) 1x,url(ponta-vinho@2x.png) 2x) 16 16,default!important}
 .bpt .bpt-ponto{display:none} /* a pérola desenhada pelo JS cede lugar à do sistema (no toque, a .bpt-t-ponto continua) */
 html.bpt-ativo :is(input:not([type=button]):not([type=submit]):not([type=checkbox]):not([type=radio]):not([type=range]),textarea,[contenteditable="true"]){cursor:text!important}
 html.bpt-ativo :is(#rafa-voz,#rafa-voz *,elevenlabs-convai,[data-bpt-nativo],[data-bpt-nativo] *){cursor:auto!important}

 .bpt{position:fixed;left:0;top:0;z-index:2147483000;width:0;height:0;pointer-events:none;opacity:0;transition:opacity .16s;will-change:transform;contain:layout style}
 .bpt.on{opacity:1}
 .bpt.oculto{opacity:0}
 .bpt-lean,.bpt-in{position:absolute;left:0;top:0;width:0;height:0}
 .bpt-lean{will-change:transform}
 .bpt-in{transition:transform .42s cubic-bezier(.16,1,.3,1),opacity .18s}
 /* sobre link/botão a palavra toma o lugar do símbolo */
 .bpt.pal .bpt-in{opacity:0;transform:scale(.8)}

 .bpt-sym{opacity:0;visibility:hidden;transform:scale(.86);transition:opacity .16s,transform .2s,visibility 0s .2s}
 .bpt-sym.on{opacity:1;visibility:visible;transform:none;transition:opacity .3s .04s,transform .55s .02s cubic-bezier(.16,1,.3,1),visibility 0s}
 .bpt.press .bpt-sym.on{transform:scale(.9);transition:transform .1s ease-out}

 .bpt-onda{left:-22px;top:-22px}
 .bpt-mira{position:absolute;left:-15px;top:-15px;width:30px;height:30px;border-radius:50%;opacity:0;transform:scale(.55);
  border:1px solid var(--bp-fio);box-shadow:0 0 0 .5px var(--bp-halo),inset 0 0 9px var(--bp-ouro-glow);
  transition:opacity .22s,transform .45s cubic-bezier(.16,1,.3,1)}
 .bpt.acao .bpt-mira{opacity:1;transform:none}
 .bpt.press .bpt-mira{transform:scale(.8);transition:transform .1s ease-out}
 /* S4/S5 · "efeitos rects": sobre o clicável a mira vira um retângulo de luz que abraça o alvo (6 px de folga, cantos = raio + 4 px; no ímã,
    folga maior e parado no repouso), fio dourado fino e brilho suave por dentro; nunca captura clique nem muda o botão. S5: a geometria troca de
    uma vez (sem transição de largura/altura); o "assentar" é uma animação curta de opacidade e escala no contorno (Web Animations, no compositor). */
 .bpt.rect .bpt-mira{opacity:0;transform:scale(.55);transition:opacity .1s,transform .2s}
 .bpt-rect{position:fixed;left:0;top:0;width:0;height:0;z-index:2147482998;pointer-events:none;opacity:0;will-change:opacity;contain:layout style}
 .bpt-rect.v{opacity:1}
 .bpt-rect.sai{transition:opacity .11s ease-out}
 .bpt-rect i{position:absolute;left:0;top:0;width:30px;height:30px;border-radius:15px;box-sizing:border-box;border:1px solid var(--bp-fio);
  box-shadow:0 0 0 .5px var(--bp-halo),0 0 16px -3px var(--bp-ouro-glow),inset 0 0 14px -6px var(--bp-ouro-glow);will-change:transform,opacity}
 .bpt-rect.rolando{opacity:0!important;transition:none!important}
 /* menos disputa: com o ponteiro num clicável, o fundo decorativo DAQUELA tela baixa um instante (data-bpt-foco, posto pelo ponteiro.js); nada sai */
 /* S5: só por classe (.bg-vivo, .cr-fundo). O seletor por atributo [style*=…] saiu: ao ligar data-bpt-foco ele obrigava o navegador a reconferir
    o estilo de todo elemento com estilo embutido da tela (são muitos nesta página), a cada entrada e saída de alvo. */
 [data-screen-label] :is(.bg-vivo,.cr-fundo){transition:opacity .45s ease}
 [data-bpt-foco] :is(.bg-vivo,.cr-fundo){opacity:.6}
 .bpt-cap{position:absolute;left:0;top:0;transform:translate(-50%,46px);padding:5px 10px 5px 11px;border-radius:99px;font:500 9px/1.2 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;color:#EFE4CF;background:rgba(14,13,12,.72);border:.5px solid rgba(201,165,94,.4);box-shadow:0 2px 0 rgba(0,0,0,.3);opacity:0;transition:opacity .3s,transform .42s cubic-bezier(.16,1,.3,1)}
 .bpt-cap.v{opacity:1}
 .bpt.pal .bpt-cap{opacity:0!important}

 /* entradas por símbolo: desaceleração longa, sem mola; transform e opacidade em camadas HTML (compositor) */
 .bpt-sym.on .p-b{animation:bptDa .55s .05s cubic-bezier(.16,1,.3,1) both}
 .bpt-sym.on .p-esq{animation:bptDa .55s .02s cubic-bezier(.16,1,.3,1) both}
 .bpt-sym.on .p-dir{animation:bptDa .6s .12s cubic-bezier(.16,1,.3,1) both}
 .bpt-sym.on .p-col{animation:bptTrava .55s .02s cubic-bezier(.16,1,.3,1) both}
 .bpt-sym.on .p-cruz{animation:bptDe .55s .1s cubic-bezier(.16,1,.3,1) both}
 .bpt-sym.on .p-sel{animation:bptCarimbo .55s .02s cubic-bezier(.16,1,.3,1) both}
 .bpt-sym.on .p-r{animation:bptDa .55s .05s cubic-bezier(.16,1,.3,1) both}
 .bpt-sym.on .p-estrela{animation:bptNasce .65s .02s cubic-bezier(.16,1,.3,1) both}
 .bpt-sym.on .p-sat{animation:bptDe .55s .2s cubic-bezier(.16,1,.3,1) both}
 .bpt-sym.on .p-escudo{animation:bptDe .5s .02s cubic-bezier(.16,1,.3,1) both}
 .bpt-sym.on .p-corpo{animation:bptDe .45s .08s cubic-bezier(.16,1,.3,1) both}
 .bpt-sym.on .p-gancho{transform-origin:28.5px 19px;animation:bptFecha .6s .14s cubic-bezier(.16,1,.3,1) both}
 .bpt-sym.on .p-int{animation:bptCai .55s .02s cubic-bezier(.16,1,.3,1) both}
 .bpt-sym.on .p-seta{animation:bptDa .55s .14s cubic-bezier(.16,1,.3,1) both}
 @keyframes bptDa{from{opacity:0;transform:translateX(-5px)}to{opacity:1;transform:none}}
 @keyframes bptDe{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
 @keyframes bptTrava{from{opacity:0;transform:scale(1.22)}to{opacity:1;transform:none}}
 @keyframes bptCarimbo{from{opacity:0;transform:scale(1.2) rotate(-8deg)}to{opacity:1;transform:rotate(-8deg)}}
 @keyframes bptNasce{from{opacity:0;transform:scale(.5) rotate(-22deg)}to{opacity:1;transform:none}}
 @keyframes bptFecha{0%{transform:translateY(-3px) rotate(-10deg)}100%{transform:none}}
 @keyframes bptCai{0%{opacity:0;transform:translateY(-5px)}100%{opacity:1;transform:none}}
 /* sobre uma Rafa (seletor): a faísca gira um oitavo de volta e cresce de leve, convida ao clique */
 .bpt-sym[data-s="crie"] .p-estrela path{transform-origin:24px 24px;transition:transform .6s cubic-bezier(.16,1,.3,1)}
 .bpt.rafa .bpt-sym[data-s="crie"] .p-estrela path{transform:rotate(45deg) scale(1.08)}
}
@media (prefers-reduced-motion:reduce){.bpt.pal .bpt-in{transform:none!important}.bpt-in{transition:none!important}.bpt-rect,.bpt-rect i{transition-property:opacity!important}}
/* pausa do site ou aparelho sem mouse: o desenho do mouse não existe (o JS nem o cria); a seta do sistema volta sozinha */
@media (hover:none),(pointer:coarse){.bpt,.bpt-burst,.bpt-rect{display:none!important}}