/* ═══════════════════════════════════════════════════════════════════════════
   krigashi.css — o VOLTAR AO TOPO do theautor.com, trazido para ca inteiro.

   Pedido do autor (2026-08-22): *"faça o 'Krigashi' do theautor.com ser o
   icone de voltar ao topo, basicamente, pega o krigashi de lá e coloca aqui,
   com as mesmas funções"*.

   Foi COPIADO, nao reescrito — regra da casa: skin se copia, nunca se inventa.
   Vem de `site/siteoficial.html` (linhas 581-586 e 1857-1936). As tres decisoes
   que vieram junto, e o porque de cada uma, do proprio fonte de la:

   1. O gato e uma MASCARA, nao uma imagem. O fundo do botao e a cor da skin e a
      mascara recorta o desenho — assim ele acompanha a cor do site em vez de
      ser um PNG preto colado em cima. (`krigashi-topo.png` e 432x292, com
      canal alfa; a razao 216/146 esta travada em `aspect-ratio`.)
   2. DOIS TOQUES para subir. Relato do autor em 2026-08-10: com um toque so,
      gente clicava no gato sem querer e era teleportada para o topo. O 1o toque
      ARMA e pergunta; so o 2o sobe. Rolar, sair do foco, tocar fora ou 3,2s de
      silencio desarmam.
   3. A dica nao fica FIXA (viraria widget de template): ela ACENDE — no
      computador com o hover/foco, no celular com um flash de 1,6s quando o gato
      aparece, porque la nao existe hover.

   As cores saem dos tokens deste site (`--accent`, `--accent-rgb`, `--bg0`),
   que sao os mesmos nomes de la — por isso o arquivo veio quase sem emenda.
   ═══════════════════════════════════════════════════════════════════════════ */

.to-top {
  position: fixed; right: 26px; bottom: 26px; z-index: 90;
  cursor: pointer; letter-spacing: 0; padding: 0;
  /* o desenho manda na forma: largura fixa, altura pela razao do PNG */
  width: 92px; aspect-ratio: 216 / 146; height: auto;
  border: 0; border-radius: 0;
  background: currentColor;
  color: rgb(var(--accent-rgb) / .62);
  -webkit-mask: url(/assets/img/krigashi-topo.png) center / contain no-repeat;
          mask: url(/assets/img/krigashi-topo.png) center / contain no-repeat;
  filter: drop-shadow(0 3px 8px rgb(0 0 0 / .45));
  box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none;
  transition: opacity .28s ease, transform .28s ease, color .2s ease, filter .2s ease;
}
.to-top.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.to-top:hover {
  color: var(--accent);
  background: currentColor;
  filter: drop-shadow(0 5px 14px rgb(var(--accent-rgb) / .5));
}
.to-top:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
@media (max-width: 640px) { .to-top { width: 68px; height: auto; right: 14px; bottom: 14px; } }
@media (prefers-reduced-motion: reduce) {
  .to-top { transition: opacity .2s ease; transform: none; }
  .to-top.show { transform: none; }
}

/* ── a dica ────────────────────────────────────────────────────────────────
   A pilula e CENTRADA no eixo do gato: no computador ele mora em right:26 com
   92px de largura, entao o centro dele cai em right:72. `right:72` poe a BORDA
   direita da pilula nesse centro e `translateX(50%)` a empurra meia largura
   para a direita — o CENTRO da pilula cai exatamente sobre o gato, seja qual
   for o texto. */
.to-top-hint {
  position: fixed; z-index: 90; right: 72px; bottom: 96px;
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
  text-align: center; color: var(--accent);
  background: color-mix(in oklab, var(--bg0) 88%, transparent);
  border: 1px solid rgb(var(--accent-rgb) / .32);
  padding: 8px 15px; border-radius: 4px;
  box-shadow: 0 10px 28px rgb(0 0 0 / .38);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none;
  transform: translateX(50%) translateY(6px);
  transition: opacity .3s ease, transform .3s ease;
}
/* a setinha centrada aponta para o gato */
.to-top-hint::after {
  content: ""; position: absolute; top: 100%; left: 50%; margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: color-mix(in oklab, var(--bg0) 88%, transparent);
}
.to-top-hint.on { opacity: 1; transform: translateX(50%) translateY(0); }
@media (max-width: 640px) {
  /* no celular o gato (right:14 + 68px -> centro em right:48) fica colado na
     borda: centrar a pilula nele a jogaria para fora da tela. Entao ela ENCOSTA
     na borda direita e e a SETINHA que aponta — a 34px da direita da pilula,
     que e exatamente o centro do gato. */
  .to-top-hint {
    right: 14px; bottom: 68px; font-size: 10px; letter-spacing: .16em; padding: 7px 12px;
    transform: translateY(6px);
  }
  .to-top-hint.on { transform: translateY(0); }
  .to-top-hint::after { left: auto; right: 34px; margin-left: 0; }
}

/* ── o pulinho ────────────────────────────────────────────────────────────
   Continuo e amortecido, nunca em "atos": comunica "topo" sem uma palavra. */
@keyframes tt-hop {
  0%, 100% { transform: translateY(0) scale(1.04); }
  50%      { transform: translateY(-4px) scale(1.06); }
}
@media (hover: hover) {
  .to-top.show:hover { animation: tt-hop 1.15s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .to-top.show:hover { animation: none; transform: translateY(-2px) scale(1.04); }
}
/* ARMADO (o 1o dos dois toques): acende e pulsa enquanto espera a confirmacao.
   Vale no celular, onde nao ha hover para dar o mesmo recado. */
.to-top.armed {
  color: var(--accent);
  filter: drop-shadow(0 5px 16px rgb(var(--accent-rgb) / .6));
  animation: tt-hop 1.15s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .to-top.armed { animation: none; transform: scale(1.04); } }

/* sem JavaScript o gato nao aparece: ele nao teria o que fazer */
html:not(.js) .to-top, html:not(.js) .to-top-hint { display: none; }