/*
 * BIBLIOTECA DA VIDA — CAMADA DE APARÊNCIA
 *
 * Carregada por último, depois de style.css e guia.css. Só ajusta aparência:
 * brilho e batida do centro da roda, cores da roda, hierarquia tipográfica.
 * Nenhuma regra de layout estrutural e nenhuma funcionalidade dependem deste
 * arquivo — removê-lo de index.html devolve o visual anterior.
 *
 * As duas famílias continuam sendo as mesmas ('Vida Serif' = URW Bookman
 * Light, 'Vida Sans' = Nimbus Sans). Ambas têm um peso só, e o site usa
 * font-synthesis:none, então negrito não existe: a hierarquia aqui é feita
 * com tamanho, cor, espaçamento e um contorno mínimo (-webkit-text-stroke),
 * que engrossa a letra sem o negrito falso.
 */

/* ============================================================ centro vivo */

.hub-brilho,
.hub-nucleo {
  pointer-events: none;
  transform-box: view-box;
  transform-origin: 300px 300px;
  will-change: transform, opacity;
}

.hub-brilho {
  opacity: .8;
  animation: batida 4.6s cubic-bezier(.36, .15, .28, 1) infinite;
}

.hub-nucleo {
  opacity: .9;
  animation: batida-nucleo 4.6s cubic-bezier(.36, .15, .28, 1) infinite;
}

/* Sístole, diástole, pausa longa: duas batidas próximas e depois descanso. */
@keyframes batida {
  0%   { transform: scale(1);     opacity: .72; }
  7%   { transform: scale(1.075); opacity: 1;   }
  14%  { transform: scale(1.015); opacity: .80; }
  21%  { transform: scale(1.055); opacity: .94; }
  32%  { transform: scale(1);     opacity: .72; }
  100% { transform: scale(1);     opacity: .72; }
}

@keyframes batida-nucleo {
  0%   { transform: scale(1);     opacity: .85; }
  7%   { transform: scale(1.045); opacity: 1;   }
  14%  { transform: scale(1.01);  opacity: .88; }
  21%  { transform: scale(1.03);  opacity: .97; }
  32%  { transform: scale(1);     opacity: .85; }
  100% { transform: scale(1);     opacity: .85; }
}

/* O botão "Pausar movimento" que já existe também para o coração. */
.motion-paused .hub-brilho,
.motion-paused .hub-nucleo,
.paused .hub-brilho,
.paused .hub-nucleo { animation-play-state: paused; }

/* O centro responde ao toque e ao mouse sem depender só do brilho. */
.wheel-hub { cursor: pointer; }

/* A pergunta no centro da roda.
 * 'Vida Display' e' a TeX Gyre Pagella Italic recortada (assets/fonte-display.css,
 * creditos em licencas-fonte-display.txt).
 * O contorno escuro garante a leitura no pico da batida, quando o centro clareia. */
.wheel-pergunta {
  font-family: 'Vida Display', Georgia, serif;
  font-size: 29px;
  letter-spacing: .1px;
  fill: #f4fff9;
  paint-order: stroke;
  stroke: #0d211c;
  stroke-width: 3.6px;
  stroke-opacity: .42;
  stroke-linejoin: round;
  transition: fill .3s ease;
}

.wheel-hub:hover .wheel-pergunta,
.wheel-hub:focus-visible .wheel-pergunta { fill: #ffffff; }

.wheel-hub .wheel-hub-anel {
  fill: transparent;
  stroke: #9fe6c4;
  stroke-width: 1;
  stroke-opacity: 0;
  transition: stroke-opacity .3s ease;
}

.wheel-hub:hover .wheel-hub-anel,
.wheel-hub:focus-visible .wheel-hub-anel { stroke-opacity: .55; }

.wheel-hub:hover ~ .hub-brilho { opacity: 1; }

/* ============================================================== a roda */

.piece {
  fill-opacity: .74;
  stroke: #cdeede2e;
  stroke-width: 1;
  transition: fill-opacity .35s ease, filter .35s ease, stroke .35s ease;
}

.sector:hover .piece,
.sector:focus .piece {
  fill-opacity: .95;
  filter: brightness(1.16) saturate(1.1);
  stroke: #e4fff1;
  stroke-width: 1.4;
}

.sector text {
  font-size: 14.5px;
  letter-spacing: .2px;
  fill: #fdfffb;
  stroke: #0e201b6e;
  stroke-width: 1.1px;
  paint-order: stroke;
}

.sector .small {
  font-size: 10px;
  letter-spacing: 1.1px;
  fill: #d8f6e4;
  fill-opacity: .72;
  stroke: none;
}



/* ====================================================== hierarquia do texto
 *
 * O problema anterior era todo mundo na mesma faixa: 15–16px, mesma cor
 * esverdeada, sem peso. Aqui cada papel ganha um degrau próprio de tamanho,
 * de cor e de espaçamento.
 */

body { color: #dde9dd; }

/* Título de página: serifa grande, bem aberta, quase branca. */
.content h1 {
  font-family: 'Vida Serif', Georgia, serif;
  font-size: clamp(36px, 4.4vw, 57px);
  line-height: 1.08;
  letter-spacing: -1.8px;
  color: #f4faf0;
  -webkit-text-stroke: .28px currentColor;
  margin: 0 0 16px;
}

/* Etiqueta acima do título: pequena, maiúscula, muito espaçada, em verde. */
.content .eyebrow,
.guia-indice {
  font-family: 'Vida Sans', sans-serif;
  font-size: 11px;
  letter-spacing: 2.8px;
  text-transform: uppercase;
  color: #86c9a4;
  margin: 0 0 13px;
}

/* Linha de apoio do título: maior que o corpo, mais clara que os cartões. */
.content .intro {
  font-size: 17.5px;
  line-height: 1.62;
  color: #cadfce;
  max-width: 640px;
  margin: 0 0 34px;
}

.section-title {
  font-family: 'Vida Serif', Georgia, serif;
  font-size: 29px;
  line-height: 1.2;
  letter-spacing: -.5px;
  color: #eef5e6;
  -webkit-text-stroke: .22px currentColor;
  margin: 46px 0 18px;
}

.crumb {
  font-size: 12px;
  letter-spacing: .7px;
  color: #8ba79a;
  margin-bottom: 26px;
}

.crumb a { color: #a8ccb8; }

/* ---------------------------------------------------------------- cartões */

.card { padding: 24px 26px 26px; }

/* Rótulo do cartão: metadado, não conteúdo. Fica discreto e espaçado. */
.card small {
  display: block;
  font-family: 'Vida Sans', sans-serif;
  font-size: 10px;
  letter-spacing: 1.9px;
  text-transform: uppercase;
  color: #7cb99a;
  margin: 0 0 11px;
}

.card h2 {
  font-family: 'Vida Serif', Georgia, serif;
  font-size: 21px;
  line-height: 1.28;
  letter-spacing: -.3px;
  color: #f1f7ec;
  -webkit-text-stroke: .2px currentColor;
  margin: 0 0 9px;
}

.card p {
  font-size: 14.5px;
  line-height: 1.6;
  color: #a5bbab;
  margin: 0;
}

.card:hover h2 { color: #ffffff; }

/* O cartão inteiro já é o link: a linha "Explorar" saiu de assets/app.js. */
.card .action { display: none; }

/* ------------------------------------------------------------- leitura */

.entry-body p,
.entry-section li,
.entry-section p { font-size: 16px; line-height: 1.78; color: #d5e3d6; }

.entry-section h2 {
  font-family: 'Vida Serif', Georgia, serif;
  font-size: 24px;
  letter-spacing: -.4px;
  color: #edf4e5;
  margin: 0 0 12px;
}

.entry-section h3 {
  font-family: 'Vida Sans', sans-serif;
  font-size: 13px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #8fcfaa;
}

.entry-thought {
  font-family: 'Vida Serif', Georgia, serif;
  font-size: 21px;
  line-height: 1.5;
  color: #dcefdd;
}

.tag { font-size: 13px; letter-spacing: .3px; }

.context { font-size: 14.5px; line-height: 1.72; }

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

.search-form input { font-size: 16px; }
.search-form button,
.guia-botao,
.guia-secundario,
.motion {
  font-family: 'Vida Sans', sans-serif;
  letter-spacing: .3px;
  -webkit-text-stroke: .2px currentColor;
}

/* ------------------------------------------------- perguntas guiadas */

.guia-passo legend h2 {
  letter-spacing: -.6px;
  color: #f4faf0;
  -webkit-text-stroke: .24px currentColor;
}

.guia-opcao { font-size: 15.5px; color: #e2eee2; }
.guia-motivo { font-size: 14.5px; color: #aec5b2; }
.guia-numero { -webkit-text-stroke: .3px currentColor; }

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

.curation-note,
#footer-msg { letter-spacing: .2px; }

/* ------------------------------------------------- movimento reduzido */

@media (prefers-reduced-motion: reduce) {
  .hub-brilho,
  .hub-nucleo { animation: none; opacity: .85; }
  .piece,
  .wheel-pergunta,
  .wheel-hub .wheel-hub-anel { transition: none; }
}

/* -------------------------------------------------------------- mobile */

@media (max-width: 760px) {
  .content h1 { font-size: clamp(31px, 8.5vw, 40px); letter-spacing: -1.1px; }
  .content .intro { font-size: 16px; }
  .section-title { font-size: 24px; margin-top: 36px; }
  .card h2 { font-size: 19px; }
  .entry-body p, .entry-section li, .entry-section p { font-size: 15.5px; }
}

/* =========================================== brilho por cima dos setores
 * A mesma luz do centro, fraca, desenhada depois das peças: é o que faz a
 * claridade parecer sair de dentro da roda em vez de ficar presa no buraco.
 */
.hub-brilho-cima {
  pointer-events: none;
  transform-box: view-box;
  transform-origin: 300px 300px;
  opacity: .32;
  animation: batida 4.6s cubic-bezier(.36, .15, .28, 1) infinite;
}

/* Onda que sai da borda do centro a cada batida: some antes de virar enfeite. */
.hub-pulso {
  pointer-events: none;
  transform-box: view-box;
  transform-origin: 300px 300px;
  opacity: 0;
  animation: onda 4.6s cubic-bezier(.22, .61, .36, 1) infinite;
}

@keyframes onda {
  0%   { transform: scale(1);    opacity: 0;   }
  6%   { transform: scale(1.02); opacity: .42; }
  26%  { transform: scale(1.22); opacity: 0;   }
  100% { transform: scale(1.22); opacity: 0;   }
}

.motion-paused .hub-pulso,
.paused .hub-pulso { animation-play-state: paused; }

.motion-paused .hub-brilho-cima,
.paused .hub-brilho-cima { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .hub-brilho-cima { animation: none; opacity: .3; }
  .hub-pulso { animation: none; opacity: 0; }
}

/* ================================================= o foco no título
 * render() move o foco para o h1 a cada navegação, o que é bom para leitor
 * de tela — mas o retângulo de foco aparecia para quem navega com o mouse.
 * Quem usa teclado continua vendo a marcação.
 */
.content h1:focus { outline: none; }
.content h1:focus-visible { outline: 2px solid #c5e8d2; outline-offset: 8px; border-radius: 4px; }

/* ====================================== a cor da área tinge a página
 * --area e --area-luz são definidas por pintarArea() em assets/app.js a cada
 * navegação. Sem elas, tudo cai no verde padrão.
 */
.content .eyebrow { color: var(--area-luz, #86c9a4); }
.card small { color: var(--area-luz, #7cb99a); }
.entry-section h3 { color: var(--area-luz, #8fcfaa); }
.option { border-left-color: var(--area-luz, #6d865f); }
.entry-thought { border-left: 2px solid var(--area-luz, #6d865f); padding-left: 18px; }