/*
 * O site de apresentação da Coraci.
 *
 * CSS escrito à mão, sem framework e sem etapa de build — é o que faz esta
 * página pesar dezenas de kilobytes em vez de centenas. As fichas da marca são
 * copiadas de frontend/layers/base/app/assets/css/main.css, e copiadas com os
 * valores exatos: aproximar de cabeça é como duas marcas nascem.
 *
 * Os botões e os dois fundos foram medidos na tela de entrada
 * (auth.coraci.local/entrar), nos dois modos, em vez de deduzidos: o Nuxt UI
 * resolve as cores em oklch a partir de uma escala neutra, e chutar o
 * equivalente erraria por pouco em todo lugar — que é o jeito mais caro de
 * errar numa marca.
 */

/* ---------------------------------------------------------------- fontes */

/*
 * Auto-hospedadas, e não do Google Fonts.
 *
 * A plataforma não faz nenhuma requisição a terceiro em tempo de execução, e a
 * página pública não vai ser a primeira a fazer. As duas são variáveis: um
 * arquivo cobre toda a faixa de peso, o que dá 69 kB no total — menos do que
 * custariam quatro arquivos estáticos.
 */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fontes/plus-jakarta-sans.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans';
  src: url('fontes/open-sans.woff2') format('woff2');
  font-weight: 300 800;
  font-display: swap;
}

/* ----------------------------------------------------------------- marca */

:root {
  /* A espiral do sol. `primary` na plataforma inteira. */
  --coraci-50: #f0f9f8;
  --coraci-100: #def3ef;
  --coraci-200: #bce7df;
  --coraci-400: #59c0ad;
  --coraci-500: #339e8a;
  --coraci-600: #278675;
  --coraci-700: #1f7061;
  --coraci-800: #1a5b4f;
  --coraci-900: #184940;

  /* Os raios. A cor de ênfase. */
  --sol-100: #feead2;
  --sol-300: #fbbc6f;
  --sol-500: #fa9314;
  --sol-600: #e68105;
  --sol-700: #bd6a05;

  /*
   * A escala neutra é a `slate`, que é o que `app.config.ts` declara em
   * `ui.colors.neutral`. Os tons abaixo são os que a tela de entrada de fato
   * usa — foram lidos de lá, não escolhidos.
   */
  --slate-50: #f8fafc;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;

  /*
   * As oito cores dos nós da animação.
   *
   * Não são escolhidas a gosto: saem de um arco de matiz que **começa no teal
   * da marca e termina no laranja da marca**, com saturação e claridade
   * seguradas em valores constantes. O arco passa por trás da roda — azuis,
   * violetas, rosas — e não pelos verdes, porque o caminho curto produz limões
   * ácidos que não se parecem com nada do resto da plataforma.
   *
   * Vizinhos alternam claridade além do matiz: a separação passa a vir de duas
   * dimensões, o que também funciona para quem não distingue cor. É a mesma
   * ideia do sublinhado dos links na plataforma.
   *
   * O vermelho puro ficou de fora de propósito — o arco para no rosa (350°).
   * Num contexto de saúde, um ponto vermelho se lê como alerta.
   */
  --no-1: #339e8a;
  --no-2: #64b2d6;
  --no-3: #4059cc;
  --no-4: #8964d6;
  --no-5: #b440cc;
  --no-6: #d664b0;
  --no-7: #cc4057;
  --no-8: #fa9314;

  --fonte-titulo: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --fonte-corpo: 'Open Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;

  --raio: 18px;
  /* 6px é o `rounded-md` que todo botão da plataforma usa. Medido. */
  --raio-botao: 6px;
}

/* ------------------------------------------------------- claro e escuro */

/*
 * Um conjunto de fichas por modo, e o resto da folha não sabe qual está
 * valendo.
 *
 * A classe fica no `<html>` e é `light` ou `dark`, que é a convenção da
 * plataforma — o Nuxt UI escreve exatamente isso, e manter o mesmo nome deixa
 * as duas superfícies inspecionáveis do mesmo jeito.
 *
 * `:root:not(.dark)` em vez de `.light` sozinho: assim o claro também vale no
 * instante entre o HTML chegar e o script decidir, se é que esse instante
 * existe (ver o script no `<head>`).
 */
:root,
:root.light {
  --fundo: linear-gradient(135deg, #e0f7fa 0%, #e8f5e9 25%, #e3f2fd 75%, #e0f2f1 100%);
  --tinta: #123f37;
  --tinta-suave: #3d5f58;

  --cartao: rgb(255 255 255 / 72%);
  --cartao-borda: rgb(255 255 255 / 90%);
  --regua: rgb(18 63 55 / 10%);

  /* O botão cheio da tela de entrada: coraci-500 com texto branco. */
  --botao-cheio-fundo: var(--coraci-500);
  --botao-cheio-tinta: #ffffff;
  --botao-cheio-fundo-hover: var(--coraci-600);

  /* O vazado: slate-50 com um anel interno slate-300. */
  --botao-vazado-fundo: var(--slate-50);
  --botao-vazado-anel: var(--slate-300);
  --botao-vazado-tinta: var(--slate-700);

  --sombra: 0 1px 2px rgb(18 63 55 / 6%), 0 10px 30px -12px rgb(18 63 55 / 18%);
  --sombra-alta: 0 2px 4px rgb(18 63 55 / 8%), 0 22px 48px -18px rgb(18 63 55 / 26%);

  /* Lidas pelo ecossistema.js para pintar o canvas. */
  --orbita: rgb(18 63 55 / 8.5%);
  --rotulo: rgb(18 63 55 / 72%);
  --no-sombra: rgb(18 63 55 / 7%);
  --no-brilho: rgb(255 255 255 / 35%);

  color-scheme: light;
}

:root.dark {
  --fundo: linear-gradient(135deg, #041a3b 30%, #062f34 100%);
  --tinta: var(--slate-200);
  --tinta-suave: #9db5b0;

  --cartao: rgb(15 35 47 / 55%);
  --cartao-borda: rgb(148 163 184 / 14%);
  --regua: rgb(148 163 184 / 18%);

  /*
   * No escuro o primário sobe para o 400 e o texto vira escuro — é o que o
   * Nuxt UI faz, e foi o que a tela de entrada devolveu: fundo #59C0AD,
   * texto slate-900. Inverter o par é o que mantém o contraste nos dois modos.
   */
  --botao-cheio-fundo: var(--coraci-400);
  --botao-cheio-tinta: var(--slate-900);
  --botao-cheio-fundo-hover: #6fcebc;

  --botao-vazado-fundo: var(--slate-900);
  --botao-vazado-anel: var(--slate-700);
  --botao-vazado-tinta: var(--slate-200);

  --sombra: 0 1px 2px rgb(0 0 0 / 30%), 0 10px 30px -12px rgb(0 0 0 / 55%);
  --sombra-alta: 0 2px 4px rgb(0 0 0 / 35%), 0 22px 48px -18px rgb(0 0 0 / 65%);

  --orbita: rgb(226 232 240 / 11%);
  --rotulo: rgb(226 232 240 / 68%);
  --no-sombra: rgb(0 0 0 / 28%);
  --no-brilho: rgb(255 255 255 / 28%);

  color-scheme: dark;
}

/* ------------------------------------------------------------ fundamento */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* Pinta além do `body`: sem isto, o overscroll aparece branco no escuro —
     é o mesmo cuidado que o main.css da plataforma toma. */
  background: #041a3b;
}

:root.light,
:root:not(.dark) {
  background: #e0f7fa;
}

body {
  margin: 0;
  font-family: var(--fonte-corpo);
  font-size: 17px;
  line-height: 1.65;
  color: var(--tinta);
  background: var(--fundo);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--fonte-titulo);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
}

p {
  margin: 0;
}

/*
 * A cor de link vale para link de texto, e **não** para o que só por acaso é
 * uma âncora.
 *
 * O `:not()` não é zelo: `:root.dark a` tem especificidade (0,1,1) e vencia
 * `.botao-cheio` (0,1,0). O efeito era um botão teal com texto teal — rótulo
 * invisível — e o nome da marca pintado de teal, só no escuro. No claro nada
 * disso aparecia, porque ali a regra é `a` sozinho, (0,0,1), que perde para a
 * classe.
 *
 * Dava para resolver subindo a especificidade dos botões. Excluir é melhor:
 * diz o que a regra quer dizer, em vez de vencer uma disputa.
 */
a:not(.botao):not(.marca) {
  color: var(--coraci-700);
}

:root.dark a:not(.botao):not(.marca) {
  color: var(--coraci-400);
}

.envolto {
  width: min(1120px, 100% - 2.5rem);
  margin-inline: auto;
}

.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--coraci-600);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--raio) 0;
  z-index: 10;
}

.pular:focus {
  left: 0;
}

/* -------------------------------------------------------------- cabeçalho */

.topo {
  padding: 1.5rem 0 0.5rem;
}

.topo > .envolto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--tinta);
}

.marca img {
  width: 42px;
  height: 42px;
}

.marca span {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.03em;
}

.canto {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* --------------------------------------------------------------- botões */

/*
 * A forma vem da plataforma, medida na tela de entrada: 6px de raio, peso 500,
 * e a fonte do **corpo** e não a de título — um detalhe que se erra por
 * suposição, já que títulos usam a Plus Jakarta.
 *
 * O tamanho não: lá os botões são de formulário (14px), aqui são chamada de
 * herói. O que se mantém é a linguagem — raio, peso, par de cores, e o anel
 * interno no lugar de borda.
 */
.botao {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.05rem;
  border-radius: var(--raio-botao);
  font-family: var(--fonte-corpo);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: background-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
}

.botao-cheio {
  background: var(--botao-cheio-fundo);
  color: var(--botao-cheio-tinta);
}

.botao-cheio:hover {
  background: var(--botao-cheio-fundo-hover);
}

/*
 * Anel interno, e não `border`.
 *
 * É como o Nuxt UI desenha a variante `outline` — `box-shadow: inset 0 0 0 1px`
 * —, e a diferença não é estética: borda ocuparia espaço na caixa e os dois
 * botões lado a lado ficariam com alturas diferentes por um pixel.
 */
.botao-vazado {
  background: var(--botao-vazado-fundo);
  color: var(--botao-vazado-tinta);
  box-shadow: inset 0 0 0 1px var(--botao-vazado-anel);
}

.botao-vazado:hover {
  box-shadow: inset 0 0 0 1px var(--coraci-400);
}

/* A observação de que o destino pede sessão, sem virar um parágrafo. */
.botao .nota {
  font-size: 0.78rem;
  font-weight: 400;
  opacity: 0.72;
}

/*
 * O botão de trocar o tema: ícone só, fantasma, como o `UColorModeButton` da
 * plataforma. 36px de lado para o alvo de toque não ficar menor que o dedo.
 */
.tema {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--raio-botao);
  background: transparent;
  color: var(--tinta-suave);
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.tema:hover {
  background: var(--cartao);
  color: var(--tinta);
}

.tema svg {
  width: 20px;
  height: 20px;
}

/*
 * Um ícone por modo, e o que se vê é **para onde o clique leva** — lua no
 * claro, sol no escuro.
 *
 * É a convenção dos menus da plataforma, que escolhem o ícone pelo destino:
 * `colorMode.value === 'dark' ? 'i-lucide-sun' : 'i-lucide-moon'`, ao lado de
 * um rótulo que diz "Tema claro" ou "Tema escuro". Mostrar o estado atual seria
 * igualmente defensável, mas diferente do resto — e um botão que significa duas
 * coisas em duas telas é pior que qualquer uma das duas.
 */
.tema .sol {
  display: none;
}

:root.dark .tema .lua {
  display: none;
}

:root.dark .tema .sol {
  display: block;
}

:focus-visible {
  outline: 2px solid var(--coraci-500);
  outline-offset: 2px;
}

:root.dark :focus-visible {
  outline-color: var(--coraci-400);
}

/* ---------------------------------------------------------------- herói */

.heroi > .envolto {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(1rem, 4vw, 3rem) 0 clamp(2rem, 6vw, 4rem);
}

.heroi h1 {
  font-size: clamp(2.3rem, 6vw, 3.9rem);
  font-weight: 800;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.heroi h1 em {
  font-style: normal;
  color: var(--coraci-600);
}

:root.dark .heroi h1 em {
  color: var(--coraci-400);
}

.chamada {
  font-size: clamp(1.05rem, 2vw, 1.22rem);
  color: var(--tinta-suave);
  max-width: 34ch;
  margin-bottom: 1.75rem;
}

.acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.etimologia {
  margin-top: 1.75rem;
  font-size: 0.95rem;
  color: var(--tinta-suave);
}

.etimologia b {
  color: var(--coraci-700);
  font-weight: 600;
}

:root.dark .etimologia b {
  color: var(--coraci-400);
}

/* ------------------------------------------------------------- animação */

.palco {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 540px;
  margin-inline: auto;
}

.palco canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/*
 * O que aparece sem JavaScript: o sol, parado, com os nomes em volta em texto
 * de verdade. A página não depende da animação para fazer sentido — e esta
 * lista é também o que um leitor de tela encontra, já que o `canvas` é
 * decorativo e fica escondido dele.
 */
.palco-sem-js {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 0.75rem;
}

.palco-sem-js ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 0.75rem;
  max-width: 24rem;
  font-size: 0.9rem;
  color: var(--tinta-suave);
}

.js .palco-sem-js {
  display: none;
}

/* --------------------------------------------------------------- seções */

section {
  padding: clamp(2.5rem, 7vw, 4.5rem) 0;
}

.secao-titulo {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 700;
  margin-bottom: 0.9rem;
}

.secao-texto {
  color: var(--tinta-suave);
  font-size: 1.05rem;
  text-indent: 3em;
}

.secao-texto p + p {
  margin-top: 0.9rem;
}

.secao-texto strong {
  color: var(--tinta);
  font-weight: 600;
}

/* --------------------------------------------------------------- perfis */

.perfis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
  gap: 1rem;
  margin-top: 2rem;
  align-items: center;
}

.perfil {
  background: var(--cartao);
  border: 1px solid var(--cartao-borda);
  border-radius: var(--raio);
  padding: 1.35rem 1.4rem 1.5rem;
  box-shadow: var(--sombra);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.perfil:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-alta);
}

.perfil h3 {
  font-size: 1.12rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

/* O ponto colorido amarra o cartão ao nó correspondente na animação. */
.ponto {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex: none;
}

.perfil p {
  font-size: 0.97rem;
  color: var(--tinta-suave);
}

/* -------------------------------------------------------------- roteiro */

/*
 * O bloco do que ainda não existe.
 *
 * Visualmente distinto de propósito: fundo diferente, etiqueta explícita. É o
 * que permite anunciar o que vem sem que a página afirme que já chegou — e a
 * distinção precisa ser visível, não só textual.
 */
.roteiro {
  background: linear-gradient(135deg, rgb(255 246 235 / 85%), rgb(240 249 248 / 85%));
  border: 1px solid var(--sol-100);
  border-radius: calc(var(--raio) + 6px);
  padding: clamp(1.5rem, 4vw, 2.25rem);
}

:root.dark .roteiro {
  background: linear-gradient(135deg, rgb(72 42 5 / 45%), rgb(15 47 41 / 45%));
  border-color: rgb(250 147 20 / 22%);
}

.etiqueta {
  display: inline-block;
  font-family: var(--fonte-titulo);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sol-700);
  background: var(--sol-100);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  margin-bottom: 0.9rem;
}

:root.dark .etiqueta {
  color: var(--sol-300);
  background: rgb(250 147 20 / 16%);
}

.roteiro-itens {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.25rem;
  margin-top: 1.25rem;
}

.roteiro-itens h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
}

.roteiro-itens p {
  font-size: 0.96rem;
  color: var(--tinta-suave);
}

.roteiro-itens .hoje {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.88rem;
  color: var(--coraci-700);
}

:root.dark .roteiro-itens .hoje {
  color: var(--coraci-400);
}

/* --------------------------------------------------------------- rodapé */

.rodape {
  border-top: 1px solid var(--regua);
  padding: 2.5rem 0 3rem;
  margin-top: 1rem;
}

.rodape > .envolto {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  align-items: flex-start;
  justify-content: space-between;
}

.rodape p {
  font-size: 0.93rem;
  color: var(--tinta-suave);
  max-width: 38ch;
}

.rodape-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  font-size: 0.95rem;
}

/*
 * Link sublinhado, em toda a plataforma — e aqui também.
 *
 * `app.config.ts` explica por quê, e vale repetir: cor sozinha não distingue
 * link de texto para quem não enxerga cor, e o sublinhado é a única affordance
 * que sobrevive a isso.
 */
.rodape-links a {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ------------------------------------------------------------ miudezas */

@media (max-width: 860px) {
  .heroi > .envolto {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .chamada {
    max-width: none;
  }

  .acoes {
    justify-content: center;
  }

  .palco {
    max-width: 400px;
    order: -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}