/* ============================================================
 * Hakari, camada do site sobre o FBG Design System
 *
 * O design system (@finalboss/fbg-design, vendorizado em vendor/) já resolve
 * tokens, temas, componentes e auditoria. Aqui só mora o que é do Hakari.
 *
 * Regra desta folha: ZERO `var(--color-accent)`. O auditor conta o acento por
 * página e o limite é um só. Deixar o carmesim aqui dentro faria toda página
 * ter dois acentos, e o CTA perderia a voz (comportamento.md §1.6).
 * ============================================================ */

/* --- Piso de acessibilidade ---------------------------------
 * comportamento.md §1.5: alvo clicável de 44 x 44 px no mínimo.
 * O design system define --control-height: 40px, então botão, aba e item de
 * paginação ficam abaixo do piso, e o switch tem 40 x 22.
 *
 * Corrigido aqui. O mesmo ajuste precisa subir para o fbg-design para valer
 * também no portfólio e no Hon, comportamento.md §1.11, consistência entre
 * projetos da marca.
 */
:root {
  --control-height: 44px;
  --hk-tabela-linha: 56px;
}

.fbg-btn,
.fbg-tabs__tab,
.fbg-pagination__item,
.fbg-check,
.fbg-switch-row,
.fbg-radio {
  min-block-size: var(--control-height);
}

.fbg-btn { padding-inline: var(--space-6); }
.fbg-tabs__tab { display: inline-flex; align-items: center; }
.fbg-switch-row { align-items: center; }
.fbg-switch { block-size: 24px; }

/* O rótulo do switch é a área de toque: 44 de altura vem da linha inteira,
   não do controle de 24px. */

/* --- Movimento -----------------------------------------------
 * comportamento.md §1.4: prefers-reduced-motion é obrigatório e não significa
 * só desligar. Aqui não há deslocamento informativo, o estado do switch
 * também é dado pela cor de fundo e por aria-checked, então cortar a
 * transição não remove informação.
 *
 * Sem forçar a cascata: a especificidade igual e a ordem posterior já bastam.
 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fbg-skeleton { animation: none; opacity: 0.6; }
  .fbg-btn,
  .fbg-input,
  .fbg-switch,
  .fbg-switch::before,
  .fbg-check__box,
  .fbg-tooltip__tip,
  .fbg-skip-link {
    transition: none;
  }
}

/* --- Cabeçalho ---------------------------------------------- */

.hk-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  background: var(--color-bg);
  border-block-end: 1px solid var(--border);
}

.hk-header__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-4);
}

.hk-marca {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--control-height);
  gap: var(--space-3);
  color: var(--text-primary);
  text-decoration: none;
}

.hk-marca__nome {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--font-tracking-tight);
}

.hk-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
}

.hk-nav a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--control-height);
  padding-inline: var(--space-3);
  border-radius: var(--radius-control);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-label);
  letter-spacing: var(--font-tracking-wider);
  text-transform: uppercase;
  color: var(--text-secondary);
  text-decoration: none;
}
.hk-nav a:hover { color: var(--text-primary); }
.hk-nav a[aria-current='page'] { color: var(--text-primary); }

/* --- Ritmo de página ---------------------------------------- */

.hk-secao { padding-block: var(--space-12); }
.hk-secao--larga { padding-block: clamp(var(--space-12), 9vw, var(--space-24)); }

.hk-titulo-secao {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3) var(--space-6);
  justify-content: space-between;
  margin-block-end: var(--space-8);
  padding-block-end: var(--space-4);
  border-block-end: 1px solid var(--border);
}

/* Parágrafo de abertura. Medida de leitura curta e peso de texto secundário,
   sem subir a escala, quem carrega o peso nesta linguagem é o número. */
.hk-lead {
  max-inline-size: 62ch;
  margin-block: var(--space-4) var(--space-6);
  font-size: var(--font-size-lead);
  color: var(--text-secondary);
}

/* §7/§11: a marca usa DOIS pesos, 400 e 500, "evitar 600/700". O navegador
 * renderiza `<strong>` e `<b>` em 700 por padrão, então esta regra os traz para
 * o 500 da marca.
 *
 * Ela é uma REDE, não o recurso de ênfase. O auditor avisa sempre que encontra
 * `<b>`/`<strong>` no HTML, mesmo com o peso corrigido aqui, porque o que o
 * guia pede é que a ênfase não venha do peso: "o contraste tipográfico vem do
 * par geométrica + mono". Por isso a abertura do `index.html` não usa `<strong>`
 *, a frase-chave se sustenta pela posição. A regra fica para nenhum `<strong>`
 * futuro voltar a renderizar em 700 sem ninguém notar.
 *
 * O valor é literal de propósito: `--font-weight-medium` não existe no
 * `tokens.css` do design system. Os tokens de peso estão declarados em
 * `primitives.js:141` (regular 400, medium 500) mas o build do CSS não os emite,
 * então os 9 usos que o próprio DS faz caem todos no 400 inicial. Emitir os
 * tokens agora mudaria o peso de todo componente do DS de uma vez, decisão à
 * parte, não efeito colateral desta. */
strong,
b { font-weight: 500; }

/* --- Faixa de números da fila -------------------------------
 * Números reais, mono, sem ornamento. 間: o respiro separa o que importa. */

.hk-faixa {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-6);
  padding-block: var(--space-8);
  border-block: 1px solid var(--border);
}

.hk-numero__valor {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-leading-tight);
  letter-spacing: var(--font-tracking-tight);
  font-variant-numeric: tabular-nums;
}

.hk-numero__unidade {
  font-size: var(--font-size-caption);
  color: var(--text-secondary);
}

/* --- Grade assimétrica de trabalho --------------------------- */

.hk-grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
@media (min-width: 900px) {
  .hk-grade--lateral { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
  .hk-grade--lateral-inverso { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
}

.hk-lista-limpa { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.hk-lista-limpa > li { display: grid; gap: var(--space-1); }

/* --- Rating: número, incerteza e percentil -------------------
 * IDEA.md: exibir o número real, a incerteza junto e o percentil ao lado.
 * O número dá granularidade, o percentil dá significado. */

.hk-rating {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--font-family-display);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--font-tracking-tight);
  font-variant-numeric: tabular-nums;
  line-height: var(--font-leading-tight);
}

.hk-rating__incerteza { font-size: var(--font-size-caption); color: var(--text-secondary); }

/* Barra de confiança: encolhe conforme o RD cai. Largura = confiança
   adquirida (RD 350 → 0%, RD 50 → 100%), não o rating. */
.hk-confianca {
  display: grid;
  gap: var(--space-2);
  max-inline-size: 320px;
}

.hk-confianca__trilho {
  block-size: 4px;
  background: var(--color-surface-sunken);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.hk-confianca__preenchido {
  display: block;
  block-size: 100%;
  background: var(--color-primary-fg);
}

/* --- Rota ----------------------------------------------------- */

.hk-rota {
  display: inline-flex;
  align-items: center;
  min-inline-size: 3.2rem;
  justify-content: center;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-label);
  letter-spacing: var(--font-tracking-wider);
  color: var(--text-secondary);
}

.hk-rota--principal { color: var(--text-primary); border-color: var(--border-interactive); }

/* Fora da rota principal: marcado por forma e texto, nunca só por cor
   (comportamento.md §1.6). */
.hk-rota--secundaria::after {
  content: '·2';
  margin-inline-start: var(--space-1);
  color: var(--text-muted);
}

/* --- Check-in ---------------------------------------- */

.hk-checkin { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .hk-checkin { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.hk-checkin__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
}

.hk-checkin__pos {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-label);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.hk-checkin__quem { display: grid; gap: 2px; min-inline-size: 0; }

.hk-checkin__tag {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-caption);
  overflow-wrap: anywhere;
}

.hk-checkin__meta { font-size: var(--font-size-label); color: var(--text-muted); }

.hk-vaga {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-control);
  color: var(--text-muted);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-label);
  letter-spacing: var(--font-tracking-wide);
}

/* --- Opção de times ------------------------------------------ */

.hk-opcao { display: grid; gap: var(--space-6); }

.hk-opcao__cabeca {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  align-items: baseline;
  justify-content: space-between;
}

.hk-times { display: grid; gap: var(--space-6); }
@media (min-width: 760px) { .hk-times { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.hk-time {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.hk-time__cabeca {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block-end: var(--space-2);
  border-block-end: 1px solid var(--border);
}

.hk-time__nome {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-medium);
}

.hk-time__media {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-label);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.hk-dupla {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-3);
  align-items: baseline;
  padding-block: var(--space-2);
  border-block-end: 1px solid var(--border);
}
.hk-dupla:last-child { border-block-end: 0; }

.hk-dupla__quem { font-family: var(--font-family-mono); font-size: var(--font-size-caption); overflow-wrap: anywhere; }
.hk-dupla__nota { font-size: var(--font-size-label); color: var(--text-muted); }
.hk-dupla__valor { font-variant-numeric: tabular-nums; font-size: var(--font-size-caption); }

/* --- Medidores da opção --------------------------------------
 * Cada métrica é mostrada como número e como barra contra um teto. A barra é
 * um segundo canal; o número nunca depende dela (comportamento.md §1.6). */

.hk-medidor { display: grid; gap: var(--space-2); }

.hk-medidor__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.hk-medidor__valor {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-caption);
  font-variant-numeric: tabular-nums;
}

.hk-medidor__trilho {
  block-size: 6px;
  background: var(--color-surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  overflow: hidden;
}

.hk-medidor__preenchido {
  display: block;
  block-size: 100%;
  background: var(--color-primary-fg);
}

/* --- Código de torneio ---------------------------------------
 * Recurso condicionado a acesso de produção da Riot, que o projeto ainda não
 * tem. A tela mostra o estado indisponível e o que destrava, em vez de
 * esconder o recurso (comportamento.md §1.10 e §1.2). */

.hk-codigo {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--color-surface-sunken);
}

.hk-codigo__valor {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-body);
  letter-spacing: var(--font-tracking-wide);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  overflow-wrap: anywhere;
}

.hk-codigo__valor[data-indisponivel] { color: var(--text-muted); }

/* --- Tabela do ranking --------------------------------------- */

.hk-rank { font-variant-numeric: tabular-nums; }
.hk-rank td, .hk-rank th { vertical-align: middle; }
.hk-rank__pos { font-family: var(--font-family-mono); color: var(--text-muted); inline-size: 3rem; }
.hk-rank__tag { font-family: var(--font-family-mono); font-size: var(--font-size-caption); overflow-wrap: anywhere; }
.hk-rank__nota { font-size: var(--font-size-label); color: var(--text-muted); }
.hk-rank__rotas { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* --- Rodapé -------------------------------------------------- */

.hk-rodape {
  padding-block: var(--space-12);
  border-block-start: 1px solid var(--border);
  display: grid;
  gap: var(--space-4);
}
.hk-rodape__riot { max-inline-size: 68ch; font-size: var(--font-size-label); color: var(--text-muted); }

/* --- Passo a passo (fluxo de entrada) ------------------------ */

.hk-passos { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; counter-reset: passo; }
.hk-passos > li {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: var(--space-4);
  align-items: start;
  padding-block-end: var(--space-4);
  border-block-end: 1px solid var(--border);
}
.hk-passos > li:last-child { border-block-end: 0; }
.hk-passos__num {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-label);
  color: var(--text-muted);
  padding-block-start: 2px;
}

/* ============================================================
 * A LINGUAGEM DO INSTRUMENTO
 *
 * O portfólio é peça editorial de marca: pode ser manifesto, pode ter hero,
 * lema vertical, kanji d'água e hanko, e usa os quatro elementos de
 * assinatura que o design system oferece.
 *
 * O Hakari é ferramenta. Mesma identidade (tokens, fontes, pesos, superfícies
 * planas, um acento), gramática de composição diferente: denso desde a
 * primeira linha, números carregando o peso, e uma assinatura que um portfólio
 * não tem como ter, a RÉGUA DE MEDIÇÃO abaixo.
 *
 * Fonte do diagnóstico: table de sobreposição no README, medida contra
 * fbg-portfolio/index.html e portfolio.css.
 * ============================================================ */

/* --- Estado no cabeçalho -------------------------------------
 * O portfólio põe um rótulo de marca com kanji no canto. Aqui o canto
 * carrega o ESTADO do sistema, em mono, é a diferença entre um site e um
 * painel: o primeiro diz o que é, o segundo diz como está. */

.hk-estado {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-label);
  letter-spacing: var(--font-tracking-wide);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.hk-estado__item { display: inline-flex; align-items: baseline; gap: var(--space-2); }
.hk-estado__item + .hk-estado__item::before {
  content: '·';
  margin-inline-end: var(--space-4);
  color: var(--border-strong);
}
.hk-estado__valor { color: var(--text-primary); }

/* --- Painel de estado ----------------------------------------
 * Faixa de leitura rápida: rótulo em mono, valor grande o bastante para ser
 * lido de longe, tudo alinhado à esquerda. Nada centralizado. */

.hk-painel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.hk-painel__celula {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-6);
  background: var(--color-surface);
}

.hk-painel__valor {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-regular);
  line-height: 1;
  letter-spacing: var(--font-tracking-tight);
  font-variant-numeric: tabular-nums;
}

.hk-painel__valor--mono {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-h3);
}

/* --- A régua -------------------------------------------------
 * A assinatura do Hakari. Uma escala graduada onde o dado da fila vive: onde
 * está a massa, onde estão os extremos, quanto mede a janela de matchmaking.
 *
 * Existe porque o design system só oferece quatro elementos de assinatura e o
 * portfólio usa todos. Este é novo, nasceu no Hakari, e mede alguma coisa, * um portfólio não tem o que medir aqui.
 *
 * Sem gradiente nenhum: as marcações são elementos de 1px, não uma imagem de
 * fundo repetida. O auditor reprova qualquer forma de gradiente, e o §3
 * recusa por wabi-sabi de qualquer forma. */

.hk-escala { display: grid; gap: var(--space-3); }

.hk-escala__trilho {
  position: relative;
  block-size: 2.25rem;
  border-block-end: 1px solid var(--border-strong);
}

.hk-escala__tiques {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  display: flex;
  justify-content: space-between;
}

.hk-escala__tiques span {
  inline-size: 1px;
  block-size: var(--space-2);
  background: var(--border-strong);
}

/* Onde vive a maior parte da fila: uma faixa, não um ponto. */
.hk-escala__janela {
  position: absolute;
  inset-block-end: 0;
  block-size: var(--space-3);
  background: var(--color-primary-subtle);
  border-block-end: 2px solid var(--color-primary-fg);
}

/* Um jogador específico, marcado por traço e rótulo, nunca só por cor. */
.hk-escala__marcador {
  position: absolute;
  inset-block-end: 0;
  display: grid;
  justify-items: center;
  translate: -50% 0;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-label);
  color: var(--text-primary);
  white-space: nowrap;
}

.hk-escala__marcador::after {
  content: '';
  inline-size: 1px;
  block-size: var(--space-6);
  background: var(--text-primary);
}

.hk-escala__eixo {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-family-mono);
  font-size: var(--font-size-label);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* --- Linhas de dado ------------------------------------------
 * Lista densa para o painel. O portfólio usa linhas de índice com nome grande
 * em display; aqui a linha é baixa e o que cresce é o número. */

.hk-linhas { margin: 0; padding: 0; list-style: none; }

.hk-linhas > li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto auto;
  gap: var(--space-3) var(--space-4);
  align-items: baseline;
  padding-block: var(--space-3);
  border-block-end: 1px solid var(--border);
}
.hk-linhas > li:first-child { border-block-start: 1px solid var(--border); }

.hk-linhas__pos {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-label);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.hk-linhas__quem {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-caption);
  overflow-wrap: anywhere;
}

.hk-linhas__num {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-body);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.hk-linhas__nota {
  font-size: var(--font-size-label);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* --- Divisor de seção ----------------------------------------
 * Régua graduada curta no lugar do <hr>. Substitui o fbg-rule do design
 * system, que é um traço liso, e traço liso o portfólio já usa. */

.hk-divisor {
  display: flex;
  gap: 2px;
  block-size: 6px;
  align-items: flex-end;
  margin-block: var(--space-12);
}

.hk-divisor span {
  inline-size: 1px;
  block-size: 3px;
  background: var(--border-strong);
}
.hk-divisor span:nth-child(5n + 1) { block-size: 6px; }

/* ============================================================
 * MODO CLARO, O HORIZONTE
 *
 * O modo claro da marca é "tinta sobre papel" (§3, sumi-e): a mesma lógica do
 * kanji d'água do modo escuro, que isola o sujeito na escuridão. Aqui o papel
 * ganha a paisagem que fecha a peça, o monte no rodapé da tela, como o fim de
 * um emakimono.
 *
 * Duas decisões para você aprovar:
 *
 * 1. NADA DE GRADIENTE. Um sumi-e pede lavagem de tinta, e lavagem pede
 *    gradiente, que o §3 recusa por wabi-sabi e o auditor reprova. A saída é
 *    a certa para a marca: planos chapados, como xilogravura ukiyo-e, que é
 *    literalmente impressão em blocos de cor plana.
 *
 * 2. DUAS ANIMAÇÕES, e uma delas existe para satisfazer o §1.4.
 *    - A névoa deriva devagar: é animação ambiente, e é o que o §1.4 chama de
 *      enfeite. É a que combina com a referência que você tem em mente.
 *    - A tinta é pintada conforme a página rola: responde "onde estou no
 *      texto", que é a pergunta que o §1.4 aceita.
 *    Desligar qualquer uma é uma linha. Estão separadas de propósito.
 *
 * O horizonte é `position: fixed` no z-index 0, e o conteúdo sobe para o
 * z-index 1: a paisagem fica atrás de tudo, o papel continua legível.
 * ============================================================ */

.hk-horizonte {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 0;
  block-size: clamp(150px, 28vh, 340px);
  pointer-events: none;
  user-select: none;

  /* Aparece nos DOIS modos. No escuro o papel vira noite e o disco vira lua, o mesmo par sol/lua do alternador, coerente com o botão. */
  display: block;
}

body > main,
body > footer { position: relative; z-index: 1; }

/* Reserva o pé da página para o monte não ficar por baixo do último parágrafo. */
body > footer { padding-block-end: calc(var(--space-12) + clamp(110px, 20vh, 240px)); }

.hk-horizonte svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
  max-block-size: 34vh;
}

.hk-horizonte__camada { block-size: auto; }

/* Planos chapados. Sem gradiente, sem sombra, sem brilho.
 *
 * As cinco cores vêm do arquivo que o usuário gerou (`fuji-dia.svg` /
 * `fuji-noite.svg`), com os mesmos hex. As duas versões dele têm geometria
 * idêntica e mudam só quatro valores, então aqui viram uma marcação só com
 * variáveis, que é o que permite a troca de tema ser ANIMADA em vez de ser um
 * corte seco de uma imagem para a outra. */
.hk-horizonte {
  --hk-fuji-papel: #F7F5F0;
  --hk-fuji-monte: #5B7C99;
  --hk-fuji-neve: #FFFFFF;
  --hk-fuji-sol: #C4432B;
  --hk-fuji-lua: #E8EBF2;
}

[data-theme='dark'] .hk-horizonte {
  --hk-fuji-papel: #0A0A0A;
  --hk-fuji-monte: #2A3450;
  --hk-fuji-neve: #8394BC;
}

.hk-horizonte__papel { fill: var(--hk-fuji-papel); }
.hk-horizonte__monte { fill: var(--hk-fuji-monte); }
.hk-horizonte__neve { fill: var(--hk-fuji-neve); }
.hk-horizonte__sol { fill: var(--hk-fuji-sol); }
.hk-horizonte__lua { fill: var(--hk-fuji-lua); }

/* A MESMA animação do alternador, com outro pivô.
 *
 * Lá o pivô é o horizonte do ícone, (16,20); aqui é o meio do topo reto,
 * (720,120), o ponto por onde o disco afunda. O sol está 60 unidades acima
 * desse ponto e a lua 60 abaixo, então girar 180° troca os dois de lugar: o sol
 * se põe atrás da pedra e a lua nasce do outro lado.
 *
 * Não há recorte de céu aqui como há no ícone: o monte é desenhado depois do
 * disco, então é a própria pedra que esconde quem passa por baixo da linha do
 * topo. No ícone o recorte é necessário porque o desenho é pequeno demais para
 * a pedra cobrir o disco inteiro.
 *
 * `transform-box: view-box` com origem em 0 0 torna o translate-rotate-translate
 * previsível sem depender do default de origem do SVG, mesmo padrão do ícone. */
.hk-horizonte__orbita {
  transform-box: view-box;
  transform-origin: 0 0;
  transform: translate(720px, 120px) rotate(var(--hk-orbita, 0deg)) translate(-720px, -120px);
  transition: transform 0.8s cubic-bezier(0.5, 0.05, 0.2, 1);
}

/* A animação de rolagem saiu. Ela recortava o topo da faixa (inset 48%) e subia
 * conforme a página rolava, fazia sentido quando o topo era só pedra. Agora o
 * topo é onde o sol nasce, e o recorte o escondia no primeiro quadro: a peça
 * abria sem sol nenhum. A animação do ícone é a que fica, e é a pedida. */

/* §1.4: respeitar reduced motion não é só desligar, aqui troca deslocamento
 * por nada, porque a paisagem é estática e completa por natureza. */
@media (prefers-reduced-motion: reduce) {
  .hk-horizonte__orbita { transition: none; }
  .hk-tema__orbita { transition: none; }
}

/* ============================================================
 * ALTERNADOR DE TEMA, o monte com sol e lua
 *
 * Portado de `Projeto Mokkan/goals-app/src/components/header/ThemeToggle.jsx`,
 * que é o original da marca. Desenho, cores, geometria e curva do giro são os
 * do original. Duas diferenças:
 *
 * 1. TAMANHO. O original tem 34 x 34 e o comportamento.md §1.5 exige 44 x 44 de
 *    alvo clicável. Aqui o botão tem 44 e o desenho continua pequeno dentro
 *    dele: a área de toque é maior que a tinta.
 * 2. PERSISTÊNCIA. O original grava em `localStorage('theme')`; aqui quem manda
 *    é o design system, com a chave `fbg-theme`, para o snippet anti-flash do
 *    `<head>` e o botão não discordarem.
 *
 * As cores do original ficam como estão, o sol é #F6A623, um âmbar fora da
 * paleta da marca, e o mesmo valor já está no Mokkan e no portfólio. Trocar
 * aqui sozinho criaria uma terceira versão do mesmo botão na marca. Fica
 * registrado como decisão em aberto.
 * ============================================================ */

.hk-tema {
  appearance: none;
  display: grid;
  place-items: center;
  inline-size: var(--control-height);
  block-size: var(--control-height);
  padding: 0;

  /* Sem caixa. O monte flutua: sem fundo, sem borda, sem raio visível. O alvo
     continua 44 x 44, comportamento.md §1.5 diz literalmente que "a área de
     toque é maior que a tinta", e uma caixa desenhada em volta do desenho é
     justamente o que faz a tinta parecer maior do que precisa.

     O original do Mokkan desenha a caixa (`rounded-lg border` com fundo de
     superfície) e o portfólio herdou isso pelo `fbg-btn--ghost`. Aqui sai. */
  background: transparent;
  border: 0;
  border-radius: var(--radius-control);
  cursor: pointer;
  overflow: hidden;

  /* Sem caixa, o único sinal de que isto é um controle é o cursor e a mudança
     no hover. Estado, não decoração: §1.4 recusa movimento que não explica. */
  opacity: 0.82;
  transition: opacity var(--motion-base) var(--motion-ease);
}

.hk-tema:hover,
.hk-tema:focus-visible { opacity: 1; }

.hk-tema svg { display: block; }

/* O giro acontece em torno do horizonte (16,20) do viewBox.
   `transform-box: view-box` com origem em 0 0 torna o
   translate-rotate-translate previsível em qualquer navegador, sem depender do
   default de origem do SVG. Ângulo vem de `--hk-orbita`, escrito pelo JS. */
.hk-tema__orbita {
  transform-box: view-box;
  transform-origin: 0 0;
  transform: translate(16px, 20px) rotate(var(--hk-orbita, 0deg)) translate(-16px, -20px);
  transition: transform 0.8s cubic-bezier(0.5, 0.05, 0.2, 1);
}