/* botpedrin · animações v2 — fundo vivo (fundo.js), vidro e micro-animações. Usa as cores do tema atual. */
:root{--bp-ac:#6a22d4;--bp-bg:#f5f3fa;--bp-tx:#1b1430}

/* ---------- fundo vivo (criado pelo fundo.js, fica atrás de tudo) ---------- */
.bp-fundo{position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--bp-bg);pointer-events:none;contain:strict}
.bp-fundo canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.bp-fundo .bp-seda{opacity:0;transition:opacity .8s}
.bp-fundo[data-estilo="seda"] .bp-seda{opacity:1}
.bp-fundo.sem-webgl .bp-aurora{display:none}
.bp-fundo.sem-webgl{background:
  radial-gradient(900px 600px at 8% 0%,#e4daf5 0%,rgba(228,218,245,0) 62%),
  radial-gradient(800px 520px at 96% 8%,#ebe4f8 0%,rgba(235,228,248,0) 60%),
  radial-gradient(760px 520px at 50% 112%,#e8e0f7 0%,rgba(232,224,247,0) 60%),var(--bp-bg)}
.bp-grao{position:absolute;inset:0;opacity:.035;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- vidro: cabeçalho e cartões translúcidos por cima do fundo (classe bp-vidro no body) ---------- */
.bp-vidro header,.bp-vidro .topo{background:rgba(255,255,255,.7)!important;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.85);box-shadow:0 1px 0 rgba(27,20,48,.06)}
.bp-vidro .card,.bp-vidro .c{background:rgba(255,255,255,.8);
  /* sem backdrop-filter nos cartões: o fundo já é desfocado, e desfoque em cima de fundo animado é o que pesava */
  border-color:rgba(255,255,255,.9);
  box-shadow:0 1px 2px rgba(27,20,48,.04),0 20px 44px -28px rgba(106,34,212,.28)}

/* ---------- abas: risco azul que desliza ---------- */
.bp-abas{position:relative}
.bp-abas .bp-risco{position:absolute;bottom:-1px;height:2.5px;border-radius:2px 2px 0 0;background:var(--ac-tx,var(--bp-ac));
  transition:left .28s cubic-bezier(.2,.8,.2,1),width .28s cubic-bezier(.2,.8,.2,1)}
.bp-abas a{transition:color .2s}

/* ---------- entrada da página e dos cartões ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:bp-sai .18s ease-in both}
::view-transition-new(root){animation:bp-entra .32s cubic-bezier(.2,.8,.2,1) both}
@keyframes bp-sai{to{opacity:0;transform:translateY(-6px)}}
@keyframes bp-entra{from{opacity:0;transform:translateY(10px)}}
/* painel 08/11: "backwards" (era "both"). Mesmo efeito (só tem o "from"), mas o cartão não fica preso com transform
   depois da entrada: com "both" cada filho virava uma camada própria pra sempre e o quadrinho de período ia pra baixo
   do cartão seguinte */
.bp-entra>*{animation:bp-sobe .3s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(min(var(--i,0),8)*40ms)}
/* 09/11 (parecer de design): 320 ms, 8 px, atraso só nos 8 primeiros (do 9º em diante entram juntos) */
@keyframes bp-sobe{from{opacity:.001;transform:translateY(8px)}}
/* 08/11 (parecer): container dentro de container (a grade de quadros da Visão geral, as seções da Operação) não sobe
   inteiro: só os cartões de dentro, cada um com o seu --i */
.bp-entra>.bp-entra{animation:none}
.card,.c{transition:transform .22s ease,box-shadow .22s ease,border-color .25s}
.card:hover,.c:hover{transform:translateY(-2px);box-shadow:0 1px 2px rgba(27,20,48,.04),0 24px 48px -24px rgba(106,34,212,.38)}
.bp-ao-vivo{position:relative}
.bp-ao-vivo::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid currentColor;animation:bp-pulso 1.8s ease-out infinite}
@keyframes bp-pulso{from{opacity:.6;transform:scale(.6)}to{opacity:0;transform:scale(1.8)}}

@media (prefers-reduced-motion:reduce){
  .bp-entra>*,.bp-ao-vivo::after{animation:none!important}
  .bp-abas .bp-risco,.card,.c{transition:none!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ---------- encaixe no painel botpedrin (08/11): o que é só deste site ---------- */
/* guias: passam a ocupar a altura do header, pro risco encostar na borda de baixo (como na prévia; antes as guias
   tinham 36 px e o overflow delas cortava o traço). O traço antigo da guia acesa sai e o nome de transição dele
   (guia-ativa) passa pro risco, que desliza também de uma página pra outra. */
.guias.bp-abas{align-self:stretch;height:auto;align-items:center}
.guias.bp-abas a{height:36px}
.guias.bp-abas a.on::after{content:none}
/* 09/11 (parecer de design, etapa 3): o risco desliza da guia da página anterior pela posição (menu.js), não mais pela
   transição de página (sem view-transition-name, senão as duas animações brigam) */
.guias.bp-abas .bp-risco{bottom:0;pointer-events:none}
@media (max-width:820px){
  .guias.bp-abas{align-items:stretch}
  .guias.bp-abas a{height:auto}
}
/* ponto do "atualizado": o anel do bp-ao-vivo no lugar do pulso antigo; vermelho e parado quando o site não responde.
   O .vivo corta o que passa dele (overflow do tema): folga de 10 px em volta do ponto, sem mudar o lugar de nada */
.dot.bp-ao-vivo{animation:none;color:var(--ok)}
.dot.off.bp-ao-vivo{color:var(--bad)}
.dot.off.bp-ao-vivo::after{content:none}
.vivo:has(.bp-ao-vivo){padding:6px 0 6px 10px;margin:-6px 0 -6px -10px}
/* o cartão com o mouse (sobe com transform e vira camada própria: dica dos gráficos) ou com o quadrinho de período
   aberto fica por cima do vizinho, senão a dica some embaixo do cartão seguinte */
.bp-vidro .card:hover,.bp-vidro .card:has(.pop.aberto){z-index:2}
/* painel 08/11 (leve): o pulso das bolinhas "ok" do tema (.st.ok e .chip.st-ok) era box-shadow animado, que obriga o
   Chrome a redesenhar a página a cada quadro. Com uma pílula "no ar" em cada cartão da Bots, era o que mais pesava
   (no Chrome de teste: 10 quadros/s com, 35 sem). Mesmo desenho, mesma cor e tempo, com transform/opacity num ::after,
   que o Chrome anima sem redesenhar. O tema.css fica como está. */
.st.ok::before,.chip.st-ok .pt{animation:none}
.st.ok,.chip.st-ok .pt{position:relative}
.st.ok::after,.chip.st-ok .pt::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--ok);
  opacity:0;pointer-events:none;animation:bp-pulso-pt 2.2s infinite}
.st.ok::after{left:8px;top:50%;margin-top:-3.5px}
.chip.st-ok .pt::after{left:0;top:0}
@keyframes bp-pulso-pt{0%{opacity:.55;transform:scale(1)}70%{opacity:0;transform:scale(3)}100%{opacity:0;transform:scale(3)}}