/*  Biglink · logotipo
    https://cdn.biglink.io/brand/v1/logos/logo.css
    Uso: <link rel="stylesheet" href="https://cdn.biglink.io/brand/v1/logos/logo.css">

    O logo entra como mascara CSS: a silhueta vem do SVG e a cor vem de uma
    variavel. Uma classe cobre as tres formas em qualquer cor, e trocar de tema
    vira trocar um token em vez de trocar de arquivo.

    A batida de coracao e a identidade em movimento. Onde couber animacao,
    o logo pulsa. Em e-mail, nunca: cliente de e-mail remove animacao de CSS.

    © Biglink AI Brasil LTDA. Uso restrito a projetos da Biglink.  */

/* --------------------------------------------------------------- tokens */
:root{
  --bl-logo-cor: #03614d;      /* Bangladesh, para fundo claro */
  --bl-logo-altura: 40px;
  --bl-logo-ritmo: 2s;
}

/* Tema. O padrao segue o sistema; a escolha explicita da pessoa vence, nos
   dois sentidos, para quem oferece um seletor claro/escuro/sistema. */
@media (prefers-color-scheme: dark){
  :root{ --bl-logo-cor: #ffffff; }
}
[data-tema="dark"], [data-theme="dark"], .dark, .bl-escuro{ --bl-logo-cor: #ffffff; }
[data-tema="light"], [data-theme="light"], .bl-claro{ --bl-logo-cor: #03614d; }

/* --------------------------------------------------------------- o logo */
/* A mascara usa so o canal alfa do SVG, entao qualquer variante de cor serve
   de fonte: a silhueta e a mesma nas cinco. Fixamos a bangladesh para ter um
   arquivo so no cache. */
.bl-logo{
  display: inline-block;
  flex: none;
  height: var(--bl-logo-altura);
  background-color: var(--bl-logo-cor);
  -webkit-mask: var(--bl-logo-arte) center / contain no-repeat;
          mask: var(--bl-logo-arte) center / contain no-repeat;
}

.bl-logo--horizontal{
  --bl-logo-arte: url(https://cdn.biglink.io/brand/v1/logos/svg/logo-horizontal-bangladesh.svg);
  aspect-ratio: 593.34 / 150;
}
.bl-logo--vertical{
  --bl-logo-arte: url(https://cdn.biglink.io/brand/v1/logos/svg/logo-vertical-bangladesh.svg);
  aspect-ratio: 447.05 / 313.41;
}
.bl-logo--simbolo{
  --bl-logo-arte: url(https://cdn.biglink.io/brand/v1/logos/svg/simbolo-bangladesh.svg);
  aspect-ratio: 139.8 / 140.07;
}

/* Cor fixa, para quando o logo nao deve seguir o tema. */
.bl-logo--bangladesh{ --bl-logo-cor: #03614d; }
.bl-logo--caribbean { --bl-logo-cor: #00ed82; }
.bl-logo--mountain  { --bl-logo-cor: #2bc294; }
.bl-logo--rich-black{ --bl-logo-cor: #262626; }
.bl-logo--branco    { --bl-logo-cor: #ffffff; }
/* Segue a cor do texto do container. Util dentro de botao e de menu. */
.bl-logo--herdar    { --bl-logo-cor: currentColor; }

.bl-logo--p{ --bl-logo-altura: 24px; }
.bl-logo--m{ --bl-logo-altura: 40px; }
.bl-logo--g{ --bl-logo-altura: 64px; }

/* --------------------------------------------------------------- a batida */
/* Dois toques por ciclo, como batimento de verdade: o primeiro mais forte, o
   segundo mais leve, e uma pausa longa ate o proximo. Um pulso unico e
   uniforme parece respiracao, nao coracao. */
@keyframes bl-pulsar{
  0%, 100% { transform: scale(1); }
  14%      { transform: scale(1.06); }
  28%      { transform: scale(1.01); }
  42%      { transform: scale(1.04); }
  70%      { transform: scale(1); }
}

.bl-pulsar{
  animation: bl-pulsar var(--bl-logo-ritmo) ease-in-out infinite;
  transform-origin: center;
  will-change: transform;
}
.bl-pulsar--devagar{ --bl-logo-ritmo: 3s; }
.bl-pulsar--rapido { --bl-logo-ritmo: 1.2s; }

/* Movimento repetido e infinito e gatilho de enxaqueca e de desconforto
   vestibular. Quem pediu menos movimento no sistema recebe o logo parado, e
   isso nao e opcional. */
@media (prefers-reduced-motion: reduce){
  .bl-pulsar{ animation: none; }
}