/* ============================================================================
   shark-web · MARCA
   ----------------------------------------------------------------------------
   O logo, com definicao fechada. Existe porque a queixa era concreta e
   recorrente: as paginas acabavam com a palavra "Shark" escrita em Space
   Grotesk no lugar do logo.

   E isso nunca vai passar por logo. O "A" do wordmark da marca NAO tem
   travessao — e um V invertido. Nenhuma fonte reproduz aquele desenho, e quem
   conhece a marca ve a diferenca na hora.

   REGRA: texto nao substitui logo. Se o arquivo nao estiver disponivel, use
   .sw-logo--texto, que e um caso declarado de emergencia, com aparencia
   propria — e nao uma imitacao malfeita do lockup.

   ---------------------------------------------------------------------------
   Os tres arquivos, e quando usar cada um:

     .sw-logo--completa   icone + wordmark. Rodape, tela de abertura, e-mail.
     .sw-logo--wordmark   so a palavra. Nav de desktop, cabecalho de documento.
     .sw-logo--icone      so o tubarao. Nav de celular, favicon, avatar, selo.

   O ICONE e SVG INLINE, com `fill: currentColor` — herda a tinta do registro e
   funciona em qualquer protocolo. O WORDMARK e PNG branco invertido por token,
   porque a marca nao entregou vetor da versao nova.

   Mascara foi tentada e REPROVADA: nao se aplica em `file://`, e falha calada.
   O porque esta no comentario do icone, abaixo.

   NOME: este componente e .sw-logo, nao .sw-marca. `.sw-marca` ja existe no
   tipo.css como o marca-texto (realce com fundo no acento) — as duas coisas com
   o mesmo nome se sobrepoem na cascata em silencio, e foi o que aconteceu na
   primeira versao deste arquivo.
   ========================================================================== */

.sw-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--sw-logo-gap, 0.55em);
  color: var(--sw-tinta-1);
  text-decoration: none;
  flex: none;
  /* Altura do lockup inteiro. Tudo aqui dimensiona por em, entao mudar isto
     escala o conjunto sem descolar o icone do wordmark. */
  font-size: var(--sw-logo-h, 26px);
  line-height: 1;
}

.sw-logo--sm { --sw-logo-h: 20px; }
.sw-logo--lg { --sw-logo-h: 40px; }
.sw-logo--xl { --sw-logo-h: 72px; }

/* Empilhado: icone em cima, palavra embaixo. E a proporcao do Asset 20. */
.sw-logo--pilha {
  flex-direction: column;
  gap: 0.3em;
}

/* --- o icone -------------------------------------------------------------- */

/* O ICONE E SVG INLINE. Nao <img>, nao mascara, e as duas exclusoes foram
   medidas em 27/08/2026:

   - `<img src="icone.svg">` NAO herda currentColor: SVG externo dentro de <img>
     e opaco ao CSS do documento e sai sempre na cor do arquivo.

   - `mask-image: url(icone.svg)` herda a cor (o fundo pintado com currentColor
     atravessa a mascara) e funciona bem... sobre HTTP. Em `file://` a mascara
     NAO se aplica — origem opaca — e falha CALADA: a caixa fica com o tamanho
     certo, o computed style mostra a URL certa, e nada aparece. Como a galeria
     promete abrir com duplo clique, isso desqualifica a mascara.

   Inline resolve os dois: `fill: currentColor` herda a tinta do registro e
   funciona em qualquer protocolo. O custo e a marcacao carregar o path — para
   isso existe img/marca/icone-inline.html, pronto para copiar, e o arquivo .svg
   segue sendo a fonte de verdade. Em PHP e um include; em React, um componente. */
svg.sw-logo-icone {
  display: block;
  /* 1,15em e nao 1em: no lockup horizontal o tubarao e mais BAIXO que a caixa de
     texto do wordmark, entao em altura igual ele le como menor. A proporcao do
     Asset 20 tem o tubarao mais largo que a palavra. */
  height: 1.15em;
  width: auto;
  flex: none;
  fill: currentColor;
  overflow: visible;
}

/* A saida quando nao da para inlinar: a arte crua como <img>, invertida por
   registro. Perde o currentColor (fica preto ou branco, nada no meio) mas
   funciona em qualquer protocolo. */
img.sw-logo-icone {
  display: block;
  height: 1em;
  width: auto;
  flex: none;
  filter: invert(var(--sw-logo-inverte, 0));
}

/* --- o wordmark ----------------------------------------------------------- */

/* PNG branco com alfa, invertido por registro.

   A marca nao entregou vetor da versao nova, entao inlinar nao e opcao. E a
   mascara esta fora pelo mesmo motivo do icone. `invert(1)` sobre arte branca
   com alfa devolve arte preta com o MESMO alfa — nao um retangulo — entao o
   recorte continua limpo sem um segundo arquivo.

   O valor vem do token, nao de uma classe: quem troca o registro nao precisa
   lembrar de trocar o logo tambem, e esse esquecimento e exatamente o que
   produz logo branco invisivel sobre papel. */
.sw-logo-wordmark {
  display: block;
  height: 0.62em;
  width: auto;
  flex: none;
  filter: invert(var(--sw-logo-inverte, 0));
}

.sw-logo--pilha .sw-logo-wordmark { height: 0.44em; }

/* --- emergencia declarada ------------------------------------------------- */

/* Quando o arquivo nao esta disponivel. Nao imita o lockup: assume que e
   texto, com a caixa alta e o espacamento de um wordmark tipografico. */
.sw-logo--texto {
  font-family: var(--ds-display, "Space Grotesk", system-ui, sans-serif);
  font-weight: 700;
  font-size: calc(var(--sw-logo-h, 26px) * 0.7);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* --- o acento no wordmark ------------------------------------------------- */

/* "SHARK PRO" com PRO no acento, para quando o lockup nao cabe e o texto e a
   opcao. Continua sendo o caso de emergencia, so mais bem resolvido. */
.sw-logo--texto b { font-weight: 700; color: var(--sw-acento); }

/* ============================================================================
   SELO
   ----------------------------------------------------------------------------
   O icone dentro de um circulo. Serve para avatar, favicon grande, marca de
   agua e o ponto de partida do pre-loader.
   ========================================================================== */

.sw-selo {
  display: grid;
  place-items: center;
  width: var(--sw-selo-h, 44px);
  height: var(--sw-selo-h, 44px);
  border-radius: 50%;
  background: var(--sw-veu-1);
  box-shadow: inset 0 0 0 1px var(--sw-linha);
  color: var(--sw-tinta-1);
  flex: none;
}

.sw-selo .sw-logo-icone { height: 46%; }

.sw-selo--acento {
  background: var(--sw-acento);
  color: var(--sw-acento-tinta);
  box-shadow: none;
}

/* ============================================================================
   MARCA DE AGUA
   ----------------------------------------------------------------------------
   O tubarao gigante e apagado no fundo de uma secao. Vale o aviso: e ornamento,
   entao vai com aria-hidden e nunca carrega informacao.
   ========================================================================== */

.sw-logo-agua {
  position: absolute;
  inset: auto -6% -12% auto;
  width: min(52%, 620px);
  color: var(--sw-tinta-4);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

.sw-logo-agua .sw-logo-icone { width: 100%; height: auto; }

/* O tubarao nadando devagar, do rodape do site no ar. Distancia curta e ciclo
   longo: e presenca, nao chamariz. */
@media (prefers-reduced-motion: no-preference) {
  .sw-logo-agua--nada > .sw-logo-icone {
    animation: sw-nada 26s ease-in-out infinite alternate;
  }
}

@keyframes sw-nada {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to   { transform: translate3d(-4%, -2%, 0) rotate(-1.5deg); }
}

/* ============================================================================
   ALVO DE TOQUE
   ----------------------------------------------------------------------------
   `pointer: coarse` e nao `max-width`: largura de tela nao diz nada sobre o
   dedo. Janela estreita no desktop continua tendo mouse; tablet de 1024px e
   dedo puro. Ver a secao "O dedo" do README.
   ========================================================================== */

@media (pointer: coarse) {
  /* O logo mede 90x23 no tamanho --sm. Ele quase sempre e o link para a home —
     o alvo mais usado de uma pagina inteira — e era o terceiro menor da
     medicao. Cresce so a caixa; o desenho fica do mesmo tamanho. */
  a.sw-logo { min-height: 44px; }
}