/* ==========================================================
   BASE — tokens, reset e tipografia da marca
   Vem de app/globals.css, sem reescrita de nomes: o que está
   aqui já era global no site original.
   ========================================================== */

/* ==========================================================
   FONTES DA MARCA

   No site em Next.js estas declarações eram geradas pelo
   next/font/local, e por isso não existem em globals.css. Aqui
   elas precisam ser escritas à mão — sem elas, --fonte-display e
   --fonte-texto ficam indefinidas e o site cai na fonte de
   sistema.

   Os caminhos são relativos a este arquivo (assets/css/).

   ATENÇÃO: a Lato do brandkit é subset latino básico e NÃO traz o
   «ē» (U+0113). Onde aparece a palavra grega «Sykē» o navegador
   troca de fonte só naquele caractere e o peso muda no meio da
   palavra. O site compõe o acento com o mácron solto U+00AF — ver
   a classe .macron adiante. A correção definitiva é uma Lato com
   Latin Extended-A.
   ========================================================== */

@font-face {
  font-family: "Krisma Serif";
  src: url("../fontes/krismaserif-regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Krisma Serif";
  src: url("../fontes/krismaserif-regularitalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Lato SIKKAY";
  src: url("../fontes/Lato-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lato SIKKAY";
  src: url("../fontes/Lato-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lato SIKKAY";
  src: url("../fontes/Lato-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Lato SIKKAY";
  src: url("../fontes/Lato-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --fonte-display: "Krisma Serif";
  --fonte-texto: "Lato SIKKAY";
}

/* =========================================================
   SIKKAY — tokens, base e sistema de motion
   Fonte: DNA Criativo v1.1 §3.1, §3.2, §3.6 · Sistema de motion v1.0
   ========================================================= */

:root {
  /* ---- paleta institucional ---- */
  --terracota: #633317;
  --areia: #cfb8a3;
  --verde: #333626;
  --azul: #7a878f;

  --argila: #8c4721;
  --linho: #e0d6c7;
  --vital: #8f9480;
  --respiro: #f1efe6;
  --figo: #d7887d;

  /* ---- neutros derivados (DNA §3.1) ---- */
  --n900: #20221a;
  --n700: #333626;
  --n500: #6b6e5e;
  --n300: #a8aa9c;
  --n150: #d9d6ca;

  /* linha derivada da tinta, não um cinza à parte */
  --linha: rgba(51, 54, 38, 0.14);
  --linha-suave: rgba(51, 54, 38, 0.08);

  /* ---- escala tipográfica (DNA §3.2, modular 1.25) ---- */
  --display-xl: clamp(3rem, 7.4vw, 4.75rem);
  --display-m: clamp(2rem, 4vw, 3.0625rem);
  --display-s: clamp(1.75rem, 3vw, 2.4375rem);
  --title-l: clamp(1.5rem, 2.2vw, 1.9375rem);
  --title-s: 1.25rem;
  --body-l: 1.125rem;
  --body-m: 1rem;
  --body-s: 0.875rem;
  --label: 0.75rem;

  /* ---- espaçamento base 8, escala Fibonacci (DNA §3.6) ---- */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 40px;
  --s5: 64px;
  --s6: 104px;

  --conteudo-max: 1200px;
  --texto-max: 68ch;
  --margem: clamp(20px, 5vw, 64px);

  /* ---- raio (regra do site, v1.2) ----
     Botao e sempre pilula: o raio acompanha a altura, entao a palavra
     fica contida no corpo do botao em vez de num retangulo de cantos
     lascados. Foto e caixa dividem o mesmo raio para o conjunto ler
     como um sistema. Controle pequeno (hamburguer) usa o raio curto:
     a pilula num quadrado de 40px viraria um circulo. */
  --raio-botao: 999px;
  --raio-caixa: 20px;
  --raio-foto: 20px;
  --raio-ui: 12px;

  /* ---- controles fixos sobre a cena ----
     A barra tem 74px e o hamburguer 40px: sobram 17px de respiro
     acima dele. A pilula de contato repete esse mesmo 17px embaixo,
     entao os dois controles emolduram o hero na mesma distancia. */
  /* dobro do respiro anterior (17px -> 34px): a marca e o menu descolam
     do topo, que e o que da o ar de folego do hero. */
  --barra-h: 108px;
  --controle-h: 40px;
  --borda-cena: clamp(16px, 4vw, 40px);

  /* Altura do lockup no cabecalho. O recuo abaixo depende dela, entao as
     duas moram juntas: mexeu numa, a outra acompanha. */
  --logo-h: 38px;

  /* Distancia da borda esquerda do SVG ate o "S" de SIKKAY. Medido no
     proprio arquivo: o "S" comeca em x=62,58 num viewBox de 47,26 de
     altura, ou seja 1,3242 alturas de logo. */
  --recuo-s: calc(var(--logo-h) * 1.3242);
  --respiro-controle: calc((var(--barra-h) - var(--controle-h)) / 2);

  /* respiro inferior do hero — e a linha de base que o H2, o aviso de
     rolagem e o botao Contato compartilham */
  --base-cena: clamp(48px, 8vh, 88px);

  /* O H2 tem ~30px de altura e os controles do trilho tem 52px. Subtrair
     11px poe o centro dos controles na altura do centro do H2, que e o
     alinhamento pedido. No mobile o trilho volta para a margem propria,
     porque la o texto fica acima dele e nao ao lado. */
  --trilho-base: calc(var(--base-cena) - 11px);

  /* ---- motion (Sistema de motion v1.0) ---- */
  --e-conteudo: cubic-bezier(0.16, 1, 0.3, 1);
  --e-ui: cubic-bezier(0.22, 1, 0.36, 1);
  --t-reveal: 700ms;
  --t-ui: 200ms;
  --stagger: 120ms;
  --shift: 40px;
}

@media (max-width: 900px) {
  :root {
    --trilho-base: var(--respiro-controle);

    /* dobro da margem lateral do desktop. Como logo, hamburguer,
       titulos, aviso de rolagem e o botao Contato leem todos daqui,
       o respiro abre nos dois lados de uma vez so. */
    --borda-cena: clamp(32px, 8vw, 48px);
  }
}

/* =========================================================
   Reset enxuto
   ========================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--respiro);
  color: var(--n700);
  font-family: var(--fonte-texto), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--body-m);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote {
  margin: 0;
}

/* PREMISSA DO SITE: nenhum parágrafo termina com uma palavra sozinha na
   última linha. `pretty` faz o navegador reequilibrar as duas últimas
   linhas para evitar a órfã, e continua valendo quando o texto for
   editado ou a tela mudar de largura — o que travar medidas na mão não
   faria. Vale para desktop e telefone, em todas as páginas. */
p {
  text-wrap: pretty;
}

img,
picture,
video {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--argila);
  outline-offset: 3px;
}

/* =========================================================
   Tipografia da marca
   Krisma afirma, Lato explica. (DNA §3.2)
   Krisma nunca abaixo de 24px — as hastes finas somem.
   ========================================================= */

.display,
.titulo {
  font-family: var(--fonte-display), Georgia, "Times New Roman", serif;
  font-weight: 400;
  text-wrap: balance;
}

.display {
  font-size: var(--display-xl);
  line-height: 1.02;
  letter-spacing: -0.01em;
}

.titulo {
  font-size: var(--display-m);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

/* Mácron do "Sykē".

   A Lato do brandkit é um subset latino básico: os dez arquivos, do Thin
   ao Black, não trazem o U+0113 (ē) nem o mácron combinante (U+0304).
   Sem o glifo, o navegador troca de fonte só naquele caractere — e era
   por isso que a letra aparecia com outro peso no meio da palavra.

   Aqui o acento é composto com o mácron solto (U+00AF), que a Lato TEM.
   Vantagem sobre desenhar uma barra: é o glifo da própria fonte, então
   acompanha o traço da Light sem imitar. Tudo em em, para seguir tamanho
   e peso do texto ao redor.

   O caractere real fica no `.sr` ao lado, para leitor de tela e busca —
   o que se perde é só o copiar-e-colar, que traz "Syke". A correção
   definitiva é uma Lato com Latin Extended-A no lugar do subset. */
.macron {
  position: relative;
  display: inline-block;
}

/* O 0,37em é medido, não tateado: na caixa do span a linha de base cai a
   1,21em do topo; o "e" tem 0,506em de altura-x, então o topo dele está a
   0,706em. O glifo do mácron é desenhado a ~0,24em do topo da própria
   caixa, logo 0,706 − 0,24 − 0,10 de folga = 0,37em. */
.macron::after {
  content: "\00AF";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0.37em;
  text-align: center;
  line-height: 1;
  pointer-events: none;
}

/* Rótulo de canto — gesto canônico do IDENTIDADE.
   O rótulo quase sempre antecede um título. Como os dois são blocos de
   margem zero, encostavam um no outro, separados só pela entrelinha. Os
   24px abaixo são o respiro padrão desse par: vale para qualquer rótulo
   do site, e uma página só precisa sobrescrever se tiver motivo. */
.rotulo {
  display: block;
  margin-block-end: var(--s3);
  font-size: var(--label);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--argila);
}

.corpo {
  font-size: var(--body-l);
  line-height: 1.65;
  max-width: var(--texto-max);
}

/* =========================================================
   Layout
   ========================================================= */

.wrap {
  width: 100%;
  max-width: var(--conteudo-max);
  margin-inline: auto;
  padding-inline: var(--margem);
}

.secao {
  padding-block: clamp(64px, 10vw, 104px);
}

.pular {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--terracota);
  color: var(--respiro);
  padding: 12px 20px;
  z-index: 100;
}
.pular:focus {
  left: 0;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* =========================================================
   MOTION

   Regra dura: o conteúdo é visível por padrão.
   A classe .js só é adicionada depois que o script confirma
   que consegue revelar. Na carmofarm o conteúdo nasce com
   opacity:0 no CSS — se o JS falha, a página fica em branco.
   Aqui isso não acontece.
   ========================================================= */

.js .reveal {
  opacity: 0;
  transform: translateY(var(--shift));
}

.js .reveal[data-dir="left"] {
  transform: translateX(calc(var(--shift) * -1));
}

.js .reveal[data-dir="right"] {
  transform: translateX(var(--shift));
}

.js .reveal[data-dir="none"] {
  transform: none;
}

.js .reveal.dentro {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--t-reveal) var(--e-conteudo),
    transform var(--t-reveal) var(--e-conteudo);
}

/* atraso entre camadas — é o que cria profundidade */
.js .reveal[data-atraso="1"].dentro {
  transition-delay: var(--stagger);
}
.js .reveal[data-atraso="2"].dentro {
  transition-delay: calc(var(--stagger) * 2);
}

/* stagger de lista: 60ms, no máximo 6 itens */
.js .reveal[data-i="1"].dentro { transition-delay: 60ms; }
.js .reveal[data-i="2"].dentro { transition-delay: 120ms; }
.js .reveal[data-i="3"].dentro { transition-delay: 180ms; }
.js .reveal[data-i="4"].dentro { transition-delay: 240ms; }
.js .reveal[data-i="5"].dentro { transition-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    transform: none;
  }
  .js .reveal.dentro {
    transition: opacity 200ms linear;
    transition-delay: 0ms !important;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   Imagens — obstaculo ao salvamento casual
   Acompanha ProtegerImagens.tsx. Nao e protecao: o arquivo ja
   esta no navegador de quem abriu a pagina. Ver o comentario
   do componente para o que isto cobre e o que nao cobre.
   ========================================================= */

img {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
}